Have you ever wanted to add a confirmation pop to an app? This can be helpful when users are at a critical point path; maybe they want to delete a record or confirm an email before it’s sent to the entire company. A common technique is to add a popup confirmation screen to confirm a harmful action. I’ll show you how to do that here:
- I’m back to my Salesforce application that I’ve been building over the past couple episodes. In this app we can search for an account and get a list of users in that account as well as a map showing its location.
- I want to add a delete box so before anyone deletes a contact/user, I want to confirm that they want to take this action.
- To begin, I go into the user gallery and pick an item, a separator for example. Then I choose the trash can icon from the menu at the top. I want to make sure when I’m in the gallery that I see that trash can three times in my instance to ensure I’m in the repeater and not outside the gallery so that icon appears on each contact.
- Next, I need to create my pop up that’s going to happen from that icon. There’s not a direct screen to do that, so it’s a bit of a work around. What we need to do is create a shape on top of our screen and put our question there, such as ‘are you sure you want to delete this?... yes/no’. And we need to set it up to hide or show this shape based on certain actions we create.
- Under the Icon pull down you’ll find the shapes at the bottom; I choose a rectangle and I drag that out to occupy the entire space of the app screen. I then go to Properties in that shape and choose a light fill color.
- An important thing to note in Properties under Advanced, is under RGBA you’ll see some numbers and the 1 at the end represents how transparent that shape is. That 1 means 100% which means you can’t see through it, so if I set it to .5, we can see through it 50%. I set mine for .8 for a bit more transparency so you can still see what’s going on inside the application.
- I’ll then add a label to that shape and add ‘Are you sure you want to delete?’ in the code bar followed by the code to point to the contacts in the gallery. (Check out the video included to see any exact code that I add in this demo.) Be sure to adjust that label to where you want it to appear and make the text bright colored and bold to stand out to users that they’ll need to answer this.
- Next, add to buttons for ‘yes’ and ‘cancel’, then add an on select event of removal to the ‘yes’ button to delete the contact record. For ‘cancel’ I create a contextual variable (not a global variable) which means it’s only available on this screen and I use Update Context in my code to do this.
- For both my buttons I need to add a variable to hide that screen once the user has answered.
- The next step is to group together all these items in my pop up. To do this, hold down the control key and select all the items (buttons and labels), then I go to Home and click on Group to specify I want to group these together and I give that group a name (Group Pop Up). So, everything in that group I want to hide or show based on certain variables. And I’ll set the visibility to be equal to whatever the variable is set to. Watch the video for more detail of exactly how to set this up. So whenever a user clicks on that trash can icon in the contacts gallery that I set up in the first steps of this demo, the confirmation pop up will appear.
- We could also add a spinner when a user clicks ‘yes’ and the app is going through the delete process. If you missed my episode on how to add a spinner, click here.
Adding a confirmation pop up is a pretty simple process and can help users of the app to stop and confirm an action that could be harmful, whether it’s a deletion or sending an email.
If you’d like to learn more Power Apps, we offer on-demand, virtual and live trainings from courses to boot camps to help you learn what you need. Want us to develop an app for you? With our Shared Development offering we’ll work with you to prioritize the apps you need and build the apps for you. All at a fraction of what it would cost for a full-time developer. Click below to learn more.