This contribution sets up a scenario for alerting users if they have unsaved data in a listing. It uses a js variable attached to the window object called window.showExitWarning. It adds an event listener to each input field in the listing once the listing is put into edit mode. When the data changes in one of the fields, showExitWarning is set to true. Note that the listing has scripts in both the On Init javascript field and in the On DataSource Load/Refresh Javascript field.
Once data is changed in any of the fields, if the user begins to leave the viewport, they are prompted with the form. The Discard button resets the showExitWarning variable to false. The continue Editing button leaves it as true.
The inline edit actions for both the Root button and the Item buttons has a js action attached to it to reset showExitWarning to false when the data is saved.
The scripts also include an event listener added to the Cancel button that is added when the listing is put into edit mode. If Cancel is clicked, showExitWarning is set to false.
I am open to comments and additions. I am sure this solution is not complete, but it offers some basic safeguard against a user abandoning unsaved data.
To set this up on your site, make sure to include the following:
- scripts from both On Init Javascript and On DataSource Load/Refresh Javascript on the listing Settings tab > Advanced UI Settings
- Javascript Action in the On Complete of the Datasource Inline Edit action on the Edit User Data button.
- Form for popping up the notification to the user.
- Make sure you update the JS in the On Init Javascript to target the correct form on your site.
Feel free to test this out with both canceling and saving edited data. There is no valid SQL to update the user data, so you will not overwrite any user's data.