Prompt to save data before navigating away

Prompt to save data before navigating away

  

Hello,

I'm learning to use Service Studio 10.0 on my free time before doing real project. I am working on  "Screen Lifecycle Interaction Exercise". I notice in the exercise there is no instruction to detect the data on the form (i.e. MovieDetail or PersonDetail) has been changed so we can warn users to save data before they navigate away from the page.

How would I add that option to my project?

Thanks

Hi Tim,

You'll have to add some javascript to the screen in order to do that.

Add a script to the screen javascript property that will listen for the onbeforeunload event. On that event you will be able to react to navigations before leaving the page and prompt the user and cancel the navigation.

 Check more about the event here: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Thanks João. 

Could you tell me how to create a local variable, that is accessible to JavaScript, on the page to keep track of the form data change? 

I tried to create a local variable by right-click MainFlow/MovieDetail --> Add Local Variable. But this variable doesn't appear to be a client variable as I could not access it from JavaScript.

Thanks again

I recommend that you don't use variables (to avoid request to the server).

There are several ways to accomplish this. One approach can be:

1) For each input you have place the original value of the input in a "data-" attribute (use input extended properties for that effect)

2) Attach an handler to the window onbeforeunload event

3) On that handler iterate over all inputs on the page get their values and compare against the value from its data- attribute

4) If there's a difference show a confirm dialog to the user

I use a simple version of the ideas discussed here: https://stackoverflow.com/questions/155739/detecting-unsaved-changes

It works well most of the time, but I think this kind of thing should be baked into the code that OutSystems generates and because of the problem I'm currently having, I wonder if there isn't a better way to tie into the OS event handling system.

I've got a screen action happening when I check a box. It does some simple validation and then shows a success or error message. For some reason after that happens, one of my buttons looses the click event that was attached to it, so modifiedForm isn't toggled to false and I get the message when it is not expected.

var modifiedForm = 0; 
$(document).ready(function(){

    $(':input').change(function(){
        modifiedForm = 1;
    });
    
    window.onbeforeunload = confirmExit;
    
    function confirmExit(){
        if (modifiedForm == 1){
            return 'Unsaved changes! Please make sure you save your work before leaving this page.';
        }
    }
    
    $('.Button').click(function(){
        modifiedForm = 0;
    });
});