Enable Are you sure? Dialog for Userview

Introduction

In many web applications, users may accidentally navigate away from a page with unsaved changes, resulting in data loss. To prevent this, you can implement an Are you sure? dialog that prompts users before they leave a page with unsaved changes. This guide will show you how to enable this feature in your Joget application using custom JavaScript.

How does it work?

The provided JavaScript code detects changes in form fields and triggers a confirmation dialog when the user attempts to leave the page without saving those changes. The customizable code allows you to exclude certain classes or field IDs from triggering the dialog.

To implement this feature:

1. Go to the UI Builder. 
2. Click Settings.
3. Scroll down to the Custom JavaScript or Sub Footer field.
4. Paste the following code:
   

   <script>
      
     var somethingChanged=false;
      $("form:not(#loginForm)").on("change", function(e){ //This function detects any changes except for on the login form
          if (!$(e.target).is('#id')) { //For all changes except for the field "id", the parameter that something changed is set. You may comment this out if not needed
            somethingChanged = true;
         }
      });
       
      $.fn.hasAnyClass = function() { //This function can deal with a number of classes entered below that will be excluded from the "are you sure you want to leave this page" notification
       for (var i = 0; i < arguments.length; i++) {
           if (this.hasClass(arguments[i])) {
               return true;
           }
       }
       return false;
      }
       
     window.onload = function() {
     window.addEventListener("beforeunload", function (e) {
           if (!$(document.activeElement).hasAnyClass('waves-button-input', 'form-button') //if the element that would trigger beforeunload has the mentioned classes, the dialog shown
               && !$(document.activeElement).parent().hasAnyClass('nav_item') //if the element has the mentioned parent class, the dialog won't be triggered (useful for Multi Page navigation that don't have a distinct own class)
               && somethingChanged) { //only if the form has changed the dialog will be triggered
                   var confirmationMessage = 'It looks like you have been editing something. '
                                           + 'If you leave before saving, your changes will be lost.';
                   (e || window.event).returnValue = confirmationMessage; //Gecko + IE
                   return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
               }
           return undefined;
       });
    };
     
   /*
    $(window).on('load', function() { //used for debugging
       console.log(somethingChanged);
   })
   */
   </script>

   Note: You can adjust the code to exclude specific elements or classes that shouldn't trigger the dialog, such as certain buttons or navigation elements.
5. Save your changes.
6. Test the UI Builder to ensure the confirmation dialog appears when unsaved changes are present.