How can I avoid that the user leaves the screen?
Question
Application Type
Reactive

Hi there.

Inside my app, there's a 3-steps process that requires the user to advance through 3 different screens in order for it to be completed properly.

But if the user tries to leave the screen while in the middle of one of these steps/screens? How can I warn them whenever they try to leave one of this screens that all their entered data will be lost?

Any feedback is appreciated :)

Hello @Yizuhi Galaviz,

Disclaimer: I have myself never tried it, but have researched it in the past and seems like there's hardly any 'clean' solution around given browser specific challenges and adjustments to be dealt with. 

That said, by researching the forums apparently using javascript's 'onbeforeunload' event is the popular recommendation. A few links on the subject:

https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes.

https://www.outsystems.com/forums/discussion/44882/web-confirmation-message-pop-up-when-leaving-page-with-exceptions/ 

https://www.outsystems.com/forums/discussion/58273/reactive-web-app-warn-before-leaving 

Hope this helps,

AJ

Hi,

You can use form's valid property for condition, if user has fill all the data and click on cancel then use this condition in cancel action

If(form.valid)

True- Info message- leaving this screen may lost the enterd data

False- end

Or else you can use confirmation message well to confirm user that he / she wants to leave the page or not.


Kind regards,

mvp_badge
MVP

I think the issue here is a user has other means to leave a screen like closing the browser tab or the complete.browser.

Hi Yizuhi,

aside from any technical solution to detect and mitigate the user closing the browser mid-session, you could think about the design of both your user interface and your datamodel/data persistence, in an attempt to avoid a user accidentily losing data.

On the user interface : if for some reason you feel like you have to let him enter multiple pieces of info in separate steps before saving any of that to permanent storage, make sure this is absolutely clear to the user, if the user expects he/she can leave after step 2 without losing any info entered, your UI failed at that.  See for example widgets like a wizard, make sure user sees how many steps there are, make sure he can't mistake a button on step one as a save button if it isn't,...

On the design of the application : if there is so much data to enter that it can't be done in one step, but at the same time it logically belongs together as one thing and should be either complete or non-existent, you could consider still saving what you already have after each step, and add information in your datamodel about completeness (i.e. something like a status field on the main entity or a separate staging entity that only gets copied after the last step).  This way, if a user accidentally stops half way, he could come back and find what was already entered and continue, and in the final step (where you now save all data entered for the first time), update the thing to reflect its completeness.  

All this is of course complicating your application design a lot, and I think is only necessary if we are talking about large number of fields/steps and/or demanding users.  I would imagine for most cases, making sure the user understands from the UI that he's not done yet should go a long way.


Dorine

Thank you, this was extremely useful. 

Hi @Yizuhi Galaviz 

I faced this issue and the solution was using the onBeforeunload event.

add a new script with the code that is in the screenshot


Set as required script


Publish and test it.


You can test it here

https://galmeida.outsystemscloud.com/BeforeClosingPrevent/Main?_ts=637532398460872764

If you open and close without change the input will close otherwise if you write something it will alert you before closing.

You can check the code also in the oml file.


Regards

Gonçalo Almeida

BeforeClosingPrevent.oml

Thanks, this was very useful as well.

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