Overview

A module of the Unsaved Changes Message widget. This widget can be used to prevent users from leave a page or the browser window while they have unsaved changes on a form.

The module includes examples of this widget and a JavaScript Action to use with the JavaScript Action mode.

Documentation

Unsaved Changes Message

See the GitHub ReadMe for more formatted documentation.

Mendix widget & module to block the user from closing the browser, closing the tab, or clicking a Mendix navigation when they have unsaved changes. This module includes the widget, the 'CheckUnsavedChangesMessage' JavaScript action, and some examples of implementation.

Note: the browser-based message when the user tries to close the tab or close the browser CAN NOT be customized. Most modern browsers deprecated this to mitigate malicious spam.

Features

• Based on a boolean expression, dynamically enable the browser's onBeforeUnload event. 
• Based on a boolean expression, on any Mendix navigation, execute a flow.
• Based on a boolean expression, block any Mendix navigation with a confirmation message.
• Tested and works in Chrome, Safari, Microsoft Edge, and Firefox- Mode 'JavaScript Action' provided in the module that provides a better UX, see the Usage section of the ReadMe
• Ability to use a custom popup page, see the Custom Popup section of the ReadMe
• Debug mode based on a Server Constant 'CONST_DebugUnsavedChanges'

Limitations

• Does not detect browser back or forward buttons 
  • Willing to add this functionality if anyone can find a way in Mendix
• The developer must manually track if the form has changes using onChange actions 
  • Willing to automate this process if there is a good, future-proof method

Usage

See the GitHub ReadMe for more formatted documentation.

Demo project

https://widgettesting105-sandbox.mxapps.io/p/unsaved-changes-message/employees 

Issues, suggestions and feature requests

https://github.com/bsgriggs/mendix-unsaved-changes-message

Development and contribution

Benjamin Griggs @2023