Monday, October 28, 2013

Disabling the back button in PeopleSoft

I was asked to disable the back button in the browser for ePerformance. However, based on my research you I concluded that the back button cannot be disabled and nor would I want to disable it if I could.  So what can you do to prevent users from losing their work, by using the back button in PeopleSoft?  The answer appears to be the onbeforeunload event in the browser.  This event is designed to prompt the user if they really want to leave the page and potentially lose their changes.  To implement this I needed to add the following JavaScript to the page I wanted to prevent the user from losing their changes.

1. Modify the onbeforeunload to warn the user if the page has changed and they are navigating away from the page.
window.onbeforeunload = function(e) {
           var changes = checkFormChanged(document.%formname);
if (changes)
{           
  return "You have unsaved changes, please save them."
}
}

2.add some JavaScript to clear out the onbeforeunload if they user selected a link/button on the page.
function adaptLinks() {
    var links = document.getElementsByTagName('a');
    for (i = 0; i != links.length; i++) {
        links[i].onclick = (function () {
            var origOnClick = links[i].onclick;
            return function (e) {
                 window.onbeforeunload = function(){};
                if (origOnClick != null && !origOnClick()) {
                    return false;
                }               
            }
        })();
    }
}
adaptLinks();


3.  Finally, I  Monkey Patched the endModalCntrl to clearout the onbeforeunload if they used the "X" to close out a modal window. 

 (function() {
  var originalendModalCntrl = ptCommonObj.endModalCntrl;
  ptCommonObj.endModalCntrl = function() {
    window.onbeforeunload = function(){};
    return new originalendModalCntrl();
  }
})();

Special thanks to Jim Marion for #3

Now when the user clicks the back button or changes the url they are prompted by the page that they have unsaved changes, like this:





8 comments:

  1. Kevin, this is great. What object did you modify to implement this behavior? As of 8.54 you can use component branding to implement this without modifying any delivered definitions.

    ReplyDelete
  2. Jim,

    I simply injected the JavaScipt into the pages that I wanted to prevent the use of the back button. I bet you could do something way cooler!

    Thanks!

    ReplyDelete
  3. Hi Kevin, Thanks for this post, so you just included a html on the page and included the above Javascript, does this work for IE 8 ?

    ReplyDelete
    Replies
    1. That is correct, we don't have 8.54, so I had to add this to the page. And to my knowledge this will work with IE 8.

      Delete
  4. Hi Kevin, I have been able to make it work, but i have a grid area on the page and I need to identify this as a variable, when the user selects the add button, this message is getting prompted, I need to clear out the onbeforeunload when user hits the add button. Any inputs ?

    ReplyDelete
    Replies
    1. When I look at a grid in my system the add button is in an anchor tag and this JavaScript is clearing out the onbeforeunload for all anchor tags? Can you use Chrome or Firebug to analyze the tag for you add button?

      Delete
  5. Hi Kevin, we are on 9.1/8.54 only google chrome.
    Do you know of any fix for this?

    ReplyDelete
    Replies
    1. We just upgraded to tools 8.54, but we are no longer using this code as we have switched to the delivered auto save and I have not reworked it for the new tools version.

      Delete