Wednesday, November 6, 2013

Angular: Disable the back button/Warn before leaving App

Been a while, I've been busy rolling out our latest project and work has to come first.

I have a single page app in Angular that has 14 different tabs. (3 main tab groups and then subgroups under them. I'm not insane.) While doing user testing,  I noticed that one of our users was under the distinct impression that hitting the "back" button would take him to the previous tab. He did this repeatedly, losing his input each and every time.

At some point we will add some routing to handle these cases. However, that's a good amount to put into this program and we are in "live beta" right now.

A simple solution:

window.onbeforeunload = function (e) {

  return 'You are reloading or leaving this App. Any unsaved data will be lost.';

};