Dialog windows are a great way of showing additional info, a question or a confirmation to the user without navigating to a different screen. I am going to show you how to do this in a canvas app, with a few simple tricks and some very basic logic.

For this demo I’ve created a sample canvas app, based on the Budget Tracker template. To get this template, go to your powerapps environment and click ‘New app > canvas’ at the top. Then choose ‘App templates’ and go for tablet layout; in the next window, choose the ‘Budget Tracker’ template and click the ‘Use’ button at the bottom. Please note that you need a OneDrive for Business license to use this template, as it will save an Excel file to your OneDrive environment.

This template has a list of expenses, with a delete icon for each expense. This icon navigates to a different screen, but let’s make this into a dialog window, keeping the user on the same screen.

First we need to enable a special layout element called a container, if you haven’t done so already for your own app. To enable this, go to ‘File > Settings > Advanced settings’ and toggle ‘Layout containers’.
Go back to your main screen, click the ‘+ insert’ button in the left navigation and open the Layout section; you should now see a container element, click it to add it to your screen.
Go to your tree view and select the new container element; make sure it is the top level element on your screen as it has to be on top of all the other layers. Give it these properties:

• Width: Parent.Width
• Height: Parent.Height
• X/Y: 0
• Fill: RGBA(0, 0, 0, 0.7), a transparent black

It should now look something like this:

Add a new child container element to this container, give it these properties:

• X: (Parent.Width / 2) - (Self.Width / 2)
• Y: (Parent.Height / 2) - (Self.Height / 2)
• Fill: any color, I used RGBA(0,164,228,228)
• Width: 700
• Height: 350

Next we can start to fill our container with the necessary elements. I copied all the elements from the ‘DeleteExpense’ screen into my container. Move the elements around a bit to align them correctly within the new parent. This is what it should now look like:

We’re almost done, only thing left to do is to add logic for opening and closing the dialog. We will be using a local boolean variable for this, indicating whether the dialog should be visible or not.
Select the ‘BudgetScreen’ and in the ‘OnVisible’ event, define the local variable like so:
UpdateContext({DialogVisible:false})
Now select the first container that we added (the one with the transparent background) and set its ‘Visible’ property to this new variable ‘DialogVisible’.
Select the Delete button in the child container and remove the navigate function as we won’t need it anymore. Then add this line to the bottom of the existing OnSelect logic:
UpdateContext({DialogVisible:false})
Then select the Cancel button and set its OnSelect property to this:
UpdateContext({DialogVisible:false})

Preview the app by clicking the play button at the top left of the screen and click the cancel button; the dialog should close.
Then exit the preview and select the trash icon; set its OnSelect property to this:
UpdateContext({DialogVisible:true})

And that’s it, we now have a working dialog with a confirmation!