Create a confirmation pop-up in Power Apps

A confirmation pop-up or dialog box enhances the user experience by adding a layer of safety and making the app more intuitive.

It helps prevent users from accidentally  pefrom any operations such as updating, or deleting records due to unintended clicks or mistakes also it confirms that the user genuinely intends to update or delete the record, which can help avoid unnecessary data loss.

Creating a confirmation pop-up before deleting the selected records 

As you can see, here we have a canvas app. It has a gallery that displays Employees data.

To create a confirmation pop-up in Power Apps you need a combination of controls such as Rectangle, Labels, Buttons, and Variables.

Let’s go step by step, first we will create a variable.

Creating a Variable

First, we need to create a variable to control the visibility of the pop-up. To do this, we’ll create a global variable called varShowPopup and set it to true.

When this variable is true, the pop-up will be displayed. We will create this variable to the OnSelect property of the delete button as shown below.

Set(
    varShowPopup,
    true
);

Add controls – Rectangle, Labels and Buttons

Now, we will add a combination of controls such as rectangle box to cover the entire screen, lables to show the confirmation message text, pop-up header text and button control to show Delete and Cancel buttons.

Let’s add these controls step by step

First, we will add a Rectangle to cover the entire screen. This will prevent the user from interacting with the rest of the screen when the pop-up appears.

Go to the Insert menu, add a Rectangle, and set its height and width to match the screen dimensions, so it covers the entire screen.

Now, adjust the opacity to 0.1 to make the rectangle partially transparent. For, this go to the Fill property of Rectanle and set the opacity to 0.1.

Next, we will add another Rectangle and set its color to white.

This Rectangle will used for the pop-up box, and we will position it in the center of the screen.

Now, add one more Rectange to create a header for pop-up box.

Next, we will add two labels: one for the pop-up heading and set its text to ‘Delete’, and another for the confirmation message with the text ‘Are you sure you want to delete the record?’.

After that, we will add two buttons: one for ‘Delete’ and another for ‘Cancel’.

Now, select all these controls and make a group of them. For this, select all the controls then right click and select the Group and you can name it grp_popup.

Next, set the Visible property of the group grp_popup to ‘varShowPopup’, the variable we created earlier.

Next, set the variable to false so that the pop-up will be hidden when the ‘Cancel’ button is clicked.

Set(
    varShowPopup,
    false
);

Finally, in the OnSelect property of the ‘Delete’ button, write a formula to delete the selected record from the data source, and then set the variable to false to hide the pop-up.

Remove(
    'Employee Info',
    gal_emp.Selected
);
Set(
    varShowPopup,
    false
);

Let’s run the app and attempt to delete a record from the gallery.

You’ll notice that when you click the delete button for ID 105, a pop-up appears.

When you click the ‘Delete’ button on the pop-up, the record with ID 105 will be deleted from the data source.

Similarly, when you click the ‘Cancel’ button, the selected record will not be deleted.

Recommended for you..

Submit multiple records to a data source

Send an email from Power Apps

Reset multiple control values in Power Apps