Power Apps Modal Dialog For Canvas Apps Using Containers

Power Apps Modal Dialog For Canvas Apps Using Containers

A modal dialog is a menu that appears on top of the screen and requires the user to interact with it before moving to the next task. Modals work best in situations where you want to intentionally interrupt the user’s workflow such as a confirmation modal. They can also be used to create lightweight forms that do not require the user open another screen to interact with. In this article I will show you how to build a modal dialog for Power Apps canvas apps.

Table of Contents
• Introduction: The Inspection AppSetup The SharePoint ListCreate A New Gallery Showing Inspection ItemsShow The Modal Dialog When The Gallery Item Is SelectedDesign A Modal Dialog Using ContainersDisplay Menu Options Within The Modal DialogIndicate The Inspection Result With An IconTest The Modal Dialog In Power Apps




Introduction: The Inspection App

Inspectors at a restaurant company use the Inspections app to record the results of restaurant inspections. The inspector opens each item in the list, selects either Pass, Fail or N/A and then sees an icon appear beside the item.




Setup The SharePoint List

Create a new SharePoint list called Inspection Items with the following columns:

  • Title
  • PassOrFail (Choices: Pass, Fail, N/A)



Populate the SharePoint list with these inspection items:

TitlePassOrFail
Kitchen and Dining Room areas are clean
Dishwasher and sink are in working condition
Food Items are labelled with expiration dates and allergen info
Refrigeration units are operating at the correct temperatures
Staff members have food safety certification
Building does not have any pest related problems

Open Power Apps Studio and create a new app from blank. Insert a label at the top of the app with the title Inspection Items along with a shopping bag icon. Place a rectangle shape beneath them with a dark red fill.



Position a new gallery below the title bar and stretch it to fill the remaining space.



Set the Items property of the gallery to Inspection Items. Make sure to add the SharePoint list to the Data tab of the app beforehand.

'Inspection Items'



Increase the TemplatePadding of the gallery and change the TemplateSize to these values.

TemplatePadding: 20
TemplateSize: 100



Insert a container into the gallery. Stretch the container to fill the gallery row.



Change the style of the container to include a drop shadow and a slight border radius.

BorderRadius: 5
DropShadow: DropShadow.Semilight

Continue by adding a new label to the gallery to display the inspection item



Use this code in the Text property of the label.

ThisItem.Title



We want the modal dialog to appear when the gallery item is selected. Add a new button and position over top of the entire gallery row.



Write this code in the OnSelect property of the button. The selected item is stored inside a variable and then another variable triggers the modal dialog to appear on the screen. Once we build the modal we will use gblShowModal in its Visible property.

Set(gblSelectedItem, ThisItem);
Set(gblShowModal, true)



Make the button completely transparent by updating its properties to these values:

AutoDisableOnSelect: false
BorderStyle: BorderStyle.None
Color: Color.Transparent
DisabledColor: Color.Transparent
DisabledFill: Color.Transparent
Fill: Color.Transparent
HoverColor: Color.Transparent
HoverFill: Color.Transparent
PressedColor: Color.Transparent
PressedFill: Color.Transparent



After its properties are update the transparent button not be visible to the user but it will still be pressable.




Design A Modal Dialog Using Containers

We will create our modal dialog using Power Apps containers. The first step is to make a screen protector that will block the user from doing any other actions. Insert a new container and stretch it to fill the entire screen.



Change the Fill property of the container to indicate the screen cannot be interacted with.

RGBA(0, 0, 0, 50%)



Then place second container inside the first one to create the modal dialog background.



Update the Fill property of the modal dialog to the color white.

Color.White




Display Menu Options Within The Modal Dialog

Now we will populate the modal dialog with some contents. Start by adding a new label at the top of the modal container.



Set the Text property of the label to this code to show the selected question.

gblSelectedItem.Title



Then add radio buttons below the title with the values Pass, Fail and N/A.



Use this code in the Items property of the radio buttons to populate it with options.

Choices('Inspection Items'.PassOrFail)



Write this code in the Default property of the radio buttons to show the selected value if a user returns to a question that has already been answered.

gblSelectedItem.PassOrFail.Value



Create a new button at the bottom of the modal dialog with the text OK.



Use this code in the OnSelect property of the modal dialog to update the Inspection Items SharePoint and then close the modal and reset its controls.

Patch(
    'Inspection Items',
    gblSelectedItem,
    {PassOrFail: rdo_ModalPassFail.Selected}
);
Set(gblShowModal, false);
Set(gblSelectedItem, Blank())
Reset(rdo_ModalPassFail);



Now that the modal dialog is fully programmed we will control when it becomes visible. The modal should appear once a user pressed a gallery item and disappear when the OK item is clicked.



Go to the Visible property of the blocking modal dialog and update it to use the gblShowModal variable.

gblShowModal




Indicate The Inspection Result With An Icon

Users need a way to see what the inspection item result was without having to open it again. We will communicate the result by showing a checkmark icon for pass, an X icon for fail, a neutral icon for N/A and a question mark icon where no response was given.

Add a new icon control to the right side of the menu. Place it underneath the transparent button.



Use this code in the Icon property of the icon to conditionally show the property icon based on the inspection item results.

Switch(
    ThisItem.PassOrFail.Value,
    "Pass",
    Icon.CheckBadge,
    "Fail",
    Icon.CancelBadge,
    "N/A",
    Icon.Blocked,
    Icon.Help
)



And write this code in the Color property to give each result a different color.

Switch(
    ThisItem.PassOrFail.Value,
    "Pass",
    RGBA(54, 176, 75, 1),
    "Fail",
    RGBA(184, 0, 0, 1),
    "N/A",
    RGBA(0, 134, 208, 1),
    RGBA(116, 116, 116, 1)
)



The finished icon control will look like this once the inspection results are recorded.




Test The Modal Dialog In Power Apps

We’re done. Try out the app to make sure the modal dialog works. It should behave as shown below.





Questions?

If you have any questions or feedback about Simple Power Apps Modal Dialog Using Containers please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest

24 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Joel Garrison
10 months ago

Wow, this blog post is exactly what I needed! I’m literally building out an app that needs exactly what you’re talking about. HAHA… Working on it as I type this out. Sunday in America. 😉 Thanks for sharing your insights and tips, they are super helpful and inspiring. I learned a lot from your post and I’m eager to apply it to my own project. I can’t wait to see what you come up with next! Thank you!

Brad Allison
Brad Allison
10 months ago
Reply to  Joel Garrison

LOL! “Sunday in America”. I work the same. As I am now fully remote and will stay that way the rest of my professional career thanks to COVID, the concept of 7 to 4 or 8 to 5 is gone.

Alexsolex
Alexsolex
10 months ago

Hi Matthew.
When you say “to make a screen protector that will block the user from doing any other actions.” It is not totally right as the user still can use keyboard to interact with any controls that have a tabindex property to 0.
You can use the ‘glbShowModal’ value to change the background controls tabindex value to -1 to prevent user to focus on them using keyboard.
You can do the opposite with the tabindex property of the controls in the modal dialog.

Monica
10 months ago

This is great, thank you!! Could you please explain how to add a text input field to the same modal form and include it in the patch? Any help appreciated as I’m stuck and googling is scrambling my brain.

Monica
10 months ago

Thank you! Life saver!

Dave
Dave
10 months ago

I think I prefer a vertical container (easier to organize the controls) for the modal popup and a separate rectangle shape for the background.

Preben
Preben
10 months ago

This newfound site is a blast! Thanks for not only this quality tip, but all the others I’ve read as well.

Julie
Julie
10 months ago

To take it a step further, how would you collect the data each time a user answers the questions? This is perfect for a project I’ve been working on where users need to give themselves a rating and then an independent reviewer goes in an gives their own rating/comments. Would I have to have another sharepoint list to have the answers submit back to? Thanks so much; your site is awesome!

Brian
Brian
10 months ago

Very Cool. I am struggling with an inspection app at work. We have maybe 15 different pieces of equipment, each with different inspection criteria. So far I have one landing page where the user can pick their inspection form from a dropdown and they are navigated to that form (Each inspection form has its own screen). The part I am stuck on is how can I (or a manager) view all the inspections that are spilt across 15 lists in one place? No one want to have to look at 15 lists to see what is getting inspected. Google and ChatGPT have failed me…. Any insight appreciated

Brian Carabine
Brian Carabine
10 months ago

Ok, I appreciate the reply! I’m pretty new and this might be a bit beyond my current level of understanding. I can’t really visualize how this works. Where would the specific inspection results go from a particular inspection. How would I pull up inspections from the past to show auditors? I was pretty sure I was on the wrong track so thank you for confirming! I’ll have to dig in and keep trying using your suggestion! Thanks you! Your blog is awesome and a huge help to a non computer science/programmer!

Filip
Filip
10 months ago

Hi, I have a problem with step:

gblSelectedItem.Title

since this step, showing of Titles is not working and then nothing with “gbl” code.

What I am doing wrong?

Thank you in advance.

Filip
Filip
9 months ago

Hi, I am a begginer in power apps, please. Which step is this “set variable”… or maybe I do not understand correctly.

Mário Lemos Cabral
Mário Lemos Cabral
9 months ago

With this solution we could build an update of tables, for example “suppliers”, “product types”, when we are updating a list or creating a new record. In the container we could create, for example, a new supplier, update the name of an existing supplier or delete a supplier if there were no associated records yet. 

Ada
Ada
9 months ago

Hi Matthew,

Thank you for your post. Is it possible to make the modal dialog responsive to the screen size? If yes, how would you go about it?

David Taylor
David Taylor
2 months ago

Awesome article – thanks.