Warn users about loosing entered data when navigating to a different screen in PowerApps

24-Jul-2022 24-Jul-2022 473 words 3 minutes

/powerplatform/PP-warn-users-if-data-entered.png

Contents

One way to improve user experience, and increase adoption to a certain level, is to add “little” things that would help users. In this blog post, we’re going to create a popup that will warn users when they want to navigate to another screen, BUT they’ve already entered data. Let’s offer them the choice to “Leave” or “Stay”.

Scenario

I have an app for rewarding employees once they’re nominated by their colleagues. Below is the Nomination screen:

What we want to achieve is, for each field in the screen, if the user entered so data and decides to click on “Back”, then display a warning (popup) to ask them to confirm what they want to do.

To create a popup, we’re going to use the following elements:

Rectangle icon for the background color
Button for the popup (so we can change the radius value)
HTML Text for a bit of customization (box shadow)
Label to ask the question
Buttons to ask if they wish to “Leave” or “Stay”

Tip: Naming labels & Grouping

Use the “Group” functionality after creating all your elements, so you can easily find them all. When naming my labels, I like to add the “Popup” at the end of each, so if you need to ever ungroup them, you can quickly recreate the group with all of them. For example “btnLeavePopup”.

And this is what it would look like:

Show or Hide the Warning

When a user clicks on the Back button/arrow at the bottom, we want to show the popup ONLY if data has been entered in any of the fields on the “Nominate” screen.

Step 1 - Click on your group name (this will select all the grouped elements). On the Visible property, enter showLeaveOrStayPopup. Feel free to choose another name for the context variable, but I thought this one made sense 😉

Step 2 - Select your button “Leave”, and go to the OnSelect property. In the screenshot below, I choose to navigate back using the Back() function, and reset all my fields using the Reset() function. Most importantly, this is where you need to change the context variable: UpdateContext({showLeaveOrStayPopup: false}) as we want to close the popup!

Step 3 - Select your button “Stay”, and go to the OnSelect property. Here the only thing we want to do is close the popup to stay on the same screen. Therefore, just enter UpdateContext({showLeaveOrStayPopup: false}).

Step 4 - Select your back button (here I’ve grouped the arrow icon with the word “back”), and go to the OnSelect property. The logic for the condition is “If any of the fields are not blank, then show the warning, otherwise navigate to a specific screen”. So this time we enter UpdateContext({showLeaveOrStayPopup: true}). I’m also resetting the fields when leaving the Nomination screen.