PopUps with Interactivity using NotificationRequest [Prism 5.0]

Just about every application has a need to notify user about an event or ask for confirmation before proceeding onto the next operation. Prior to MVVM, we would have used the MessageBox class in the code-behind. But for MVVM applications, that’s not the appropriate way as it breaks the separation of concerns from the view or viewmodel. There are lots of ways to show popups in MVVM application. In Prism, we just happen to use triggers.

Triggers

Triggers are used to initiate actions when a specific event is raised. So, it means we have to setup a view to detect the interaction request of event and then present an appropriate visual display for that request.

What is required for raising events?

Now for raising events, we need an event trigger. But not just any event trigger. We don’t want to use the built-in event trigger, instead Prism provide its own InteractionRequestTrigger. This trigger binds to the source object or the InteractionRequest object that exist in your viewmodel. It automatically wires up and connects to the appropriate raised event on that request.

What next?

Once that request event is raised, the InteractionRequest should than invoke an action and this action call the PopUpWindowAction and displays a popup window to the user. When it is shown its data context is set to the context parameter of the InteractionRequest.

You can even specify your own custom window content by setting the window content property on the popup window action object. The Tile of the popup window is bind to the Tile property of the context object

InteractionRequest

There is couple of interfaces one need to know about:

1)      INotification

2)      IConfirmation

3)      Custom

INotification has two contracts on its two properties as Tile and Content. The Tile property, I just talked about is the property it reads from. Next is the Content property, which is going to be our message. So, if you are not providing your own window content, this message is what’s going to show in the default popup window, that is shown using this request. I like to mention that INotification request is only used when you are trying to notify user about something.

Next we have is IConfirmation request, which extends INotification. It adds a new confirmed property which basically signifies, if the request was confirmed or not. We use IConfirmation request for scenarios where we want to use a messagebox for Yes/No type answer.

And of course you can always create your custom request. So, if you want to pass custom objects or custom information or INotification - IConfirmation doesn’t solve your problem, you can create your own.

 

Implementing Popups

Implementing popups are not at all difficult whilst below steps are followed:

1)      Declare InteractionObject<T> object in viewmodel

2)      Need a DelegateCommand to raise request

3)      Add trigger in view

4)      Inside trigger, add InteractionRequestTrigger

5)      Add PopupWindowAction

6)      Bind command to button

Code starts here...

Let's create a simple view with a button and a label. On click of this button, we will see how to show notifications using MVVM and my label will display the status of notification.

I have a viewModel which has a single property called Status and this property will be used to display response of my request. 

Before moving further, let's go ahead and add reference of Prism.Interactivity using Nuget. Once reference is in place, we will quickly modify our viewModel by adding property of type InteractionRequest<T>. Here T is the type of request, we want to use which is INotification in our case:

 public InteractionRequest<INotification> NotificationRequest { get; set; }

Now for every getter/setter we should have a corresponding command, which will help us in invoking this request:

public ICommand NotificationCommand { get; set; }

Next thing is to instantiate above properties in our constructor of viewModel and raising the notification as:

In above snippet, you will notice that I also provided callback. This callback will get executed, when user acknowledges the notification and dialog closes. In my case, I am setting my Status property to 'Done' in callback.

Now, rest of work is in our view. In order to support notifications, couple of namespaces need to be added in view for Interactivity and Prism.
Next we need to add some interaction triggers:
 <interact:Interaction.Triggers>
        <prism:InteractionRequestTrigger SourceObject="">
            // TODO: Define action here
        </prism:InteractionRequestTrigger>
    </interact:Interaction.Triggers>

In above snippet, we need to set SourceObject. In our case, SourceObject is the request object, which is set in our viewModel and we call it NotificationRequest.
Once SourceObject is set, we need to define an action. For us, it will be PopupWindowAction. Next thing is invoking the request, which will fire our trigger and will in turn show our popup window. In order to achieve that, we need to set a command property on our button. Once all above things are done, our code will look like:

We are all set. Quickly build and run your solution. You will land up with below screen:

Click on the PopUp button, you will receive a notification message as:

As soon as user clicks on OK button, label on the MainWindow will get updated as:

User is notified. So, our callback successfully updated our status property. Hope you enjoyed learning !!!