Exploring the PowerApps Dialog Box

For the second day of my Christmas series, we are going to build a simple dialog box. When designing an interface you occasionally want to explain the consequences of proceeding to the user and ask for confirmation using a dialog box. For example, this will delete all records relating to this user, do you want to continue?. You want the user to have the chance to press Cancel. Power Apps does come with a default message box or input dialog to perform this. So in this post, I will walk through designing a dialog box.

Pre-Requisites

I have started using the enhanced groups in Power Apps, which makes layout and interaction easier that was covered in my first post for Christmas.

Building the Dialog Box

The dialog box is made using two nested groups a label and two buttons. The complete group is only visible when the variable vvShowDialog is true.

1. From the Insert ribbon, select Controls and select Group. If it isn’t there, go look at my enhanced groups post on turning on the feature.
   Change the properties of the group to the following

   Name	Dialog
   X	0
   Y	0
   Width	Parent.Width
   Height	Parent.Height
   Fill	RGBA(100,100,100,0.5)

   This group is the background to make the dialog the only thing that can be selected, this is known as modal.

2. With the group Dialog selected insert another group. This will be the dialog box that will contain the message and the buttons. We will line the dialog box up to be in the centre of the screen.
   Change the properties of the group to the following

   Name	DialogBox
   X	(Parent.Width-DialogBox.Width)/2
   Y	(Parent.Height-DialogBox.Height)/2
   Width	500 or whatever works for your app
   Height	300 or whatever works for your app
   Fill	White

3. With DialogBox group selected add a label and 2 buttons, rename and lay them out in the DialogBox group. Make one button the OK button and the Cancel button.
4. Change the OnSelect property of the Cancel button to change the vvShowDIalog variable to false using

   Set(vvShowDialog,false)

5. Select the Dialog group and change the visible property to the following

   vvShowDialog

   The group will now not be visible.

Mechanics of using the Dialog Box

The dialog needs to show when an action is triggered. The easiest trigger to understand is a button being clicked so we will use that as our example in this post.

1. Change the OnSelect of the button to the following

   // Dialog Message
   Set(
       vvDialogMsg,
       "This will create a new project." & Char(10) & Char(10) & "Do you want to continue?"
   );
   // Show Dialog
   Set(
       vvShowDialog,
       true
   )

   This will save the message text and show the dialog box.

2. Change label in the DialogBox group to show the message by changing the Text to vvDialogMsg.
3. Change the OK button’s OnSelect property to do the update required and the final line to change hide the dialog. Here is an example of some possible code.

   // Add Project
   Collect(
       ccProjects,
       {ProjectName: PrjNameTxt.Text}
   );
   // Reset input field
   Reset(PrjNameTxt);
   // Hide dialog box
   Set(vvShowDialog,false)

   You should now have a functioning dialog box.

   

Conclusion

This example just displays a message. This idea could be expanded to show a dialog with input fields to get values from a user. The dialog group needs to be at the front.