Unsaved Changes

lightning:unsavedChanges

A component that can be used to notify the UI containment hierarchy of unsaved changes

For Use In

Lightning Experience

This component provides a way to notify the UI containment hierarchy of unsaved changes and to participate in saving or discarding those changes based on the user’s decision.

To access the methods, create an instance of the lightning:unsavedChanges component inside of your component and assign an aura:id attribute to it.

1<lightning:unsavedChanges aura:id="unsaved" />

This example demonstrates how to call the setUnsaved changes method when a button is clicked and how to handle the user’s decision to save or discard the unsvaed content.

1<aura:component implements="flexipage:availableForRecordHome" access="global">
2  <lightning:unsavedChanges
3    aura:id="unsaved"
4    onsave="{!c.handleSave}"
5    ondiscard="{!c.handleDiscard}" />
6  <lightning:button label="Make Unsaved Changes" onclick="{!c.makeUnsavedChanges}" />
7  <lightning:button label="Clear Unsaved Changes" onclick="{!c.clearUnsavedChanges}" />
8  <aura:component></aura:component
9></aura:component>

The buttons invoke the makeUnsavedChanges and clearUnsavedChanges client-side controller methods. If the user takes some action that would lose unsaved content such as closing its console tab container then a dialog appears prompting them to save or discard it. The handleSave or handleDiscard method is called based on their selection. These methods are required to call the setUnsavedChanges() method to return control back to the Lightning UI, as demonstrated below.

1({
2     makeUnsavedChanges: function(cmp, evt, helper) {
3         var unsaved = cmp.find("unsaved");
4         unsaved.setUnsavedChanges(true, { label: 'My component name' });
5     },
6     clearUnsavedChanges: function(cmp, evt, helper) {
7         var unsaved = cmp.find("unsaved");
8         unsaved.setUnsavedChanges(false);
9     },
10     handleSave: function(cmp, evt, helper) {
11         ... my custom save logic
12         // When the custom save logic has completed the setUnsavedChanges method
13         // must be called again to return control to the lightning UI
14         var unsaved = cmp.find("unsaved");
15         if (something went wrong) {
16           // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed
17           unsaved.setUnsavedChanges(true);
18         }
19         else {
20           // return control to the lightning UI while indicating that the content is saved
21           unsaved.setUnsavedChanges(false);
22         }
23     },
24     handleDiscard: function(cmp, evt, helper) {
25        // similar to the handleSave method, but for discarding changes
26     }
27})

For more information, see the Console Developer Guide.

Attributes

Name	Description	Type
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
label	Label for the unsaved content which appears in prompt for save or discard	String
ondiscard	Action to handle discarding unsaved content	Aura.Action
onsave	Action to handle saving unsaved content	Aura.Action

Methods

Name	Description	Argument Name	Argument Type	Argument Description
setUnsavedChanges	Notifies the containment hierarchy of unsaved content	isUnsaved	Boolean	true if unsaved content is present, false otherwise
setUnsavedChanges	Notifies the containment hierarchy of unsaved content	options	Object	Map containing optional parameters such as a label

Unsaved Changes

Attributes

Methods

Lightning Component Reference