Creating A Dialogue box, PopUp, Alert box, and Confirmation box in PowerApps

Introduction

In this article, I will represent the popup dialog box in the Power app and lots of people facing the issue and how to achieve this scenario. I have tried to provide the scenario with solutions in the below steps.

Scenario

Creating a popup message or alert box is a common requirement we run into while building Canvas apps. In this post, we'll look at how to make a popup confirmation message for gallery items using CRUD operation. For now, let's take the example of a confirmation box.

Objective

I've employed a common gallery with a button and changed the text to Delete, so the button looks as shown in the gallery below. A confirmation dialogue box should appear after the user clicks the delete button to request confirmation. The user should click "Delete" to initiate action related to "Delete" and "Icon Cancel (x)" to hide the popup and prevent action on that item.

Here is my gallery with a delete button to perform the specific action.

Step 1. Set a variable named varDeletePopUp on click on the delete button

Set(varDeletePopUp, true); to be set on OnSelect event.

We'll use a collection of controls, including rectangles, icons, labels, and buttons, to make a popup in PowerApps.One variable will be used to change a visible property of this Group. As a result, we can display and hide the popup based on a variable value. We need to bring the controls forward to make it appear as desired. If we need to add another control after making the Group, then ungroup, add control, and Group again by selecting all the required controls.

Step 2. Add different controls to create a popup on the screen

As seen below, include a full-screen rectangle and adjust the Fill property opacity to 0.5. The rectangle will become transparent as a result.

RGBA(153, 207, 236, .5)

Add a second white rectangle, labels for popup Title and message, delete button, cancel icon and make a group of these controls as shown below. We need to bring the control forward to make it appear as desired ( this step is dependent on the sequence of the controls added). We should group/ungroup depending on our requirements while designing the app. In the end, all the controls for the popup should be grouped.

Group/UnGroup

Bring Forward/Backward

This Group's visible attribute should be set to "varDeletePopUp". The initialization of this variable was done in Step 1. When we set the property for the Group, it automatically assigns the variable to all controls inside the Group.

Set the variable to false; a popup will not be visible when the Delete button is clicked. On other controls within Group for the OnSelect property, the value will be set to false (false is the default set by PowerApps). It is important to set the OnSelect button.

Set(varDeletePopUp,false)

Do the same for the cancel icon to disappear from the popup.

In a similar manner, create the formula you want to run when the delete button is clicked. In the end, set the varDeletePopup variable to false to hide the popup.