Shay Shmeltzer's Oracle Development Tools Tips

Displaying an "Unsaved Changes" Warning in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

End-users are strange. Sometime they need the system we are developing to remind them when they do silly things. For example some users want us to remind them if they are trying to navigate away from a page where they did changes to data, but didn't click "save". Below I'll show you an approach for implementing such a behavior in Oracle Visual Builder Cloud Service.

What we are going to do is cancel navigation actions until users acknowledge that they are ok to leave the page.

I will leave it up to you to decide when this should go into effect. While some people might claim that this should be the default behavior across the app, this is debatable. For example, if I go into a "create record" type of page, and then without doing any changes decide to leave that page - should I be prompted for a "you have unsaved changes" message? Isn't me leaving the page the equivalent of saying - I don't need to do changes? As you can see the decision is not clear cut - so in the demo below I let you control when we start this "changes were made" status simply by pressing a button. In real applications these can be done for example when a value in a field changes. At the end of the day, all you need to do is set a boolean variable that tracks whether we are now in "changes were made" status.

In the demo I added a simple dialog to the shell page (the page that acts as the containing template to the rest of the pages) - this dialog has a "you have unsaved changes, are you sure you want to leave?" type of warning and two buttons "Yes" and "No". (Quick tip/reminder - you can see how to add a dialog to a page here, and don't forget to include the popup import in the page's json file).

I add an action chain to the shell page that will be invoked on the vbBeforeExit event - in there I check the value of the "changes made" variable and if changes were made - I show the dialog. Then I use a return action to return an object type variable that has a boolean variable called "cancelled" set to true.  Returning such an object tells the flow to stop the navigation.

Now all I needed to add were action chains to the buttons for "yes" and "no" to close the dialog, and for the "yes" scenario to also set the changes made boolean variable to no - so the next time we click to navigate away we don't show the dialog.

Check out the video to see the runtime behavior and the various parts that make up the solution.

Join the discussion

Comments ( 1 )
  • Srinivas Tuesday, September 7, 2021
    For firing the exit event how to know whether the page has data changes done or not ?
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.