Hi everyone,
We are trying to implement the following functionality.
While clicking on back button in the browser, a PopUp should appear which should have Confirm and Cancel button. Once clicking cancel, we should stay in the same screen. Once clicking on Confirm, we should navigate to the previous screen.
Please help me how to implement this in OutSystems.
Regards,
Chandra Mouli
Hi Yerra Chandra Mouli, May be this help you to achieve your scenario. #jshttps://www.outsystems.com/forums/discussion/72352/confirmation-message-in-javascript-on-the-back-button-from-the-device/ hope this solves your issue.
Hi @Yerra Chandra Mouli ,
I'm not sure how flexible you are about these two buttons shown on the pop up, but if you are good showing Ok and Cancel instead, you can simply use the confirmation button property from your back button.
If you need to a customized version, then you have to create a pop up yourself with customized buttons and call it when clicking on the Back button.
Kind regards,
Tami
Hi Yerra,
In a reactive app, you can detect the browser's back button by registering the window's `popstate` event handler within the screen's OnReady event action flow using JS element.
Solution Source: https://www.outsystems.com/forums/discussion/92263/how-to-detect-browser-back-button-in-reactive-app/#Post395208
To learn more about window popstate event: https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event
JS snippet:
window.addEventListener("popstate", function (event) { // Check if the user has navigated back confirm('Are you sure you want to go back to the previous page?'); });
Note: Make sure to remove the registered event when the screen is destroyed if it's no longer needed.
I hope this helps!
Benjith Sam