Dialog Box In PowerApps

In this article, we are going to learn about creating dialog boxes in PowerApps. We can have various types of Dialog Box like Notification Dialog, Confirmation Dialog, and so on.

Let's start with a simple dialog box

Step 1 - Create a screen and add a button

Step 2 - Add a Rectangle from Icons to the screen

Step 3 - Add other header label and informative label and close icon above the rectangle

Step 4 - Group all dialog control into one, Select all controls that you want to group and click on three dots > Select Group

Step 5 - Select button and on OnSelect property set varVisible property to true

Step 6 - Select Group and set its Visible property to varVisible

Step 7 - Select the icon and set OnSelect property to set varVisible as false

Step 8 - Now if we run the app it will look like below

We can change the height, width, and look and feel of dialog as want. This is just the simple basic dialog which includes simple show hide.

Now let's see Dynamic dialog which will contain dynamic title and message based on user input and work based on user confirmation.

Step 9 - Add Confirmation Dialog button on the screen

Step 10 - Add the label and button controls so that it will look like a dialog

Step 11 - Now set varConfirm variable to true on click of a button

Step 12 - Set Grpconfirm Visible property to varConfirm variable

Step 13 - Set OnSelect property of Icon to set varConfirm variable to false

Step 14 - Add Label to the screen

Step 15 - On Click of Yes button set Variable to say Yes clicked and same for No

Step 16 - Set Text property of Label to btnClicked

Step 17 - Run the application and Test

Step 18 - Replicate the simple dialog and add one more button. On click of that set Title and Content variable

Step 19 - Now set a variable in Labels available in the dialog

Step 20 - Set Visible of Group to the varConfirmTitle

Step 21 - Update variable name in close icon in Dialog

Step 22 - Now click on Confirm Dialog with Dynamic Title button. It will display as below

We can also create components for dialog to be used on the screen. Let's see how to do that

Step 23 - First create a component

Step 24 - Add controls required in a dialog

Step 25 - Create Custom Property, named Title

Step 26 - Create Custom property named Content

Step 27 - Add Text property for Label, as ComponentName.Content

Step 28 - Add Text property for Header Label as Component. Title

Step 29 - Create showDialog property to show/hide the dialog

Step 30 - Set varVisible variable to showDialog property

Step 31 - After adding Dialog to the screen, set Width and Height

Step 32 - Add button and onSelect property initialize showDialog variable

Step 33 - Now set the visible property to showDialog

Step 34 - Go to File > Setting > Upcoming Features

Step 35 - Now OnSelect of Icon to ComponentName.HideDialog

Step 36 - Now go to screen > select HideDialog property and Reset(ComponentName)

Step 37 - Set Title property of DialogComponent

Step 38 - Set Content property of Dialog Component

Now Run the App and Test

In this way, we can create a dialog in multiple ways which can include simple dialog and confirmation dialog.

We have also learned about creating Dialog using Component which includes the experimental features.

Hope this helps...Happy low coding...!!!