Wednesday, January 19, 2011

Working together: Save Before Exit and Tabular Forms

The SkillBuilders Save Before Exit plug-in is designed to make it very easy for developers to help prevent end users from loosing changes to work they’ve done on a page. When a user leaves a page it runs some checks to find out if changes have been made but not saved. If it finds any, it prompts the user before allowing them to go to the next page. If you’re not familiar with the plug-in, you can find it here along with the rest of our plug-in offerings.

Tabular Forms now have a similar technology built in – which is very clever. It’s needed in Tabular Forms because there are some built in controls, such as header sorting links and pagination links, that  when used could result in end users losing their work. The built in functionality that helps prevent this works great, it even highlights the cells that have changed (perhaps I’ll add that to the plug-in).

Recently, two separate users of the SkillBuilders Save Before Exit plug-in let me know of some problems they encountered while integrating the plug-in with the built in Tabular Form functionality. After having been a little confused myself at first, I was delighted to learn that both can coexist quite nicely – even compliment each other.

Here are some guidelines to properly integrate the two:

  1. Enable Partial Page Rendering (PPR) for the Tabular Form. This setting can be found under Layout and Pagination in the Report Attributes. PPR allows the tabular form to sort and paginate without causing the entire page to refresh. This prevents the plug-in from doing anything in these cases. The built in functionality will continue to work with PPR enabled.
  2. Make sure that the sorting links, pagination links, as well as the “Add” button of the Tabular Form are NOT selected in the No Warning Selector attribute of the plug-in. Again, since PPR is preventing the page from reloading it is not necessary to include these elements. In fact, including them can even cause an issue that prevents the plug-in from working when it should.

    Warning: the default No Warning Selector will include the Add button so make sure to change this. You’ll need to explicitly select the buttons and/or other elements that should allow a user to leave without being warned of unsaved changes.

So how do these two compliment each other? The warning functionality built into Tabular Forms only works when sorting or paginating through the report. But if the user clicks a breadcrumb or closes the browser, then changes will be lost. The plug-in can be used to give the user one last chance to save their changes.


  1. Hi
    This is a great plugin and I have found it very useful. Slightly off topic, but could you help. I cannot work out how to exclude the enforcement when clicking on a field label which has standard Apex pop-up Help. What jQuery selector would I need ?
    Help most gratefully received.

  2. Anonymous,

    Please email me so that we can resolve your issue.


  3. Hi

    Superb plugin.

    I have a save button and cancel button.

    When the save button is pressed then I want no warning and when the cancel button is pressed I do want a warning message.

    Both the buttons are HTML buttons.

    How do I do this?

  4. Anonymous,

    Modify the Disable Warning Selector so that is selects the buttons you want to allow exiting without warning. You may have to add an ID or class to the button to be able to target it.


  5. I've added #BUTTON_ATTRIBUTES# to the Button Template, and added id="cancel_200" and id="submit_200" to the Template Based Button Attributes for the buttons Cancel and Submit on the Page. I've configured the call to the SAVE BEFORE EXIT plugin as Event=Click, Selection Type=DOM Object, DOM Object=cancel_200
    In the 'True' section I've Set Fire When Event Result is TRUE
    Nearly Works
    What is the exact syntax in my example to use for the No Warning Selector, I've tried "submit_200" and just submit_200 so that I don't get a warning if I click on the Submit button.

    Help much appreciated

  6. Anonymous,

    Change the event to Page Load as indicated in the instructions.

    For the Disable Warning Selector, enter: #submit_200

    If that doesn't work for you please set up a demo on and provide me with developer credentials.


  7. Hi, i am using your plugin.
    I see 1 issue.
    When i click the help label hyperlink for an text item, the warning pops up, your changes will be lost. I have added the id attribute to the "optional label with help" template, in the definition and included the #help_text in the No waring selector. Now the warning does not show, but when i make any changes on the entry items on the page and try to close the window, or click on the non help label hyper links i see the Warning shows up which is correct, but once i click on help label hyper link for the entry items and then try to close the window, or click other hyperlinks like logout the Warning does not show up. It looks like the plugin is disabling all the anchor tag link clicks, and window close events, after i click the help label hyper link.

    That is the issue i am seeing, if you need more info. from me pl. let me know.

  8. Hi Madhu,

    Please send me an email and I'll send you the latest version for testing.


  9. We encountered the same issue; once the Pop-up Help has been clicked,the save before exit warning is not displayed anymore.

  10. F Bertels,

    What version of the plug-in are you using? This should not be an issue with the latest version on the site.

    If you are still having issues, please create a mockup on and provide me with developer credentials.


  11. Hi Dan,

    have you noticed issues with the save before exit plugin and the new Crimson Theme #23 in APEX 4.1? I just downloaded the plugin and tried it with my app in that theme and it seems to pop a warning message up regardless of whether or not items on the page have changed.

    I tried the plugin in the same app using an older theme and it works as expected.



  12. Hi Brian,

    No, I have not had the same issue. Please make sure you're running the latest version of the plug-in. Also, if you run the page in debug mode and look in the browser's console you'll see what it "thinks" changed.

    If you're still having difficulties, please set up an example on and provide me with developer credentials. My email address in my profile.


  13. Hi Dan,
    Great plugin. I modified it a bit to highlight changed items using $x_Class(this,"apex-tabular-highlight"); and it works exactly as I need.

    The only problem I experienced is working with failed validation. If you modify let's say a text field, click "Apply Changes" button, and form validation fails, your changed value becomes defualtValue for "new" page and now you are free to go anywhere without Save Before Exit warning.
    To reproduce the issue on your test site you can do following:
    1. Declare Text Field as required and make sure validations are executed for Sumbit2 button,
    2. Press Submit2, arrive to validation failure page;
    3. Now press Submit1 - you should not get a warning.

    Any suggestions?
    Thanks in advance,

  14. Hi Alex,

    I like the class modification you made, very cool. I may add that to a future version!

    To solve the other issue, unfortunately, you'd have to sacrifice the benefit of the enhancement you added - unless you're willing to put in quite a bit of effort anyway.

    The simple solution is to add a hidden (not protected) item to the page. Then add an onload/ready function that looks for the validation error message div. If the div is detected you could change the value of the hidden item which would ensure that the message is displayed.

    There are some methods you could use to get more programmatic as well. For example, you could call:



    to programmatically control the display of the warning message. However, I recommend taking the easy way out unless that level of control is needed.


  15. Hi Dan,

    Thanks for the plugin. It is working great.

    Is there any way that I can find out a list of fields that the plugin "thinks" have changed.


  16. Hi Chris,

    Since Alex's idea has some universal appeal, let me add it to the plug-in so all can use it. I'll do my best to get something out by next week.


  17. I just upgraded to the latest version because I didn't see which field caused the 'change' message, now it's really a great plug-in!

    Thanks, Dan & Alex!