How to create a modal dialog in Power Apps Canvas apps

Hello everyone and welcome to my blog. Today I will discuss about a very common requirement I come across in most of my projects.

The requirement is to create a modal dialog (popup) in Canvas apps. As of the time of writing this blog, there is no modal dialog control in canvas apps.

If you are thinking that’s a challenge, well it is not. In-fact creating a modal dialog is pretty straightforward. Let’s see how we can achieve the same. We will re-create the same dialog as you see below.

The first most important thing here is to create the modal gray background which cover the whole content. To do this, let’s create a rectangle to start with.

Set the Height and Width property of the rectangle to the Screen Height and Width respectively as illustrated in below screenshots.

The width and height are now set to cover the whole screen. Now the next important thing is the background color of the overlay. For this I set the Fill property of the rectangle to the below formula.

Here in comes the interesting part. I set the alpha property of the RGBA function to 0.7 to make sure the contents behind the dialog are partially visible to bring in the transparent feel. The lesser the value of alpha here, the more transparent would be the behavior.

The background overlay is now taken care of. The next is creating the dialog content. Honestly the content of the dialog can vary. I have created a very simple confirmation dialog using a rectangle and few other controls and obviously not with the best of color choice.

And then combine all these controls in a group.

Make sure you bring the whole group to the front so that the dialog content sits on top of other content of the screen. Following the below screenshot to Reorder the group and bring to front.

Also remember that your dialog content should show above the gray background container. And that is the reason I have placed the background container at the bottom of the group.

Now the final part is to wire up the visibility of the group. On click of the Delete button, I need to show the modal container. For this on the ‘On Select‘ of the button, I use the below formula.

The next step is to set the visibility of the group to this variable.

And on click of the OK or Cancel button of the dialog, I set the showDialog variable to false.

And that’s it. You now have a fully functional modal dialog. Well that’s a lot of steps but you have to agree that it is very simple. You can off-course design the content with a better UI but the basic logic of creating a modal dialog will remain the same more or less.

I hope this helped. You will also like the below posts.

Debajit Dutta
Business Solutions MVP