Creating a dialog in PowerApps

Imagine you’ve designed an app that lists all of the store branches that exist for a company, you’ve created the app to help stay organized with all of the various branches. One of those branches recently moved their store location and you need to update the app to the new address. You begin to edit the entry and mistakenly press the DELETE button instead of the SAVE button and now the entire entry is gone and must be recreated because of a small mistake.

 

A great way to avoid a scenario like this is by adding a dialog to your app. Dialogs are temporary, modal overlays that provide contextual app information or prompt users to act or provide input. Adding a dialog to your app is a great way to communicate warnings as a way to prevent or correct critical errors, like in the scenario described above.

 

Some important tips to keep in mind about dialogs:

• Include only the information users need to make a decision
• Use sparingly because dialogs disrupt the user experience
• Consider the importance of the information you want to share: is it important enough to interrupt the user?
• Consider how frequently the information needs to be shown; if you’re showing a dialog or notification every few minutes, you might want to allocate space for this info in the primary UI instead
• If you expect the user to perform a particular action frequently, consider providing a way for the user to undo the action if it was a mistake, rather than forcing users to confirm the action every time
• Avoid complex decision making that requires additional sources of information unavailable in the dialog
• Don’t overuse dialogs as they can interrupt workflow, only use when the scenario fits
• Don’t use generic button labels like “OK”, make the button label very clear as to what action will happen when the button is clicked, like “Save, Delete, Cancel, Download, View, Print, etc.”
• Don’t overwhelm the user with too many buttons within a dialog, stick to no more than three buttons.

 

Below are design guidelines to follow that will help you design your own dialog, be it a tablet or phone app. You may have noticed that dialogs look different from device to device, an iPhone dialog is designed a bit differently from an Android dialog. However, keep in mind PowerApps works on all devices and your app may be consumed by a user with an iPhone as well as a user with an Android device. Because of this, you may choose to style your dialog based on what device is most commonly used within your team, or create your own custom dialog.

 

When designing a dialog (for any device) you will want to insert a background overlay to help focus the user’s attention on the contents of the dialog. Without a background overlay it can be difficult to focus on the message that is being displayed because the user can still see everything in the background.

To create an overlay, insert a rectangle (which is accessible from the Icons dropdown from the Insert tab) and set the Fill to RGBA(0, 0, 0, .6). We recommend using this particular RGBA number because if the background were too dark, then the user wouldn't be able to see much of the background and you still want the user to know the context of the dialog they are presented. If the overlay was too light, then it wouldn't be as affective because the user could be distracted by the background because its not obstructed enough to focus the user's attention.

 

 

Final design of a dialog for an Android device

 

To create an Android style dialog – load the image labeled Android_Dialog.png from the Android folder which can be found in the documents attached to this blog post. The image has a drop-shadow and rounded corners (pre-styled for easy access), adjust the size of the image to 552 wide x 250 high and center the image to the page vertically and horizontally. The size of your dialog will change based on how much content you need, this app is promting a single question so the dialog does not need to be large. Then, simply add in the message or question you are prompting to the user by inserting a label control with the following settings shown in the image below. Please note you are welcome to use the same label control properties you have already been using within your app to stay consistent on fonts and font sizes (its best to avoid using more than 4 font sizes in a single app).

 

Then, insert another label control to create the blue text buttons and set the properties of that control to (both text buttons should follow these properties):

 

To hide and show these elements that make up the dialog (the rectangle image, the text, the text buttons, and the background overlay) use a context variable which switches its state between true and false values. We will bind this context variable to the Visible property of all the elements which make up the dialog in a few easy steps shown below.

 

1. On the OnVisible event of the page BranchDetailsScreen (seen below), set the property to:

UpdateContext({showPopup:false})

This will ensure that any element with a Visible property of showPopup won't be displayed unless specified

 

2. Select the controls that make up the dialog and set the Visible property of all of them to showPopup

 

3. On the OnSelect event of the Delete button on the form, add the following:

UpdateContext({showPopup:true})

 

4. Test by clicking on the Delete button and the dialog will be displayed

 

5. Set the OnSelect event of the Delete button (the Delete button from within the dialog box not the Delete button of the form) to remove the record and close the dialog

RemoveIf(ContosoBranchesCollect.Id = ContosoBranchesGallery.Selected.Id);

UpdateContext({showPopup:false});Navigate(ListScreen,Fade)

 

6. To make the cancel button work – which will close the dialog and not delete anything, set the OnSelect event of the Cancel button within the dialog to

UpdateContext({showPopup:false})

 

 

 

Final design of a dialog for an iPhone

 

To create an iPhone style dialog – load the image labeled iPhone_Dialog.png from the iPhone folder which can be found in the documents attached to this blog post. The image is pre-styled with rounded corners. Then, simply add in the message or question you are prompting to the user by inserting a label control with the following settings:

 

Then, insert another label control to create the blue text buttons and set the properties of that control to (both text buttons should follow these properties):

 

To create the dividers, insert a rectangle and assign the following properties:

Follow the same steps (1-6 described from the Android dialog) – adding in the context varibles and adjusting the Visible properties to display the dialog.

 

 

Attached to this post you will find 4 apps with pre-styled dialogs for you to reference and use, an Android tablet dialog design, an iPad dialog design, an Android phone dialog design, and an iPhone dialog design. Its important to note that font sizes between Phone and Tablet will vary. Please open the tablet version of these apps for a reference.

For a video explination please watch the video provided