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.

<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.

<aura:component implements="flexipage:availableForRecordHome" access="global"> <lightning:unsavedChanges aura:id="unsaved" onsave="{!c.handleSave}" ondiscard="{!c.handleDiscard}" /> <lightning:button label="Make Unsaved Changes" onclick="{!c.makeUnsavedChanges}" /> <lightning:button label="Clear Unsaved Changes" onclick="{!c.clearUnsavedChanges}" /> <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.

 ({ makeUnsavedChanges: function(cmp, evt, helper) { var unsaved = cmp.find("unsaved"); unsaved.setUnsavedChanges(true, { label: 'My component name' }); }, clearUnsavedChanges: function(cmp, evt, helper) { var unsaved = cmp.find("unsaved"); unsaved.setUnsavedChanges(false); }, handleSave: function(cmp, evt, helper) { ... my custom save logic // When the custom save logic has completed the setUnsavedChanges method // must be called again to return control to the lightning UI var unsaved = cmp.find("unsaved"); if (something went wrong) { // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed unsaved.setUnsavedChanges(true); } else { // return control to the lightning UI while indicating that the content is saved unsaved.setUnsavedChanges(false); } }, handleDiscard: function(cmp, evt, helper) { // similar to the handleSave method, but for discarding changes } }) 

For more information, see the Console Developer Guide.