You have unsaved changes. Do you wish to proceed?

In this blog we will talk about unsavedchanges event of aura component. Many times you must have faced an issue where user start filling the form and by mistake clicks on other tab or back button of the browser. In this case the data entered by user is lost and user need to restart whole things which is frustrating.

To overcome this issue lightning framework provides lightning:unsavedchanges tag. By using this, you can display a message to user when user tries to navigate away from current page without saving the changes.

Lets take a sample scenario. I have a component with input box where user gives account name and click on save to create account record. Lets take a look at below code in aura component

unsavedchanges.html

<aura:component controller="AccountController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="accountName" type="string"/>
    <aura:handler name="change" value="{!v.accountName}" action="{!c.enableunsavedchange}"/>
    <lightning:unsavedChanges aura:id="unsaved"
                onsave="{!c.saveAccount}"
                ondiscard="{!c.clearData}" />
    <lightning:input name="accountData" label="Account Name" value="{!v.accountName}"/>
    <br/>
    <lightning:button name="dosave" label="Save Account" onclick="{!c.saveAccount}"/>
    
</aura:component>

unsavedchanges.js
({
	enableunsavedchange : function(component, event, helper) {
		var unsaved = component.find("unsaved");
        unsaved.setUnsavedChanges(true, { label: 'You have no saved account. Do you want to Continue?' });
	},
    
    saveAccount : function(component, event, helper){
        var unsaved = component.find("unsaved");
        unsaved.setUnsavedChanges(false);
        var action=component.get("c.createAccount");
        action.setParams({
            accountName : component.get("v.accountName")
        });
        action.setCallback(this,function(response){
            alert(response.getState());
        });
        $A.enqueueAction(action);
    },
    
    clearData : function(component, event, helper){
        var unsaved = component.find("unsaved");
        unsaved.setUnsavedChanges(false);
    }
    
})

In above code i am using lighting:unsavedchanges tag which comes with attributes like onsave and ondiscard. In js controller as soon as user starts entering the value in text box, using change handler, i am initializing the unsavedchanges event in enableunsavedchange method with attribute as true. This will make sure user gets popup notification as soon as tries to navigate away. Next when user click on save then i am calling saveAccount method which in turn first disable the unsavedchange event and creates an account, making sure that user has completed the process.

In this way when user tried to moves away without without clicking on save button, user gets a popup notification stating you have unsaved changes, with 3 buttons on the popup.

1. Continue Editing–> this will return user to current page and user can keep on making changes
2. Discard Changes –> this will call the method mentioned in ondiscard attribute of lightning:unsavedChanges. This tells that user is ready to discard the changes.
3. Save–> This will call method mention in onsave attribute. This makes sure that user changes are saved before user is navigating away.

The popup is out of the box hence cannot do much customization in it.

Note :- This event doesn’t work in salesforce experience cloud and LWC components.

For more info you can check the link