I have a request that to show a pop-up to confirm leaving without saving changes. I have been digging the internet and the OutSystems forum for the answer but all leads to the OnBeforeUnload handling.
The point is the reactive web app is working as a SPA, so when navigating through the app, it doesn't really "unload" the page, just routing to the target screen, destroy and re-render the page. So is there any solution to catch the routing and continue to load after confirm? I've tried the OnDestroy but technically it runs after the OnInitialize of the target screen and doesn't have any action to stop navigating.
Also, when user really unload the page by clicking a link to external site or refresh/enter URL on the browser, is there any way to catch the navigation other than the confirm dialog by the browser?
Thanks in advance.
Hi @deve2 ,
I've attached an oml file.
There is a custom js file Script1 that contain two function to handle link click and window unload,
the HM screen is the form screen.
The Script1 is added as required Scripts for HM Screen.
Logic:
-HM OnRender:
--Add a custom event listener to every "a" tag ( in this example i've implemented only a tag but you can extend to cover additional tags like buttons,etc). The listener ask to the user if he wants, if the reject the confirm the js bubble process is stopped and the user remain on the same page. The trigger is binded only to anchor tag with the href origin equal to current browser origin.
--Add a custom event listern to window before unload, this work for external link and when a user try to reload the site.
-HM OnDestroy
-Remove all custom eventlistern from anchor tag and window.
An external script file is necessary beacuse to correctly remove the event listener the function location must be well known in js jit runtime.
Point not covered:
-When a user click: User click the back/forward button on browser or mouse wheel.
-The application title block click.
Let me know if this suits your needs.
BR,AL
Hi AL,
Your example is really amazing. Thank you for helping out.
I will continue to figure out the final solution that suit my need.
Hi Deve,
I hope you're doing well.
Regarding your issue, I created a block "ConfirmationMessage" that you can use to display the message on a popup to the user, where he chooses if he wants to leave and save the changes or if he wants to leave and discard the changes.
You can use that block across your application.
Please see the OML attached.
I think this does what you want.
Kind regards,
FC
Thank you Fábio, I will try it and give you the feedback ASAP
Hi Fábio,
Thank you for your suggestion. As I have seen in your module, the popup is only showed when the user clicks the "Back" button. But the thing I'm facing here is more complicated.
I want it to trigger whenever the user is navigating out of the current page, including back to previous page, link to another page in the app or to an external site or anything else. So I think it is really tricky here.