Browser’s back button protection @OutSystems

< Back to Blog

Issue Explanation

You developed an OutSystems Web Application that needs to navigate to an external URL out of your control (e.g. OutSystems’ website), but afterwards the user decides to use the browser’s back button. What is the expected behavior? Will the browser re-render the page? Or should the preparation also be re-executed?

The behavior we observe is probably not what you’d expect: although the preparation of your web screen is not executed, the browser does re-render the page. In other words, the page is rendered with the information saved in the browser’s cache. Every time you make a request to the server using the Submit method the browser caches the response. This however does not happen if you use the Ajax Submit method. And what if proper display of your web screen requires the preparation to execute some business logic that affects what or how you show something to the user?

Proposed Solution

In order to run the preparation after coming back from an external URL (by clicking the back button on the browser) you need to force it to happen. This can be enforced for instance using HTML5 or JavaScript, but here we’re going to cover how to do it in OutSystems. I have found

several solutions for this issue using local or session variables but the only solution that is compatible with all browsers involves using a cookie to track when the user navigates away. Local variables are stored on the ViewState and some browsers when you navigate away they destroy the ViewState, this means when you come back from a different page, your local variables will be reset and you lose the information about if the user navigated away or not. Session variables are also a possible solution. To use them you have two possibilities: create a session variable for each page that you want to track, which is not reusable, or you can create a session variable what is a list, but this is not recommended. After analysing my options, I have decided to work with cookies as they can be stored until the session ends and created dynamically for each page.

How To Do It

● Create a button to navigate away, but be careful and select the submit method, because the cookie needs to be created, the destination must be a screen action, where you can create the cookie and navigate away using an External URL. To set the cookie you need to assign it a name, that can be whatever you want, for example you can use the GetBookmarkableURL function to make it unique for each page, and for the value use the same function.

● The OnRedirectNotify screen action is responsible to check the cookie , created when you navigated away, for the current screen and if the value matches with the current screen’s URL then it will reset the cookie to the default value, which is empty, force the preparation to run and render the page once again with all the conditions checked on the same preparation. Forcing it is as simple as ending the logic flow with the current screen as destination.

● The last but the most important step in this process is to drop an expression on canvas and set the escape content to no, then paste the JavaScript code below into it. JavaScript will be executed when the page is rendered by the browser and will fire the FakeNotifyWidget and consequently run the screen action that will force the browser to request the screen again from the server.

Turn Up Academy

Apply to our Turn Up Boot Camp

AND BECOME THE NEXT OUTSYSTEMS CERTIFIED DEVELOPER
(
OutSystems Business Manager at LINKIT
)

Latest Articles

How to download Excel files in OutSystems

How to download Excel files in OutSystems

Learn how to download Excel files using the OutSystems platform in this simple tutorial!

DevZone
Mastering Email Integration with OutSystems: A Step-by-Step Guide

Mastering Email Integration with OutSystems

In OutSystems Reactive Web Applications, we can configure the Service Center and implement logic in the Service Studio to send emails to our peers or contacts. Follow this step-by-step guide to learn how to!

DevZone
How to use WebAssembly inside OutSystems - Part 2

How to use WebAssembly inside OutSystems - Part 2

WebAssembly (WASM) is a new technology that is getting a lot of attention. We continue the use of Go compiled to WASM to show how we can use WASM inside OutSystems.

DevZone