Power Apps Modal Dialog For Canvas Apps Using Containers

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-modal-dialog-for-canvas-apps-using-containers/. Author: Matthew Devaney.

Power Apps Modal Dialog For Canvas Apps Using Containers Posted by - Matthew Devaney on - June 4, 2023 28 Comments

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 App Setup The SharePoint List

Create A New Gallery Showing Inspection Items

Show The Modal Dialog When The Gallery Item Is Selected Design A Modal Dialog Using Containers

Display Menu Options Within The Modal Dialog

“>Indicate The Inspection Result With An Icon Test 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: Title PassOrFail 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

Create A New Gallery Showing Inspection Items

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' Code language: JavaScript ( javascript )

Increase the TemplatePadding of the gallery and change the TemplateSize to these values. TemplatePadding : 20 TemplateSize : 100 Code language: HTTP ( http )

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 Code language: HTTP ( http )

Show The Modal Dialog When The Gallery Item Is Selected

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 Code language: CSS ( css )

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 ) Code language: JavaScript ( javascript )

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 Code language: HTTP ( http )

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 Code language: CSS ( css )

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 Code language: CSS ( css )

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) Code language: JavaScript ( javascript )

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 Code language: CSS ( css )

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); Code language: JavaScript ( javascript )

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 ) Code language: PHP ( php )

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 ) ) Code language: PHP ( php )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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 M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps