Introduction
Power Apps natively do not have an option to show Pop-Ups. Many times, we would need to use a pop-up to display information/warning to the end-users, accept input from the users, get confirmations from the user via button clicks, etc.
In this article, we will see how to simulate a PopUp that will be used to get the confirmation from the user through a button
Scenario
We have a Power App Screen that shows the Monthly Invoice details as a Gallery which is picked from a SharePoint List. We will have the option to delete the records and we have to ensure that on the click of the delete icon, the user is asked for a confirmation whether to go ahead and delete the records.
We will try to implement this User Confirmation as a Pop Up with Yes/No buttons in the Pop-up and based on the user selecting Yes, we will delete the item.
Implementation
We will get started with creating a Power App by the name Canvas App Pop Up
We will then add a header and add a Gallery to hold the information which we will fetch from SharePoint.
Set the Data Source
So as to pick the data from SharePoint, we will add a Data Source from the Properties tab. We will select the Monthly Invoices List as the data source for the Invoice Gallery
Note: In case you are adding the Data source for the first time, you can search for the SharePoint Data Source, specify the Site and select the List from which you want to pull the data, which will create the Data source object for you
Update the Gallery
As we used the “Image, Subtitle,Title” template for the gallery, we will remove the image control as it’s not used and add a few labels to house the remaining fields retrieved from SharePoint so that it will eventually look like this:
We will then add a Delete Icon, on whose click we will bring up the Confirmation Pop Up.
Add the Pop-Up Controls
To simulate a pop-up screen, we will add the below controls:
- Rectangle: Acts as a hover background with transparent colour that keeps the background gallery out of focus. To keep the gallery Out of Focus, we can simulate a disabled feel by adding a rectangle and setting its colour to transparent custom colour
- Button: Disabled button as a Container for the Yes/No Buttons. To make the pop up with rounded corners, rectangle do not have a property that can be leveraged to make rounded corners. So, we will add a button and set it to disabled and set its Border radius which will give a Rounded Corner Pop Up. We Yeswill also remove the text from this button so that it looks more like rounded container.
- Yes, No Buttons: For accepting User Confirmation when a Delete is pressed
Grouping the Pop-Up Controls
So as to hide the Set of Pop-Up controls together, we will group them so that the visibility toggle can be applied to the group to implement the Show/Hide of Pop Up
Controlling the Pop-Up Visibility
To control the visibility of the Pop up we will set a few expressions on the controls that will toggle the visibility. In the Delete Icon’s OnSelect, we will set the Visibility toggle variable “ShowPopUp” to true.
| UpdateContext({ShowPopUp:true}); |
For the OnSelect of the No Button, we will update the toggle variable to False with the expression
| UpdateContext({ShowPopUp:false}) |
Finally, we will add the Variable value of ShowPopUp to the Visible property of the Group so that the entire controls with Show/Hide based on the toggle variable’s value
Finally, we will add the Record deletion logic to the OnSelect of the Yes Button as the user has confirmed deletion with the below expression:
| Remove(‘Monthly Invoices’,Gallery_InvoiceDetails.Selected); UpdateContext({ShowPopUp:false}); |
Test the Pop Up
We will test the Implementation by playing the app and clicking on delete will open the pop-up and based on the Yes button confirmation the record will be deleted and on No, the Pop up will be closed without deletion
Summary
Thus, we saw how to create a nice-looking pop-up that can be used to accept confirmations from the user before performing data-sensitive operations. We can also use the pop-up to accept inputs from users which can be used for subsequent data operations.
