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 #SalesforcePlease 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
.png)
%20(1).png)
7 Comments
That was very useful. Thanks for sharing!
ReplyDeleteGlad you like it !
DeleteI'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?
ReplyDeleteTry 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.
DeleteIt 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?
DeleteYes we can change the label. Sharing a link for your reference.
Deletehttps://developer.salesforce.com/docs/component-library/bundle/lightning:unsavedChanges/documentation
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