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.

Overview

To get this done you're essentially going to :

• create a full-screen image that is "grey"
• set it to be semi-transparent (Transparency = 40%)
• create another image that will be your dialog box
• "bring that to front" on your dialog box image
• drop your controls on top of that image
• 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

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.

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).

NOTE:  You can also achieve the same effect using an internal PowerApps control (eg. a label) and changing the Fill value to "a grey" and the last RGBA value to something between 0-1 (eg. Fill = RGBA(211,211,211,.25))

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.  That being said, I find that just creating simple dialog's in PowerPoint helps me get a feel for the design.

Note: You can again use one of the internal icon shapes or controls from PowerApps as the background here as well.  I tend to use images to allow greater creativity.

This isn't because PowerPoint is great at this, just because it is a simple tool that gets you "close enough" to your goal and most people are familiar with it.  As well, since o365 and PowerApps are supposed to be about unifying the user experience, your users will find these controls familiar as well.

In the end, I just go back to PowerPoint for simplicity and because I don't really care.

With PowerPoint, on a blank slide, insert out a box (Insert | Shapes | Rectangle Rounded Corners).  Create a copy (CTRL-A, CTRL-C,CTRL-V).  Move the new copy slightly diagonally upward to the left of the original.  Click on the back one then change its color to grey.  Now it should look like it has a shadow (pretty!).

Easy enough to copy (CTRL-A, CTRL-C) these two boxes, then open a different graphics editor that lets you do transparencies (e.g. Paint 3D which is free w/ Windows 10).  Paste your PowerPoint design into a new image.  Make the background transparent (e.g. in Paint 3D use Canvas | Transparent canvas = on).   Save it as a 2D .PNG.

If you're a graphics artist and are cringing right now then...good.  Go do it the right way.  But PowerApps is about enabling Business Analysts at creating applications.  Most people don't have PhotoShop and aren't going to create actual shadows.

"Good enough" - Non-UI building software developer

NOTE:  From a UX perspective you of course should do some palette matching here and make your dialog boxes either very obvious color-wise or match your existing theme.  See, I care a little about these things.

Back in PowerApps, add a new image to your application and import the image you saved.  If you did it correctly, then you should not see any white background and you should only have your dialog boxes appearing w/ nice curved edges just like a professional might make.

Assuming you did the transparency correctly

NOTE: In the image above, I've named a few controls on the left-hand pane to be something a little more useful.  Additionally, you might notice that the names are NOT in alphabetical order.  The order that they are displayed in is the order by layer (top to bottom).  So if you want to know what control is above/below another than this is an easy way to visualize it.

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 o365 products and will even help you with designing content inside of PowerPoint or other applications.