PowerApps: Modal Dialog or Popup Boxes

Once again, PowerApps succeeds at making easy things difficult for everyday tasks.  This time, it is the creation of Dialog or Popup boxes.  Their approach is incredibly flexible from a User Interface perspective, but it makes just creating a simple stupid dialog box an extended series of steps that will cause you to doubt your decision to ever use this a platform.

HOWEVER, do not get discouraged (at least about this).  In fact, it is fairly easy once you change your perspective a bit.

NOTE: Updated in November 2024 to ditch the kludgy methods we used to have to do

Overview: 

To get this done you're essentially going to :

• create a full-screen "grey" box (label or HTML control)
• set it to be semi-transparent
• create an your dialog box (container, label, Text Input, image, HTML Control)
• "bring that to front" on your dialog box image
• drop your controls on top of that
• group all of the above
• set the visible property to be a local variable that you'll populate if/when you need to display the dialog box (e.g. l_Popup).

What allows this all to work is understanding the concept of "Layers" in PowerApps.  It is similar of course to other applications you may be familiar with, but in essence, you're going to make a top-level layer appear when you want to display your dialog.  This will block interaction w/ other controls below this layer via mouse/click (tabs are another story).

Grey everything out

You can honestly do this with an Image, HTML, or a Label control, etc.  

Label Method

Drop in a Label control and delete the default "Text".  Change the Fill value to something like:

• RGBA(0,0,0,.5);  //half transparent black

The simple thing here is that it quickly lets you get it done w/ minimal fuss.

Image Method

If you're more of a graphic artist, then you might prefer this approach.

Create a new image (it doesn't have to be the size of your app) that is simply all grey in your (not-so-)favorite paint program (e.g. MS Paint will work).  You can really just size your image, pick a grey, paint the whole thing and then save it.  Nothing fancy.  You can of course, get fancy and do pretty much any image.

In PowerApps,

• add a new image (click Insert | Media | Image)
• import the image you created above. (click View | Media | Browse | Open )
• drag it out to to cover the full size of your application screen.

With your image still selected, in the right-hand details area find the Transparency setting (or just type "tra" in the search field) and put in something that suits you (e.g. 40%).

This will give you the effect you're essentially after.  You can still see everything on the page, but this new image will be "on top" of them and you cannot click on any control.

If you run your app now, you won't be able to click on any control you created earlier (which is how you'd expect a modal dialog to work).

Your Are a Web Developer and Want To Get Creative

Using the HTML method, you can get "fancy" and add a blur effect or lots of other things that may or may not work on all platforms.  Please don't do anything too crazy and break the value of a platform that means you don't have to troubleshoot why things work on Android but not an iFauxn.  Drop an HTML control into your app and size it to the full height/width of your screen.  Add the following to the HtmlText property of that control:

"<div style='width:" & Self.Width & "px;height: " & Self.Height-1& "px;margin-top:0px;background:rgba(0,0,0,0.4);backdrop-filter:blur(5px);'></div>"

This will blur items behind the control.  Probably.  I don't know as I don't follow all the stupid HTML features that designers seem to be adamant about trying to implement which just break things.

I sure hope this works on all browsers/devices

Add your dialog box

Others explain this elsewhere, but I think it is worth mentioning that building some simple dialog boxes can be annoying or freeing depending upon your point of view.  For me, it is just one more annoying UI thing that users are going to complain about.  Which just makes me want to drop them at a command line interface and walk away.  

Container Method:

Probably the easiest now that we have containers at our fingertips:

• Add a simple container (not vertical/horizontal).
• Increase the Drop Shadow if you'd like (Semi-Bold)
• Change the Fill to whatever color you'd like (Color.Orange)
• Change the Radius value(s) to optionally round the corners (50)
• Drop whatever other controls you want to be in the Popup (HTMLText, Button)

Simplest method in 2024

Other Methods

I used to include an approach to do a more creative popup w/ drop-shadows via PowerPoint.  I've dumped it as the above is now solved.  You can easily round the corners and add shadows w/ containers, so no need for that hack workaround.

However, you can still easily add in a Label (but you can't round the corners) and a similar fill property, or a Text Input (that you can round corners on / but then have to change the DisplayMode to View vs. Edit).  Same principles apply to the above, but Containers are now likely the simplest method so you should just adopt that going forward.

Add text and controls

Once you have this, then just do as you normally would and drag your dialog text, icons, buttons, etc. onto the Dialog Box image above so that everything is laid out as you'd like it.

There are some default icons from PowerApps that work well here and are already set up for handling clicks and events.  In the example image below I added 3 text fields, altered their font size, made them bold and added two icons.

I know you're going to click Yes any minute now

Now you have what "appears" to be a modal dialog.  If you run your application now, you'll notice that any control that isn't "in the dialog" (e.g. the icons next to Yes/No) cannot be interacted with via the mouse.

Again, this is because the new items we just created are in higher layers than your previously-created controls.

Group everything

The easiest way to now treat this like a single "control" is to group everything we created above.  You can CTRL-Click in the left-hand pane (which is probably the easiest way to do this) each of the controls we added so that all are selected and then group them (e.g. Home | Group).

You can even be a stickler (as I am) and name the entire group something meaningful.

Make it disappear

The Visible property is the way to make things appear/disappear in your app, but you cannot control it directly.  Almost in all situations, you have to set these values to be a "variable" and then change the value of the variable.  It's a bit convoluted, but you get used to it.

In this case, click on your group'd controls in the left-hand pane, then go to the right-hand pane and click Advanced | More Options (if necessary) | Visible.  Change this field from "true" to be a variable name (e.g. l_Popup).

Notice that all of your carefully crafted items just disappeared.  This is because your variable holds no value which is "false" by default meaning you just told your controls to disappear.

Make it reappear

To display your Dialog at any time, all you need to do is set a control on the main page's OnSelect event to set the value of your variable like this:

• UpdateContext({l_Popup:true})

Make the green text the same as your own variable name.

Note:  If you're just getting started w/ variables in PowerApps, then note that this is a "local variable" that is only referenced on this page.  Global variables are set completely differently.  However, locals keep their value if/when you navigate on/off page sooo...sorta global?

In my case, I created a button on my form:

Click here for obligatory earworm

Running your app and clicking this button makes the dialog re-appear.

Final Steps

One of the last steps is to add a variable update to the icons on your form.  Your form might do other things here such as navigation, etc.  Just include them after you set the variable:

• UpdateContext({l_Popup:false});Navigate(Screen2,ScreenTransition.Fade)

Additionally, there is a final "nice to have" step here per Tab settings for other controls.  If you really wanted to block both the Dialog and non-Dialog controls from functioning depending on if the Dialog is displayed or not.  For example, even though these controls are "covering" the other ones, you could still Tab/Alt-Tab to the controls behind these.

If that bothers you (it should), you should edit their Tab property on all controls to be something similar to:

• If(l_Popup,-1,1)

or

• If(!l_Popup,-1,1)

The blue text above represents what you'd normally want the Tab order to be for your control.  The first line would be for controls not in the Dialog.  The second line for be for controls inside the dialog box.

I also tend to try and ensure I'm setting control variables like this up and initializing them properly.  That means changing the Screen's OnVisible event to include a similar bit of code:

• UpdateContext({l_Popup:false})

Final Thoughts

PowerApps does a decent job at many things.  This is one of those annoyances that many people will get very frustrated with (myself included).  However, you can start to see the method to the madness once you've done the above steps.

The concept of Layers is important and is something that you'll eventually want to really start to grok well.  Just know that they are created "on top" by default.  If you create new controls later then they'll be above your dialog box created above and will need to be moved down.

Making controls (in)visible is a big part of what you'll spend your time doing via business logic (e.g. If they answered Yes to this question, then show a followup question).

While this is a little kludgy for a beginner to understand, the concepts here apply across m365 products.