We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

MVVM do something based on user accept/decline button press in SfPopup

Looking for some help on how I can return a simple bool true/false based on the User's button click on a popup so I can perform some action based on that. 

I have a BASE VIEWMODEL with the following code that I derive all my viewmodels from so that I am not repeating code, this is what I have, feel free to let me know if this is incorrect.

protected bool DisplayAlert(string titlestring textstring acceptButtonTextstring declineButtonText = null)
{
    SfPopupLayout popupMessage = new SfPopupLayout
    {
        PopupView =
        {
            HeaderTitle = title,
            AcceptButtonText = acceptButtonText,
            AcceptCommand  = new Command(() => _displayAlertAcceptDecline = true ),
            DeclineButtonText = declineButtonText,
            DeclineCommand = new Command( () => _displayAlertAcceptDecline = false),
            AppearanceMode = declineButtonText == null ? AppearanceMode.OneButton : AppearanceMode.TwoButton,
            AutoSizeMode = AutoSizeMode.Height,
            WidthRequest = 250,
            ShowCloseButton = false,
            ContentTemplate = new DataTemplate(() =>
            {
                Label label = new Label
                {
                    HorizontalTextAlignment = TextAlignment.Center,
                    VerticalTextAlignment = TextAlignment.Center,
                    Text = text,
                    Padding = 25
                };
                return label;
            })
        }
    };
 
    popupMessage.Show();
    
    return _displayAlertAcceptDecline;
}

In the above case, I am simply setting a bool variable and trying to return that AFTER the user has pressed the Accept/Decline button.

private static bool _displayAlertAcceptDecline//true = accept, false = decline
But it seems as though the return _displayAlertAcceptDecline is executed before the popup layout is closed/accept decline button is pressed. 

I have attached my extracted code here. I am also not sure why this exact code works on my full blown project, but when I moved it over I am getting some error when I click the popup.

I have read through other forums posts here, but they haven't quite seemed to help.

(2) the order of the buttons shown is "Decline   Accept" ....is there a way to easily reverse that to "Accept   Decline"? My workaround has been to put the Decline text into the Accept, and vice versa, but that doesn't feel clean.



Attachment: PopupAcceptDecline_dcaa04d1.zip

12 Replies

BS Balasubramani Sundaram Syncfusion Team January 17, 2020 02:03 PM UTC

Hi Reza,  
 
Thank you for contacting Syncfusion support.   
 
Query 1: Error when open the SfPopupLayout 
 
In SfPopupLayout, we can perform to show the popup in two “On the go” and “Rootview” support.  
 
If you use the “Rootview” type we couldn’t worry about initializing the popup in each render platforms but in your sample you have used “On the go” type to show the popup in this we must to initialize the popup in each render platform. 
 
Please refer the UG link:  
 
 
Code Snippet[C#] 
 
[Android] 
[MainActivity.cs] 
 
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity 
{ 
    protected override void OnCreate(Bundle bundle) 
    { 
        .... 
        .... 
 
        SfPopupLayoutRenderer.Init(); 
        LoadApplication(new App(new AndroidInitializer())); 
    } 
} 
 
[iOS] 
[AppDelegate] 
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate 
{ 
     
    public override bool FinishedLaunching(UIApplication app, NSDictionary options) 
    { 
        ….. 
        ….. 
        SfPopupLayoutRenderer.Init(); 
    } 
} 
 
 
 
 
 
Query 2: Flip the accept and decline button 
 
We didn’t have support to flip the accept and decline button, instead of that you can achieve your requirement by flip the text and condition based on your case. 
 
Please refer the code snippet and sample,  
 
Code Snippet [C#] 
 
[ViewModelBase] 
SfPopupLayout popupMessage = new SfPopupLayout 
{ 
    PopupView = 
    { 
        ...... 
        AcceptButtonText = declineButtonText, 
        AcceptCommand  = new Command(() => _displayAlertAcceptDecline = false ), 
        DeclineButtonText = acceptButtonText, 
        DeclineCommand = new Command( () => _displayAlertAcceptDecline = true), 
        ..... 
        ..... 
    } 
}; 
 
popupMessage.Show(); 
 
 
 
 
We hope this helps. Please let us know, if you need any further assistance. 
 
Regards,
Balasubramani Sundaram. 



RM Reza Mohamed January 17, 2020 10:41 PM UTC

My original question remains unanswered - I would like to perform an action based on if the user presses the Accept button or Decline button from the ViewModel that is initiating the DisplayAlert. 

In the example project, in the ShowPopup method, I would like to display the alert, and only after the Display has closed change the text in the ChangeLabel. How do I achieve this? In the sample I gave, you can see the ChangeLabel refreshes immediately as the Alert Box is opened, and nothing happens after the Alert Box is closed.

private void ShowPopup(object obj)
{
    var returnbool = DisplayAlert("Testing""Testing accept decline""Accept""Decline");
 
    ChangeLabel = returnbool.ToString();
}


KK Karthikraja Kalaimani Syncfusion Team January 20, 2020 02:17 PM UTC

Hi Reza,

Thank you for your update.

Currently we are working on your requirement “To get notification when presses on Accept or Decline Button on Popup by using bool” and we will update further details on 22nd Jan 2020.

We appreciate your patience until then.

Regards,
Karthik Raja



RM Reza Mohamed January 22, 2020 05:12 AM UTC

Looking forward to seeing your response to this.


KK Karthikraja Kalaimani Syncfusion Team January 22, 2020 03:50 PM UTC

Hi Reza,

Thank you for your patience,

We have analyzed your requirement “To get notification when presses on Accept or Decline button on Popup by using bool” and your requirement can be achieved by returning SfPopupLayout instead of _displayAlertAcceptDecline on DisPlayAlert method in provided sample because the SfPopupLayout does not return which button pressed by the user. And we have to set the bool (_displayAlertAcceptDecline) value on Accept and Decline Button command. By using the _displayAlertAcceptDecline value we can set the value for ChangeLable on Closed Event of PopupView.
 
For more details please refer to the below attached sample.

Code Example,

 
public class MainPageViewModel : ViewModelBase 
{
….
public string ChangeLabel 
        { 
            get; 
            set; 
        }
….
private void ShowPopup(object obj) 
 {
 
var popupLayout = DisplayAlert("Testing", "Testing accept decline", "Decline", "Accept"); 
 
            (popupLayout as SfPopupLayout).Closed += MainPageViewModel_Closed; 
 
  }
private void MainPageViewModel_Closed(object sender, System.EventArgs e) 
        { 
            if (_displayAlertAcceptDecline == true) 
            { 
                ChangeLabel = "True"; 
            } 
            else 
            { 
                ChangeLabel = "False"; 
            } 
        }
… 
}

public class ViewModelBase : BindableBase, IInitialize, INavigationAware, IDestructible 
{

public bool _displayAlertAcceptDecline;
….
protected SfPopupLayout DisplayAlert(string title, string text, string acceptButtonText, string declineButtonText = null) 
        { 
            SfPopupLayout popupMessage = new SfPopupLayout 
            {
….
}
   return popupMessage; 
}

Karthik Raja 



RM Reza Mohamed January 28, 2020 06:55 AM UTC

Is it possible to make a custom control of this two-button alert such that it is callable from any viewmodel? Ideally, the control would accept the message, and return a true false based on the button that the user clicks. This would also be in an awaited state since the calling viewmodel would do something based on the return data. Would you have a simple solution with such a custom control?




KK Karthikraja Kalaimani Syncfusion Team January 28, 2020 02:34 PM UTC

Hi Reza,

Thank you for the update.
 

We are unable to understand your requirements clearly. We suspect that you need to validate like login credentials when clicking on the AcceptButton, we can validate on Execute method of AcceptCommand in Popup and if you want to validate when clicking on DeclineButton, we can validate on Execute method of DeclineCommand in the popup. For more details please refer to the below code snippet and User Guide link.

Code  example,


 
 
…. 
PopupView = 
{ 
…. 
  AcceptCommand  = new AcceptButtonCustomCommand(), 
  DeclineCommand = new DeclineButtonCustomCommand(), 
…. 
} 
 
        public class AcceptButtonCustomCommand : ICommand 
        { 
            public event EventHandler CanExecuteChanged; 
 
            public bool CanExecute(object parameter) 
            { 
                return true; 
            } 
 
            public void Execute(object parameter) 
            { 
                // You can write your set of codes that needs to be executed 
            } 
        } 
 
        public class DeclineButtonCustomCommand : ICommand 
        { 
            public event EventHandler CanExecuteChanged; 
 
            public bool CanExecute(object parameter) 
            { 
                return true; 
            } 
 
            public void Execute(object parameter) 
            { 
                // You can write your set of codes that needs to be executed 
            } 
        } 
 
UG link : https://help.syncfusion.com/xamarin/popup/popup-events?cs-save-lang=1&cs-lang=csharp#accept-command

Regards,
Karthik Raja



RM Reza Mohamed January 29, 2020 11:35 PM UTC

Let me clarify the requirements - I have created a PopupLayout control to display an alert message. I need to use this as a Confirmation Box, so this needs to execute Async. In the project attached, the AlertBoxControl has the code for this PopupLayout. The ViewModel MainPage is the caller VM, from there I want to show this popup and do something based on the return bool value. I have placed some placeholder commented code.
private void ShowAlertBox(object obj)
{
    DisplayAlertBox = true;
 
    // Here I want to set what was returned from the user pressing Accept/Decline
 
    //var response = value returned from DisplayAlertBox
    // if(response == true)
    //    TextFromPopup = "Accept Pressed"
    // else
    //     TextFromPopup = "Decline Pressed"
}
(1) How would I accomplish this?

(2) In the AlertBoxControl - how do I bind the Accept and Decline commands such that I can return the value back to the caller VM, in this case MainPageVM
public Command AcceptCommand => new Command(AcceptPressed);
public Command DeclineCommand => new Command(DeclinePressed);
 
 
private void AcceptPressed(object obj)
{
    //return string 'Accept'
}
 
 
private void DeclinePressed(object obj)
{
    // return string 'Decline'
}
(3) In the XAML popuplayout/Contenttemplate/datatemplate/label where we set the main message, how do I access that from the codebehind so I can bind the MessageProperty to it? I am unclear to access the Label from codebehind, and intellisense isn't giving me much.
<popuplayout:PopupView.ContentTemplate>
                <DataTemplate>
 
                    
                    <Label x:Name="messageLabel" Text="New Message" />
 
                DataTemplate>
            popuplayout:PopupView.ContentTemplate>

Attachment: DisplayAlertJan28_c699fbb3.zip


RM Reza Mohamed January 30, 2020 02:48 PM UTC

Are you able to help with this?


KK Karthikraja Kalaimani Syncfusion Team January 30, 2020 02:50 PM UTC

Hi Reza,

Regarding I want to show this popup and do something based on the return bool value. 

Based on your code snippet, your requirement cannot be achieved to return the bool when click on Accept and Decline of the popup on DisPlayAlert method. Because the SfPopuplayout will not return bool value after click on the Accept Button and Decline Button of the PopupView and it will execute the command if the user presses on Accept Button and Decline Button and this is the behavior of SfPopupLayout.

Regarding In the AlertBoxControl - how do I bind the Accept and Decline commands such that I can return the value back to the caller VM, in this case MainPageVM

Currently we are checking your requirement and we will update you further details on 2nd Feb 2020. We appreciate your patience until then.

Regarding how do I access that from the codebehind so I can bind the MessageProperty to it? I am unclear to access the Label from codebehind, and intellisense isn't giving me much.

Currently we are checking your requirement and we will update you further details on 2nd Feb 2020. We appreciate your patience until then.

Regards,
Karthik Raja 



RM Reza Mohamed January 30, 2020 02:53 PM UTC

So the popuplayout cannot be used to display any information to a user where an input is necessary in the MVVM framework? This pretty much renders popuplayout unusable.


KK Karthikraja Kalaimani Syncfusion Team January 31, 2020 01:47 PM UTC

Hi Reza,

 
We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link. 

 



Loader.
Live Chat Icon For mobile
Up arrow icon