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