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

Comments

My photo
Jaydip Bosamiya
I am Oracle APEX Consultant, Blogger and Integrator. All-rounder in building small, medium and enterprise applications. Extensive knowledge in various area of web-driven applications in Back-end (PL/SQL, SQL, Java), Front-end (Oracle APEX, HTML, JavaScript, CSS, jQuery, OracleJET, ReactJS), RESTful APIs, Third-party library integrations (Apex Office Print (AOP), Payment Gateways, Syncfusion, HighCharts) and APEX Plugins (HighChart, StarRating)

Popular posts from this blog

Convert Classic Report Card Template and Card List Template into Flip Card Animated Templates

jQuery Circular Progress Bar - Pie Chart

How to create your own customized nested report regions using jQuery