bsgriggs/mendix-unsaved-changes-message

Mendix Unsaved Changes Message

Mendix widget to block the user from closing the browser, closing the tab, or clicking a Mendix navigation when they have unsaved changes.

Note: the browser based message when the user tries to close the tab or close the browser CANNOT be customized. This was deprecated by most modern browsers.

Mendix Nav	Browser Close

Features

Based on a boolean expression, dynamically enable the browsers 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

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

config

Create a non-persistent helper object with a hasChanges boolean
Add a data view that returns the helper to your form that wraps your input data view
Add the Unsaved Changes Message widget inside your form's data view and set the Block Exit expression
On each input widget, add an on-change action that sets hasChanges to true

Observe Mode - Browser

Only prevents Browser close and tab close

All set! Run the project, make some changes and attempt to close the browser tab
- Debug mode will show you in the UI when the widget's Block Exit flag is enabled/disabled. It will also log useful information to the browser console.
TURN OFF DEBUG MODE!

Observe Mode - Mendix & Both

Set/Copy the Watching Class Name to all containers & buttons that you want to block (i.e. cancel button, layout's navigation list, etc)

Navigation in layout	Cancel button

Note: the Navigation Menu class should be the class on the navigation menu itself while the Sidebar class should be the class on the highest level of that layout section. These are used to find the navigation menu and the sidebar in the DOM and adds a watcher for when the menu is opened and closed. If you do not have a collapsable menu, you do not need Navigation Menu or Sidebar Class.

sidebar
Sidebar Class

Set the On Process action as either a Microflow or a Nanoflow that performs a rollback on your form object. If you're using a non-persistent form object, then you might need to delete the objects.
All set! Run the project, make some changes.
- With debug mode on, you will see any content found using your configured Watching Class Name has a red box on top of it. It will also log useful information to the browser console.
TURN OFF DEBUG MODE!