Issue
I am trying to find a way to prompt users of our app to save their changes before navigating away from a page. We thought of setting a flag on text changed event, but we are unsure how to proceed from there. We want to be able to pop-up a message on tab close, refresh, or even when clicking on another page within the app, but it seems we don't yet support access to the window object. We are looking for a solution that works best within Appsmith's capabilities.
Resolution
The best solution for prompting users to save their changes before navigating away from a page in Appsmith is to set a flag on the onTextChanged event of input fields using storeValue(). You can then use a button widget for navigation and check the value of the flag in the onClick event. If the flag is set, you can open a modal to prompt the user to save the data.
However, it is not possible to prompt users on page refresh or tab close as access to the window object is not yet supported in Appsmith. You can also use the internal property isDirty available in most input components to detect changes and prompt the user on button click, but navigation from outside or page refresh is still out of the developer's control.
Someone suggested using an iframe to detect unloading and prompt the user, but it is unclear if it can prevent the parent from closing or navigating. Here is an example of how to set the flag in the onTextChanged event:
input1.onTextChanged = () => {
storeValue("changesMade", true);
}
And here is an example of how to check the flag in the onClick event of a button:
button1.onClick = () => {
const changesMade = getValue("changesMade");
if (changesMade) {
openModal("Save Changes");
} else {
navigate("Next Page");
}
}