In canvas app we usually come across the need of different types of dialog boxes. Confirmation dialog box is one among those. Mostly confirmation dialog boxes are provided in the app where critical actions like delete, approve, reject etc. are performed. In our case we are trying to delete the gallery item with a confirmation dialog box by clicking the ‘Bin’ icon. So, in order to perform the delete confirmation action, follow the steps given below.

Step 1: From Insert menu, add the ‘Bin’ icon from the default icons dropdown list.

Fig 1

Step 2: In the OnSelect property of the icon, set a string variable and add UpdateContext.

UpdateContext({visible2: True});

visible2 is the variable, True is the string

Fig 2

Now when the ‘bin’ icon is clicked, a string value ‘True’ will be loaded into the variable visible2.

Step 3: Design the ‘Delete confirmation’ dialog box

Add a button and enlarge it to the required size and add the text as ‘Are you sure to delete?’

Insert two more buttons into it and set the text as ‘Yes’ and ‘No’.

Fig 3

Step 4: Group the buttons

Grouping is done in order to make the dialog box as a single entity.

To group the buttons, select the three buttons and click on the group button in the home tab. Once it is grouped, rename the group with a meaningful name.

Fig 4

Step 5: Add OnSelect logic to ‘Yes’ button

Select the ‘Yes’ button and in the OnSelect property, give the expression to remove the gallery selected item also update the value of visible2 variable to ‘False’.



Now when the ‘Yes’ button is clicked, the selected gallery item will get deleted and also the data will be erased from the data source. Also, the value of visible2 will now change to false.

Fig 5

Step 6: Set the OnSelect logic to “no’ button

Select the ‘No’ button and in the OnSelect property give the expression to update the value of visible2 to ‘False’.

Fig 6

Step 7: Set Visible property of the confirmation dialog box

Select the group of buttons and in the Visible property add the variable visible2.

The value of visible will be ‘True’ when clicked on the ‘Bin’ icon and ‘False’ when clicked either on ‘Yes’ button or on the ‘No’ button.

If the value in visible2 is ‘True’, the dialog box will be visible and if the value in visible2 is ‘False’ then the dialog box will not be visible.

Fig 7

Now when clicked on the ‘Bin’ icon the confirmation dialog box will pop-up. If ‘Yes’ is selected then the selected gallery will get deleted and the dialog box disappears. Also, the record will be deleted from the data source. On clicking the ‘No’ button, the dialog box disappears.

Fig 8 When clicking the ‘Bin’ icon
Fig 9 After clicking the ‘Yes’ button, record is deleted

Hope this helps! If you are interested to get a free download of Timesheet App, please reach out to us