35
Views
2
Comments
[OutSystems UI] Using the back button with a step wizard
outsystems-ui
Reactive icon
Forge asset by OutSystems
Application Type
Reactive

Hello all, I can't seem to find any discussion on this topic which makes me wonder if I'm missing something fundamental here.  I have a step wizard that walks a user through a series of forms, each in a web block tied to the Step param - all standard stuff.  The step wizard uses a click handler to set the value of Step and update the URL to allow deep linking/page refresh, that's working fine.  The only problem is I cannot get the browser back button to navigate back to the most recent step.  I thought that pushing the URL to the window.history would be enough, but apparently that gets stepped on by OutSystems' internal handlers.  I tried to hook into the popstate but I have the same problem there - OutSystems is already listening to popstate and doing its own thing.  I tried to go through the Navigation API to handle the back state but I quickly got out of my depth - the closest I came was one working back click then history becomes a mess.  

Surely someone has done this already?  It's been a while since I've tried to get fancy on the front end so I'm wondering if I'm making it more complicated than it needs to be.

2023-09-05 11-58-17
AMAN JOSHI

Hi, OutSystems uses its own internal client-side navigation system (based on React) which manages browser history using the HTML5 History API (pushState, popstate). When you manually call window.history.pushState, OutSystems might override or ignore your changes during rerenders or page events. 


Try on Step Change (Back): Use this JavaScript or Server Action to change the URL and trigger OutSystems routing:

// Inside OnParametersChanged

If Step = "1" → Show Block 1

If Step = "2" → Show Block 2

javascriptCopyEditNavigateToURL($public.URL.CurrentURL().replace(/Step=\d+/, 'Step=2'), false);

2026-03-12 10-32-06
Wahaj Adil

Hi, @Douglas Aldridge ,
Seems like you're trying to mange browser history and the back button behaviour manually. 
You're using window.history.pushState() - which updates the URL correctly, but Outsystems doesn't treat that as a navigation event, so nothing gets stored in its internal history.
We can try and align your logic with how Outsystems expects navigation to happen; by using URL parameters combined with navigation through Outsystems built-in mechanisms and keeping steps as conditional blocks based on the step parameter.
You can try the following :

  • Use the RedirectToURL action instead of manually pushing to history.
  • Store each step in the URL like ...?Step=1, ...?Step=2, etc.
  • On screen load (OnParametersChanged), check the Step param and load the correct form/web block.
  • Let the browser naturally handle the back/forward behaviour via the parameter.


    Hope it resolves the issue.
    Thanks & Regards!


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.