Can you provide an OML or OAP with the example you are talking about so that I can check it faster?

Hello Pedro,

In the demo, when we make changes and then we click on browser's back button and click on cancel exiting the page without saving changes, it refreshes the screen also.

We want to keep all the content in the page and not refresh it every time we click on cancel going to previous page (browser's back button).

Hi @Carla Varela ,

I have fixed it using some javascript changes. now click on cancel won't clear the field values instead replaced from snapshot.

After the screen re-initializes, checks the restore flag and reapplies the snapshot to inputs (and dispatches input/change events so OutSystems picks them up). 

Please find the OML attached for your reference.

Thanks for your reply @Aravind I, but the problem remains.

The main problem isn't the fact that it refreshes the content, but the fact that it refreshes all the page after clicking on Cancel button in the pop up of unsaved changes.

Hmm..

The platform is very likely re-initializing the screen (OutSystems remounts the screen) and JS prevention alone can’t stop that it seems.

Browser back button → handled via popstate, so the page doesn’t refresh when user cancels.

For the browser back button, use JavaScript to intercept popstate (the event triggered when pressing back):

window.addEventListener("popstate", function (event) {

    if ($public.FeedbackMessage && $public.FeedbackMessage.HasChanges) {

        if (!confirm("You have unsaved changes. Do you really want to leave?")) {

            history.pushState(null, null, location.href); // cancel back

        }

    }

});

This cancels the back button if user chooses Cancel

So you can use the above JavaScript to stop unload the page on clicking on Back btn

Or

Steps

Add the CheckHasChanges Forge component to your screen (to detect unsaved form changes).

Create a JavaScript node (or use a RunJavaScript action in screen OnReady).

Paste this code:

window.addEventListener("popstate", function (event) {

    // Check if OutSystems has detected changes

    if ($public.FeedbackMessage && $public.FeedbackMessage.HasChanges) {

        var leave = confirm("You have unsaved changes. Do you really want to go back?");

        if (!leave) {

            // Cancel back navigation

            history.pushState(null, null, location.href);

        }

    }

});

history.pushState(null, null, lo

cation.href);

https://amitj.outsystemscloud.com/Backbtn/Screen1?_ts=638925202104920458

Hello @Carla Varela, how are you today?

As one of the creators of the forge component you are trying to use let me first thank you for using it :)

Can you test the following page to see if this is the desired behaviour?

https://personal-aka1miuc.outsystemscloud.com/Example/CheckHasChanges

Thanks

@Carla Varela new version published :)
If you are happy with the component mark this message as the solution :)
Thanks for using our component