How to create responsive modal dialog boxes in PowerApps canvas app

Modal dialog boxed are a great way to enhance the user experience by displaying confirmation messages after an interaction is made within an app. Unfortunately the out of the box options are limited in PowerApps so this tutorial will outline how to create a responsive modal dialog like the following:

Firstly within a Screen add a Vertical container. This will be the main container and act as an overlay to hide the content of the screen. We’ll refer to this as the main_container.

Ensure the container is staring the top left corner of the screen so set the X and Y properties to 0. We also want this container to stretch to the to the size of the canvas (or its Parent) and to do this you will need to set the Height and Width as follows:

Height: Parent.Height
Width:  Parent.Width
X: 0
Y: 0

Set the Fill property to a dark shade with some transparency, I like to use RGBA(0, 0, 0, 0.5)

Fill: RGBA(0, 0, 0, 0.5)

Set the Justify (vertical) to Center. Set the Align (horizontal) to Center. This will keep the contents in the center of the screen.

Add another Vertical container within the main_container. This will be used to hold the contents of the modal dialog. We’ll refer to this as the modal_container. You can get clever with this but for this post we’ll keep it simple and just show a Text label with a Button which hides the modal dialog.

Set the Fill of this modal_container to a white background.

Fill: RGBA(255, 255, 255, 1)

You can set the Height and Width accordingly but for this tutorial set the Flexible height property to Off and set the Height to 300 and Width to 500. Set the Justify (vertical) to Center. Set the Align (horizontal) to Center. This will keep the contents in the center of the modal dialog box.

Within the modal_container add a Label control and give it some text. Next add a Button control and give it text accordingly:

Now back on the Screens OnVisible property create a context variable called “showModal” and set it to false. This will create and set a variable when ever the Screen is opened:

OnVisible: UpdateContext({showModal: false})

Now set the main_container Visible property to this context variable. This should hide the main container and the modal dialog we created earlier.

Visible: showModal

On your screen there would be some button or action to show the modal dialog. For example if you have a form which has a Cancel or Submit button, somewhere in its OnSelect property you would set it to update the context variable to true in order to show the modal dialog. For this example lets just insert a Button on the Screen (make sure it is outside the main_container) and set it’s OnSelect property to the following:

OnSelect:  UpdateContext({showModal: true})

By clicking this button the modal dialog should appear again. Finally we need a way to hide the modal dialog. Select the button in the modal dialog and set its OnSelect property to:

OnSelect: UpdateContext({showModal: false})

Now clicking this will subsequently hide the modal dialog. You can optionally navigate away from the screen by adding the Navigate() function to the same button.

Hopefully you found this tutorial useful and simple to create a basic responsive modals. You can do many other clever things with this basic technique and I hope to create more tutorials around this topic but let me know in the comments if there are other type of modal dialogs you would like me to cover.