\u00a0<\/p>\n
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<\/em> 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.<\/p>\n \u00a0<\/p>\n When designing a dialog (for any device) you will want to insert a background overlay to help focus the user\u2019s 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.<\/p>\n 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.<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Final design of a dialog for an Android device<\/p>\n \u00a0<\/p>\n To create an Android style dialog – load the image labeled Android_Dialog.png from the Android <\/em>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).<\/p>\n \u00a0<\/p>\n Then, insert another label control to create the blue text buttons and set the properties of that control to\u00a0(both text buttons should follow these properties):<\/p>\n \u00a0<\/p>\n 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.<\/p>\n \u00a0<\/p>\n 1. On the OnVisible<\/strong> event of the page BranchDetailsScreen (seen below), set the property to:<\/p>\n UpdateContext({showPopup:false})<\/p>\n This will ensure that any element with a Visible property of showPopup won’t be displayed unless specified<\/p>\n \u00a0<\/p>\n 2. Select the controls that make up the dialog and set the Visible<\/strong> property of all of them to showPopup<\/p>\n \u00a0<\/p>\n 3. On the OnSelect<\/strong> event of the Delete button on the form, add the following:<\/p>\n UpdateContext({showPopup:true})<\/p>\n \u00a0<\/p>\n 4. Test by clicking on the Delete button and the dialog will be displayed<\/p>\n \u00a0<\/p>\n 5. Set the OnSelect<\/strong> 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<\/p>\n RemoveIf(ContosoBranchesCollect.Id = ContosoBranchesGallery.Selected.Id);<\/p>\n UpdateContext({showPopup:false});Navigate(ListScreen,Fade)<\/p>\n \u00a0<\/p>\n 6. To make the cancel button work – which will close the dialog and not delete anything, set the OnSelect<\/strong> event of the Cancel button within the dialog to<\/p>\n UpdateContext({showPopup:false})<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n \u00a0<\/p>\n Final design of a dialog for an iPhone<\/p>\n \u00a0<\/p>\n 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:<\/p>\n \u00a0<\/p>\n 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):<\/p>\n \u00a0<\/p>\n To create the dividers, insert a rectangle and assign the following properties:<\/p>\n![\"Screen](\"https:\/\/pwrappscdn.azureedge.net\/mediahandler\/blog\/media\/PowerApps\/blog\/369f17bc-6b2a-4cd9-8b1f-546f95fe0297.png\" "\\"Screen")
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/strong><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/p>\n<\/a><\/strong><\/p>\n<\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n