SfPopupLayout Accept/Decline Button Text Not Visible

[Paul Parkins]

Hi,

I am using Xamarin.Forms v4.3.0.947036 with Syncfusion components v17.3.0.21 (and FreshMvvM) and my application was displaying information via DisplayAlert(). However due to the message content this alert dialog was not wide enough causing what should have been a single line of text, to overflow onto 2 lines (actually has several lines of text in the same message, all doing this). It looked to odd.

So as I have Syncfusion controls I decide I should be able to use the very flexible SfPopupLayout view for the same use, but at a wider width (and possibly height). I want to re-use this as a replacement for DisplayAlert so I didn't really want to embed it within my xaml of any particular page, so I am attempting to implement it using C# only, and under the control of my page model.

The following code works (including the Accept/Decline buttons setting the associated PopupAccepted value), but the buttons themselves do not display (neither do any header/footer separators as shown in your online examples, but these don't really matter). The button text does not display even if I specify the text and/or background colours. Any ideas why not?

Thanks

Paul

        private static bool PopupAccepted = false;

        public async Task<bool> DisplaySfPopupAlert(string title, string message, string acceptText, string cancelText)

        {

            Label popupContent;

            DataTemplate contentTemplateView = new DataTemplate(() =>

            { 

                popupContent = new Label();

                popupContent.VerticalOptions = LayoutOptions.Center;

                popupContent.HorizontalOptions = LayoutOptions.Center;

                popupContent.Text = message;

                return popupContent;

            });

            SfPopupLayout popupLayout = new SfPopupLayout();

            popupLayout.PopupView.HeaderTitle = title;

            popupLayout.PopupView.ShowHeader = (!string.IsNullOrEmpty(title));

            popupLayout.PopupView.ContentTemplate = contentTemplateView;

            popupLayout.StaysOpen = true;

            popupLayout.PopupView.ShowCloseButton = true;

            popupLayout.PopupView.AppearanceMode = string.IsNullOrEmpty(acceptText) ? AppearanceMode.OneButton : AppearanceMode.TwoButton;

            

            // Configure our Accept button

            popupLayout.PopupView.AcceptButtonText = acceptText;

            popupLayout.PopupView.AcceptCommand = new Command(() =>

            {

                PopupAccepted = true;

                popupLayout.IsOpen = false;

            });

            popupLayout.PopupView.PopupStyle.AcceptButtonTextColor = Color.Black;

            popupLayout.PopupView.PopupStyle.AcceptButtonBackgroundColor = Color.White;

            // Configure our Decline button

            popupLayout.PopupView.DeclineButtonText = cancelText;

            popupLayout.PopupView.DeclineCommand = new Command(() =>

            {

                PopupAccepted = false;

                popupLayout.IsOpen = false;

            });

            popupLayout.PopupView.PopupStyle.DeclineButtonTextColor = Color.Black;

            popupLayout.PopupView.PopupStyle.DeclineButtonBackgroundColor = Color.White;

            popupLayout.PopupView.ShowFooter = true;

            // Show the popup and wait for user to close

            PopupAccepted = false;

            popupLayout.IsOpen = true;

            while (popupLayout.IsOpen)

            {

                await Task.Delay(100);

            }

            return PopupAccepted;

        }

[Paul Parkins]

I have since determined that the issue I see is only when I call my DisplaySfPopupAlert() method with an acceptText parameter that is an empty string. It seems that if the popupView's AcceptButtonText propert is empty, then even though my AppearanceMode is set to OneButton (ie. ignore the accept button), that the Decline button is not displayed (but is present).

Is this a bug?

[Balasubramani Sundaram]

Hi Paul, 

   

Thank you for contacting Syncfusion support.   

  

Based on your provided code snippet and details we get know that you are passing an acceptText value as null in parameter of “DisplaySfPopupAlert” then based on the “acceptText” value we are setting the AppearanceMode.  

 

In your case, acceptText is a null so AppearanceMode should be an OneButton. In SfPopupLayout the AppearanceMode.OneButton means it will load only the Accept Button in the footer. So that why accept button get loaded in footer but the acceptText has null so the text didn’t get into the view.  

 

If we set the ApperanceMode.OneButton it will load only the Accept button, if this ApperanceMode.TwoButton it will load the both Accept and Decline button in footer. 

 

Please refer the below sample and UG Link,  

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo1541058297 

 

UG Link : https://help.syncfusion.com/xamarin/popup/layout-customizations#popup-with-one-button-in-the-footer 

 

We hope this helps. Please let us know, if you need any further assistance. 

 

Regards,
Balasubramani Sundaram. 

 

[Paul Parkins]

Thanks for your reply. now that you have pointed this out and I have re-checked the SfPopupLayout documentation I can see it is as you say, and OneButton causes only the Accept button text to be used.

This is in contrast to the DisplayAlert() dialog I was replicating where if you only provide a Cancel string (and no Accept string), then the Cancel button is the one displayed. 

Thanks again

Paul

[Balasubramani Sundaram]

Hi Paul,  

 

Thanks for the update.     

 

Based on our documentation if we set the ApperanceMode.OneButton means it will load with the AcceptButton only if its ApperanceMode.TwoButton mean it will load with Accept and Decline button it a default behavior of SfPopupLayout.  

 

If ApperanceMode.OneButton it will load with AcceptButton API only. We only must change the text and operation on that API. Instead of that you can achieve your requirement by using the FooterTemplate support in SfPopupLayout on that you can load a view based on your business logic. 

 

Please refer the below code snippet and sample,  

 

Code Snippet [C#] 

[PopupPage.Xaml.cs] 

 

private async void Button_Clicked(object sender, EventArgs e) 

{ 

    await this.DisplaySfPopupAlert("PopupHeader","Popup", null , "Cancel"); 

} 

 

private async void Button_Clicked_1(object sender, EventArgs e) 

{ 

    await this.DisplaySfPopupAlert("PopupHeader", "Popup", "Ok", "Cancel"); 

} 

 

public async Task<bool> DisplaySfPopupAlert(string title, string message, string acceptText, string cancelText) 

{ 

    ........ 

 

    popupLayout.PopupView.AppearanceMode = string.IsNullOrEmpty(acceptText) ? AppearanceMode.OneButton : AppearanceMode.TwoButton; 

 

    if (popupLayout.PopupView.AppearanceMode == AppearanceMode.OneButton) 

    { 

        DataTemplate declineButtonTemplate = new DataTemplate(() => 

        { 

            StackLayout _stackLayout = new StackLayout(); 

            Button declineButton = new Button(); 

            declineButton.Text = cancelText; 

            declineButton.BackgroundColor = Color.White; 

            declineButton.TextColor = Color.Black; 

            declineButton.HorizontalOptions = LayoutOptions.End; 

            declineButton.Command = new Command(() => { 

                PopupAccepted = false; 

                popupLayout.IsOpen = false; 

            }); 

            _stackLayout.Children.Add(declineButton); 

            return _stackLayout; 

        }); 

 

        popupLayout.PopupView.FooterTemplate = declineButtonTemplate; 

    } 

    else 

    { 

      .......... 

    } 

 

   ......... 

} 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Popup_Demo-329361336 

 

We hope this helps. Please let us know, if you need any further assistance. 

 

Regards,
Balasubramani Sundaram.