Back Button Problem in Multi Step Forms

Back Button Problem in Multi Step Forms

  

Hi,


I'm new to the outsystem community. 

I would like to build multi Step Forms with back and continue button between web Screens.
If I use the Back button on the second screen (second step) and jump back to the first web screen, the input I made on this page has disappeared. I use the navigation method within the button widget to navigate back into the first web screen. When I use the back button of the browser I come back to the input i made. I need exactly one such function.

 






Hi Tobias,


You can save the data to the server or session (don't save to the session if you have a lot of data or complex), and pass an ID when moving from one page to the other to be able to fetch the data.

You can create a button with the behaviour of the browser previous button (relying on the browser):

Best regards,

João Nobre



Hi João,


thank you for your quick great support. I tried it right away

It works almost perfectly. I have a save button on the second page, where I write data to the database. If I press this save-button and then press the back button, I first stay on the same page. Only if I press the back button again I return to the previous page. If I do not press the save button, I immediately come to the previous page.

Do I have to install a counter and pass to the history.back() function dynamically?
How could I do that or is there a smoother solution?


Hi again Tobias,


You are welcome. 

About the behaviour that your are describing is the same that you have by pressing the save button and the previous button of the browser.

Yes you can control by the counter, but you have to have in mind that using the back button can lead to problems, ex. if someone bookmark the page and access it directly.

Why you don't use a different approach, like the Wizard control from Silk Ui https://silkui.outsystems.com/Patterns_Web.aspx#Web_Featured_Wizard ?

Best regards,

João Nobre




Just to add, the Save button, if used with a submit, is reloading the page. When you press back, it go to it again because of it.

If you use ajax submit in the save, a back afterwards will immediately to the previous screen.

But as Joao pointed, using the back in these situations have lots of inconvenient.

Cheers

Eduardo Jauch

Hi Eduardo , hi João 

thank you very much for your important hints.

I already use the wizard widget for a web application (see the picture).



What is easier with the Wizard ?, I have not found detailed documentation, except the Silk Page. I also did not understand the sentence "Usually supported by explicit button navigation to move forward and backward". Where are the Buttons?

Tobias,

With the wizard you don't have to move from page to page (you stay in the same page when moving from one wizard step to the other).

I found an example/demo of how to use the Wizard, on another OutSystems forum thread (https://www.outsystems.com/forums/discussion/14787/working-wizard-example/). Look for the SumWizard.oml on Sami post. And note that it needs to be upgraded and references updated).

Best regards,

João Nobre


Thanks João and Eduardo. 

It is working fine now and thanks for the Explanation und
important hints.

Eduardo Jauch wrote:

Just to add, the Save button, if used with a submit, is reloading the page. When you press back, it go to it again because of it.

If you use ajax submit in the save, a back afterwards will immediately to the previous screen.

But as Joao pointed, using the back in these situations have lots of inconvenient.

Cheers

Eduardo Jauch

Agree but what if that is the case. What would be the best solution?

Consider ScreenA->ScreenB then do some process that must use submit button like file upload widget.

Then we need to press cancel button (prev screen or geturlreferrer) to go to ScreenA. Definitely it won't work. How should we handle this?

Hello Eric

One way to cope with this situation would be to start working with a single page, with sections visible or not based on the actual step. You probably would want to use web blocks for each section, in order to separate things and make the page lighter, and would pass information from the web blocks to the page to keep it there between steps, for example.

This would solve the problem of going forward and backward in the wizzard.

Another way would be to save things temporarily in database. Maybe attached to the session ID? And thus you could create logic to use this when going back and forward.

Using the back from the browser will always cause problems...

I remember a component in Forge that will prevent this from happen, like, it will restart everything, instead of just use the cached data (may be of use in this situation).

Cheers.

Thanks for the tips n tricks @EduardoJauch

Which component on Forge you meant?