What is Unsaved Changes in Lightning Component | How and where to use it ?

In this blog you will learn what is Lightning Unsaved Change and how you can use it in your Lightning Components.

I will create a custom lightning component which will having save functionality for new Contacts. On the click of save button I will use the Lightning Unsaved Changes to intimate user if he left any unsaved changes on the page. #UnsavedChanges #Lightning #Salesforce

Please follow below code :

Component
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<aura:component implements="flexipage:availableForRecordHome" access="global" >
    <aura:attribute name="goodToGo" type="boolean" />
    <lightning:unsavedChanges aura:id="unsaved"
                              onsave="{!c.handleSave}"
                              ondiscard="{!c.handleDiscard}" />
    <div class="slds-theme_default">
        <lightning:recordEditForm aura:id="form"
                                  onsubmit="{!c.handleSave}"
                                  onsuccess="{!c.handleSuccess}"
                                  objectApiName="Contact">
            <lightning:messages />
            
            <lightning:inputField fieldName="FirstName" onchange="{!c.makeUnsavedChanges}"/>
            <lightning:inputField fieldName="LastName" onchange="{!c.makeUnsavedChanges}" />
            <lightning:inputField fieldName="Email" onchange="{!c.makeUnsavedChanges}" />
            <lightning:inputField fieldName="Phone" onchange="{!c.makeUnsavedChanges}" />
            <center>
                <lightning:button variant="brand" type="submit" name="save" label="Save Record" />
            </center>
        </lightning:recordEditForm>
    </div>
</aura:component>

Controller
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
({
    
    makeUnsavedChanges: function(cmp, evt, helper) {
        console.log('###Make unsaved changes');
        var unsaved = cmp.find("unsaved");
        unsaved.setUnsavedChanges(true, { label: 'You have some unsaved changes on the page!' });
    },
    clearUnsavedChanges: function(cmp, evt, helper) {
        console.log('###clear unsaved changes');
        var unsaved = cmp.find("unsaved");
        unsaved.setUnsavedChanges(false);
    },
    handleSave: function(cmp, evt, helper) {
        
        cmp.set("v.goodToGo",true);
        console.log('###Handle save : '+cmp.get("v.goodToGo"));
        // 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 (cmp.get("v.goodToGo") != true) {
            console.log('###unsaved changes is true');
            // return control to the lightning UI while indicating that the content is still unsaved, preventing it from being dismissed
            unsaved.setUnsavedChanges(true);
        }
        else {
            console.log('###unsaved changes is false');
            // 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
        console.log('###Discard');
    },
    handleSuccess : function(component, event, helper) {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "title": "Success!",
            "message": "The record has been updated successfully."
        });
        toastEvent.fire();

    }
})

Output


Checkout the complete tutorial video below :


 If you have any question please leave a comment below.
If you would like to add something to this post please leave a comment below.
Share this blog with your friends if you find it helpful somehow !

Thanks
Keep Coding 





Post a Comment

7 Comments

  1. That was very useful. Thanks for sharing!

    ReplyDelete
  2. I've tried this. It worked. But instead of SLDS modal pop-up, I'm always getting browser pop-up only. Can you please tell, what might be the cause?

    ReplyDelete
    Replies
    1. Try clicking on a different link on the same page to trigger unsaved changes. If you hit the browser back button or refresh the page so it will trigger the browser’s default popup instead of Salesforce one.

      Delete
    2. It was related to my browser version. It works now. Thank you. One last question, can we change the button label to something? such as "Continue Editing", "Discard Changes" and "Save" to some other value?

      Delete
    3. Yes we can change the label. Sharing a link for your reference.
      https://developer.salesforce.com/docs/component-library/bundle/lightning:unsavedChanges/documentation

      Delete
  3. This component works great except for one situation. If I am creating a new case, it will not warn me of unsaved changes. If I am editing an existing case it warns me. Any suggestions?

    ReplyDelete