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

  1. Replies
    1. Hello Ashi, may I know what error your are getting?

      Delete
    2. Actually I am trying this on a form which is made of apex items. But it doesn't work. No errors, simply goes to another page without the popup

      Delete
  2. Replies
    1. Hello Ashi, may I know what error your are getting?

      Delete
  3. Hi Jaydip

    Thanks for adding this, the above code is working leaving page.

    I have a navigation link from the one report to another editable region, if user changed column value and I want show the alert and if user select CANCEL in the confirmation popup, need unbind the link click event.

    Appreciate your help.

    ReplyDelete

Post a Comment

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

Oracle APEX - Interactive Report - Scrollbars on Top

How to create your own customized nested report regions using jQuery