From ef97c27dbba098134e848ae8ce9abdcc583653a8 Mon Sep 17 00:00:00 2001 From: Steve Boyd Date: Tue, 18 Nov 2025 15:52:31 +1300 Subject: [PATCH] DOC Unsaved changes indcator --- .../08_Unsaved_Changes_Indicator.md | 44 ++++++++++++++++++ en/08_Changelogs/6.2.0.md | 10 ++++ en/_images/unsaved-changes-indicator.png | Bin 0 -> 6611 bytes 3 files changed, 54 insertions(+) create mode 100644 en/02_Developer_Guides/15_Customising_the_Admin_Interface/08_Unsaved_Changes_Indicator.md create mode 100644 en/_images/unsaved-changes-indicator.png diff --git a/en/02_Developer_Guides/15_Customising_the_Admin_Interface/08_Unsaved_Changes_Indicator.md b/en/02_Developer_Guides/15_Customising_the_Admin_Interface/08_Unsaved_Changes_Indicator.md new file mode 100644 index 000000000..b3f5c6a42 --- /dev/null +++ b/en/02_Developer_Guides/15_Customising_the_Admin_Interface/08_Unsaved_Changes_Indicator.md @@ -0,0 +1,44 @@ +--- +title: Unsaved changes indicator +summary: Configure and customise the CMS unsaved changes indicator shown on edit forms +icon: icon-clock +--- + +# Unsaved changes indicator + +The CMS shows a small inline indicator on edit forms after a user has started editing the form (contains unsaved changes) after a configurable period of time. The indicator starts as a subtle "notice" and escalates to a more prominent "warning" after a second period. This helps editors remember to save their work and reduces accidental data loss. + +![Unsaved changes indicator screenshot](../../_images/unsaved-changes-indicator.png) + +The indicator activates only when the form has started editing the form. When the form then changes to a state where there are no unsaved changes, either by saving or reverting the unsaved changes, then its timer resets. By default, a notice appears after 5 minutes, escalating to a warning after 10 minutes. Notice and warning are independent levels; you can disable either or both through configuration. + +## Configuration + +You can configure the indicator using YAML. The configuration controls the intervals in minutes for the two levels. +Set either level to `0` to disable that level. Set both to `0` to disable the indicator entirely. + +Example: change the notice to 10 minutes and the warning to 20 minutes + +```yml +SilverStripe\Admin\Forms\UnsavedChangesIndicator: + minutes: + notice: 10 + warning: 20 +``` + +To disable the warning level only: + +```yml +SilverStripe\Admin\Forms\UnsavedChangesIndicator: + minutes: + warning: 0 +``` + +To disable the indicator entirely: + +```yml +SilverStripe\Admin\Forms\UnsavedChangesIndicator: + minutes: + notice: 0 + warning: 0 +``` diff --git a/en/08_Changelogs/6.2.0.md b/en/08_Changelogs/6.2.0.md index e1387f5f5..d442448cb 100644 --- a/en/08_Changelogs/6.2.0.md +++ b/en/08_Changelogs/6.2.0.md @@ -84,6 +84,16 @@ If your icon is being added to a `FormAction` or `GridField_FormAction`, we reco Functionality has also been added to allow swapping icons in an accessible way for alternating buttons (e.g. the save and publish buttons). See [how to implement an alternating button](/developer_guides/customising_the_admin_interface/how_tos/cms_alternating_button/) (which has been updated) for details. +### Unsaved changes indicator {#unsaved-changes-indicator} + +A new unsaved changes indicator has been introduced to CMS edit forms. The indicator appears after a configurable amount of time after starting to edit a form, providing real-time visual alerts when changes have been made but not yet saved. This helps users keep track of their work and prevent accidental data loss by making unsaved modifications more apparent. + +![Unsaved changes indicator](../_images/unsaved-changes-indicator.png) + +The indicator appears as a "notice" after a configurable initial period (defaulting to five minutes) and escalates to a more prominent "warning" after a second configurable interval (defaulting to ten minutes). This escalation ensures users are increasingly aware of long-standing unsaved changes. + +See [Unsaved changes indicator](/developer_guides/customising_the_admin_interface/unsaved-changes-indicator/) instructions on how to configure the indicator. + ### Pass arbitrary attributes with requirements API {#requirements-attributes} When using [`Requirements_Backend`](api:SilverStripe\View\Requirements_Backend) as your requirements API backend (which is the default), you can now pass arbitrary attributes for JavaScript and CSS (`