How to handle the back button of the browser

End users sometimes press the back button of the browser when trying to get back to the previous page in the flow. This does not work, as the URL never changes when navigating between pages in your flow. The result is that the end user either gets an error, or returns to a completely different page. Therefore, it would be good to disable the back button of the browser. This article describes several possible solutions.

Option 1: Default behavior

XSLT

The exposed page is always index.html. This page can redirect all the traffic server side. Because each page is index.html, it is not possible to have a history. Going back to a previous version of index.html does a call that is being redirected to the current page.

MVC

The MVC does not submit a page as the XLTS does, and does not built up a browser history. Therefore, pressing the back button will navigate to the last page before arriving at the runtime. This could be the landing page of a portal.

Option 2: Creating an alert

The jQuery Address plugin, which is supported from version IE6 and higher, has the possibility to detect the clicking on the navigation buttons of the browser. With an alert windows these are then blocked. This alert window contains information for the end user that explains why the browser buttons can not be used.

Option 3: Clicking an invisible button

By using javascript, a hidden button on the page can be clicked. This button then is modeled in studio, but needs to be marked with a presentation style, to be recognizable as this hidden button that corresponds to the navigation.

Example:

$.address.externalChange(function() { $('#my-hidden-button').click(); })

Please be aware that you start flowing from this invisible button. This means that there is no automatic 'back' behavior. You theoretically move forward when pressing the back button. In linear flows this invisible back could simply connect to the previous page. In more complex flows, you may need to create a history of visited pages in order to navigate back to the correct previous page. On dashboards with AQ_Dashboard_FlowWidgets on them, we advice to place this button on the main page of the dashboard, so that you go to the previously visited dashboard.

The same mechanism could also be used to react to the forward button of the browser, in which case you want to validate the page before going forward.