Power Apps — Pop-ups, how and when

Everyone who browsed the early web knows how effective, and annoying, pop-ups can be. It’s important to know how and when to use them, and today we’ll explore that with Power Apps.

In the event you’re here just to learn how to make a decent-looking pop-up, we’ll start with that; don’t forget there’s more than one way to make a pop-up, so please explore and see what works for you.

Also don’t forget about Power App’s Notify function, which might save you time.

Making the pop-up

Pop-ups are a great way to make it so that your user cannot interact with any other object on the canvas besides your pop-up. This saves you from having to mess with object-level permissions for every object on the canvas, and guarantees they’re forced to at least acknowledge the pop-up exists.

I’ll start with a canvas that has a bunch of objects on it just to illustrate our idea; the purple button in the bottom right will be what triggers the pop-up.

1. On the button/icon that you want to trigger the pop-up, add this to its OnSelect property:

UpdateContext({locPopup: true})

Creating a local (context) variable to trigger the pop-up

This formula creates a context variable that’s scoped to the specific screen, called locPopup. You can call it whatever you want, it’s your variable. When this button is selected, it’ll set the value of the variable to true. We’ll use this to trigger the rest of the pop-up.

2. Insert a rectangle over your canvas

Inserting the rectangle

3. Stretch it to cover the whole canvas, and set its Fill property to:

RBGA(0, 0, 0, .5)

Fading the rectangle’s fill

Notice how you can still see the objects on the canvas behind it, but you can’t select them (good!); you can play with the .5 to increase or decrease the opacity of the fade, as needed.

4. Insert a label (or what ever other object you need to be a part of your pop-up; for simplicity’s sake, I’ll just do this) then give it whatever verbiage and other properties you need. Also add an icon/button that’ll act as our “close the pop-up” button:

Creating the actual pop-up

Also, you can select an object on the canvas and have Power Apps auto-align it for you! Stop trying to guess where the middle of the canvas is. Select the object, and use the Align drop down on the Home tab:

5. Select the icon/button that will close the pop-up, and set its OnSelect property to:

UpdateContext({locPopup:false})

Updating the local (context) variable to trigger the pop-up’s closure

6. Select all of the objects created in steps 2–5, and set their Visible property to:

locPopup

Another tip, hold down the Ctrl key while left-clicking each object to select multiple objects at once; you can even update all of their properties at the same time this way (assuming they all have that property, which in this case, they do). Be careful when doing this, though, especially with more complex apps.

Updating the Visible property to the name of the context variable

Notice that when you set their Visible property to locPopup, they disappear! Perfect!

7. Click your icon/button to trigger the pop-up, then click the other icon/button to close it

You made your first Power Apps pop-up! Very nice!

We have the how, now when?

Part of the reason, I suspect, we remember pop-ups so not-fondly is because of how inopportune they felt. Consider why you want to show a pop-up:

• Data validation (e.g. wrong format, not an allowed value, etc.)
• A warning to the user
• Selling them something they don’t need
• Endless list here…

Think: Do you really need to show a pop-up for these reasons? I would argue, most of the time, no.

If the data provided is wrong, for whatever reason, don’t wait for the user to finish filling the whole thing out just to tell them it’s wrong. That’s inconsiderate, creates frustration, and wastes time. Instead, put the data validation on the field the user is inputting the data into. Consider:

• Using the BorderColor property of the object to be red
• Adding a label near the object that displays when the data doesn’t meet the criteria, which gives insight into what’s incorrect
• Adding a warning icon that’s visible when the data doesn’t meet the criteria
• Using the form’s OnSuccess property in combination with a Notify formula to indicate success or failure
• Using a quick validation statement in the Patch formula to validate at the formula-level
• Etc…

I find one of the most legitimate reasons for a pop-up to be used is when a user is attempting to delete something. “Are you sure you want to delete this? This action cannot be undone.” That’s a great way to make a user think about what they clicked. And I’ll argue, you should always have a confirmation dialogue on every delete action. There’s no reason not to.