Power Apps Confirmation Pop up screen using Container controls

Introduction

In this article, we will see how to add a confirmation pop-up screen for changing the status of an item in gallery control using container controls. This can be done using rectangle control also, but you must group all the controls for the pop-up screen and set properties individually for the controls used in the confirmation screen. Using container controls, you don't need to group controls and set individual properties.

Add parent-child container controls

Add a new container control to your screen where you have your gallery control.

Add one label control inside the inner container control and rename it to lblMessageTitle set its Text property to the confirmation message "Are you sure?". Rename this to ConOuter. Similarly, add another container control inside the ConOuter. Rename it to the container.

Add 2 button controls, one for Yes and the other for No. So, we have the following 5 controls in this confirmation pop-up screen.

 

In Gallery control, this confirmation pop message is visible when the user clicks on the Close button.

The pop-up confirmation message box looks like this.

On the Close button, click inside the gallery control; the following code is required to show this pop-up message.

btnClose.OnSelect = Set(varShowPopup, true);

Here we are defining a Boolean global variable to show a popup message. A pop-up message will show when it is true.

Set outer container visibility to this variable.

ConOuter.Visible = varShowPopup

If we do not use a container, we have to set the visibility of all 5 controls used for this pop-up, but here, we need to apply visibility for the outer container.

Set outer container width and height as of parent as shown below.

To make the outer container transparent and show the parent screen behind the pop-up message box, use the alpha value of 60% or 0.6 in the Fill property of container control.

For the inner container, you can set X, Y, Height, and Width properties as per your screen size so that it is center aligned.

Set the following properties for the No button:

btnNo.OnSelect = Set(varShowPopup,false);

This will hide the pop-up message when the No button is clicked.

Set the following properties for the Yes button.

btnYes.OnSelect
Set(varShowPopup,false);

Patch(
    'My Request List',
    LookUp(
        'My Request List',
        ID = galBrowseDetails.Selected.ID
    ),
    {Status: {Value: "Closed"}}
);
Refresh('My Request List');
);

Here we are changing the status to Closed for the item selected in a parent gallery control. To get the ID of the item, we used galBrowseDetails.Selected.ID. Based on the selected ID, records will be updated in the data source.

Advantages of Container control over grouping

Many people use groups to achieve similar functionality, but there are multiple advantages of using container controls:

Groups leave the controls inside a group using positioning relative to the screen. Inside container positioning is relative to the container rather than the screen.

After creating a container, you can also create nested containers. The same relative positioning options are still available within nested containers.

Summary

In this article, I discussed how to use Power Apps Container control to create a pop-up confirmation message box. Once this message box is visible, you can see the parent screen behind it but can’t edit anything on the parent screen. Yes, a button click will update the status of the selected row in gallery control and close the pop message box, whereas No button click will close the pop message box without any change.