By Veronique LengelleOne 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 data loss 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 (pop-up) to ask them to confirm what they want to do.
Create a popup
To create a popup, we’re going to use the following elements:
- Rectangle icon for the background color
- Button for the pop-up (so we can change the
radiusvalue) - HTML Text for a bit of customization (box shadow)
- Label to ask the question
- Buttons to ask if they wish to “Leave” or “Stay”
👉 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 pop-up **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.
Thanks in reading! 🙂