We are brainstorming ways to prompt user of our app to save their changes before navigating away from a page. The closest idea we have would be to set a flag on text changed event and then do… something with that? Has anyone solved this issue? Is it even possible to do in Appsmith?
Hi! You can set a flag on the onTextChanged event of your input fields using storeValue()
and use some button widgets for navigation. In the onClick event of the buttons, you could check the value of the flag and open a modal to prompt the user to save the data.
However, the changes will be lost if the user clicks the refresh button of the browser or closes the tab/window of the browser.
That goes with what we were thinking but we were hoping to pop-up a message on tab close, refresh or even clicking on another page within the app.
@workinonit530 Unfortunately, prompting users on page refresh and/or tab close might not be possible as we don’t yet support access to the window object. [Feature]: Access to the window object for js in apps · Issue #9978 · appsmithorg/appsmith · GitHub. Please do upvote and comment on this issue if you think it would satisfy your requirement.
As of today, the solution provided by @Amelia would work best
@workinonit530 there could be another way for you to do this, the above can also be done with the help of a internal property isDirty
available in most of the input components, but used internally a lot in the form widgets. As soon as a input is touched and changed, this internal property changes to true, you can use this as well to detect this in a button click and prompt the user.
The challenge is on navigation from outside or page refresh, this is still not under devs control.
FYI, we plan to add this soon in our autocomplete as well
would iframe.onunload be fired when the parent page navigates away or is closed? if so, you could have an iframe just for that… to detect unloading and saying something… but not sure if it can prevent the parent from closing or navigating…