Overview
In this tutorial, you will learn how to create a confirmation dialog/popup when the user presses a specific icon. This is an ideal solution to give the user a second chance to back out of the change if the button or icon was pressed by accident
YouTube
Add Components
There are 5 main components to show a confirmation dialog:
- Semi-transparent screen overlay that restricts users from navigating off the dialog
- Confirmation dialog backdrop
- Label that will contain the confirmation message
- Button to proceed with action
- Button to back out of action
Screen Overlay
Add a rectangle to the screen and make sure it’s the same width and height of the screen. Update the Fill, HoverFill and PressedFill properties to a semi-transparent color. In this example RGBA(128, 128, 128, .2) is used. It will let the user know visually that the components behind the confirmation dialog are inactive and will not be able to select and buttons or icons.
Confirmation Dialog Backdrop
Add a rectangle that’s centered on the screen. Height and width is up to your discretion. It’s recommended that you use a White fill for the Properties Fill, HoverFill and PressedFill. Border Color should be adjusted to a darker color with a width of 2.
Confirmation Text
Add confirmation text on the dialog. If you’re referencing data in a gallery, you can include it with the text property by using the Concatenate function.
Proceed Button
Add a button to the screen that will be used to proceed with the action performed. It’s recommended that you use colors that draw the users attention to this button since it’s considered the primary action.
Cancel Button
Add a button to the screen that will be used to back out of the dialog and not proceed with the action. It’s recommended that you use lighter colors since it’s considered a secondary action.
Group Components
Group all of the components together, so it will be easy to hide/display the popup.
Visibility Properties
Go to the button or icon where you want to pop out the confirmation dialog. Go to the OnSelect property and set a new variable called displayConfirmation to true.
UpdateContext({displayConfirmation: true});If you already have logic in this property that should not be triggered, cut it out and it will be inserted into the proceed button in the section below.
Go to the Visible property of the confirmation dialog group and input the displayConfirmation variable
Confirmation Dialog Buttons
Go to the Proceed button of the confirmation dialog and input your logic to perform the intended action. After the action is performed, update the displayConfirmation variable to false.
Go to the Cancel button of the confirmation dialog and update the displayConfirmation variable to false. It will hide the dialog and perform no other action.
Test it out!
At this point your dialog should be operational.
