Oracle APEX – Warn unsaved changes for custom fields

Oracle APEX 5 introduced a new feature called “Warn on Unsaved Changes” at page, item and button level. This is a great feature by enabling any unsaved changes to ask for user confirmation before leaving the page.

Purpose of this blog is, if we have custom form element such as APEX_ITEM on a classic report or IR, will that by-default use this feature? Answer is No. You have to write code for that.

I have seen there are several ways people have implemented this using custom code and logic. Now, here I have tried to use one of the APEX’s JavaScript library function to achieve this.

Following are the steps:

1. Set “Warn on Unsaved Changes = Yes” from page attribute section.

2. Declare a new variable under “Function and Global Variable Declaration” from page attribute section as below

var gSerializeValue;

3. Create new dynamic action named “Initialize Warn on Unsaved Changes” as on page load event.

4. Add true action “Execute JavaScript Code” with following code.

gSerializeValue = $(‘[name=”f01″],[name=”f02″]’).serialize();

var fnIsChanged = function(){
  var lSerializeValue = $(‘[name=”f01″],[name=”f02″]’).serialize();
  if(gSerializeValue === lSerializeValue){
    return false;
  }
  else{
    return true;
  }
}

apex.page.warnOnUnsavedChanges(”, fnIsChanged);

5. You are done, test it by changing the value and try to reload the browser or navigate to some different page without submitting page.

Working Demo

Hope this helps!

Regards,
Jaydip Bosamiya
jbosamiya@gmail.com