Power Apps are a fun and easy way to create forms quickly, but sometimes you need to add extra code for functionality that will improve the user experience. This demonstration shows how to add a pop-up screen based off of the user canceling edits to a form and if they have unsaved data. This same concept could be used for deleting items as well, by asking the user if they are sure they want to delete an item.
Pre-requisites
- Have an edit form on your app connected to a data source
Start
For this pop up we are adding it to the cancel button and “Unsaved” form item changes.
1. Add a cancel button to your form. Go to + Insert > Button.
2. For the OnSelect value on your “Cancel” button, you will create an If statement that will check if the form name you are working has Unsaved, and if its true it will create a variable and set it to true, else it will run the function ViewForm(FormName)
UpdateContext creates a variable that can be true or false. The variable is named “PopUp.” This Boolean variable will be how the toggling works.
Now you need to insert a container and set the fill to be: RGBA(169,169,169,.2). This creates an overlay screen, which I am sure you have seen on many websites. Within that container you will add the items to create a modal / pop up window appearance. Below are the pop up items in the container with a naming to ensure I can easily work with the items.
The OnSelect is where the magic will happen. If the user selects Go Back button, it will return them to the form and toggle off the variable by updating the context on select, UpdateContext({PopUp:false}). If they select Discard it will us the ViewForm(FormName) function and set the UpdateContext to false. The containers visibility is driven by your variable PopUp. So when it is false the Visibility will be false. Here is a peek at the OnSelect code on the Discard button:
Comments