{"id":6148,"date":"2021-04-12T05:39:42","date_gmt":"2021-04-12T05:39:42","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6148"},"modified":"2021-04-12T05:39:45","modified_gmt":"2021-04-12T05:39:45","slug":"how-to-notify-user-about-unsaved-changes-on-the-ui-using-lightning-component","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/04\/12\/how-to-notify-user-about-unsaved-changes-on-the-ui-using-lightning-component\/","title":{"rendered":"How to Notify User about Unsaved Changes on the UI using Lightning    Component"},"content":{"rendered":"\n<p>In this blog, we will discuss on how to notify the user about unsaved changes on the UI by using <strong>Lightning:unsavedChanges<\/strong> component.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em>Lightning:unsavedChanges<\/em><\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>For example, this component provides a way to notify the user about unsaved changes on the UI and to participate in saving or discarding those changes based on the user&#8217;s decision.<\/li><li>Let\u2019s take an example; if you are entering any data and during that period you accidentally click on any other link which redirects you to another page. As a result, during the redirection the entered data might be lost.<\/li><li>So using the \u201c<strong>Lightning:unsavedChanges\u201d<\/strong> component whenever you click on any other link you will be notified using a popup about the unsaved changes and you will get options to continue, save and discard the changes.<\/li><li>To clarify, the process is handled by \u201c<strong>setUnsavedChanges<\/strong>\u201d method. This method is present in the \u201c<strong>Lightning:unsavedChanges<\/strong>\u201d component. This method has two arguments:<ul><li>A Boolean argument that indicates unsaved data is present or not. It returns true if unsaved data present, otherwise false.<\/li><li>An optional object argument.<\/li><\/ul><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em><span style=\"text-decoration: underline;\">Create Lightning Component<\/span><\/em><\/strong><\/h4>\n\n\n\n<p><strong>SampleComponent<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>For example, in this Lightning component, we are creating an instance of <strong>&#8220;<code>Lightning:unsavedChanges\"<\/code><\/strong>\u00a0component to access its <strong>&#8220;setUnsavedChanges&#8221;<\/strong> method and assign an aura:id attribute to it. Refer to the below code to define the component.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;aura:component>\r\n    &lt;aura:attribute name=\"firstname\" type=\"String\" \/>\r\n    &lt;aura:attribute name=\"lastname\" type=\"String\" \/>\r\n    &lt;aura:handler name=\"change\" value=\"{!v.firstname}\" action=\"{!c.valueChanged}\"\/>\r\n    &lt;aura:handler name=\"change\" value=\"{!v.lastname}\" action=\"{!c.valueChanged}\"\/>\r\n    &lt;lightning:unsavedChanges aura:id=\"unsaved\"\r\n                onsave=\"{!c.handleSave}\"\r\n                ondiscard=\"{!c. handleDiscard}\" \/>\r\n\r    &lt;lightning:card variant=\"narrow\" title=\"Unsaved Example\">\r\n        &lt;div class=\"slds-p-around_medium\">\r\n            &lt;lightning:input type=\"text\" label=\"First Name\" value=\"{!v.firstname}\"  \/>\r\n            &lt;lightning:input type=\"text\" label=\"Last Name\" value=\"{!v.lastname}\"\/>\r\n        &lt;\/div>\r\n        &lt;div class=\"slds-p-around_medium\">\r\n            &lt;lightning:button variant=\"brand\" label=\"Save\" title=\"Save\" onclick=\"{! c.save }\" \/>\r\n        &lt;\/div>\r\n    &lt;\/lightning:card>\r\n&lt;\/aura:component><\/code><\/pre>\n\n\n\n<p><strong>SampleComponentController<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Whenever the user enters any data on First Name or Last Name field the \u201c<strong>valueChanged\u201d<\/strong> controller method gets invoked. 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.<\/li><li>The \u201c<strong>handleSave<\/strong>\u201d or \u201c<strong>handleDiscard<\/strong>\u201d method is called based on their selection. Refer the below code.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>({  \r\n valueChanged : function(component, event, helper) \r\n    {\r\n        var unsaved = component.find(\"unsaved\");\r\n        unsaved.setUnsavedChanges(true, { label: 'You have unsaved changes. Do you want to Continue?' });\r\n    },\r\n    handleSave: function(component, event, helper) {\r\n        \/\/method invoke when user click on save button\r\n     },\r\n     handleDiscard: function(component, event, helper) {\r\n        \/\/method invoke when user click on save discard button\r\n     }\r\n})<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Here is the output, where we display a simple form page with First Name and Last Name field, so now whenever a user enters any value to this field and then clicks on another link or try to close the page, a popup will appear as shown in the below image.<\/li><\/ul>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/04\/1.-User-Notification-for-Unsaved-Changes.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/04\/1.-User-Notification-for-Unsaved-Changes.png\" alt=\"User Notification for Unsaved Changes\"><\/a><\/center>\n<font size=\"2\"><center><i>User Notification for Unsaved Changes<\/i><\/center><\/font>\n\n\n\n<p>As a result, user is now notified about unsaved changes on the page in a custom Lightning component.<\/p>\n\n\n\n<p>We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/03\/30\/how-to-use-lightning-component-in-visualforce-page\/\">How to Use Lightning Component in Visualforce page<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/03\/24\/add-delete-row-dynamically-in-salesforce-lightning\/\">Add Delete Row Dynamically In Salesforce Lightning<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/02\/12\/using-aura-method-to-pass-value-from-child-component-to-parent-component-with-example\/\">Using Aura method to pass value from Child component to Parent component (with example)<\/a><\/li><li><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/22\/salesforce-how-to-get-row-index-of-lightning-table-rows\/\">Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li><\/ul>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will discuss on how to notify the user about unsaved changes on the UI by using Lightning:unsavedChanges component. Lightning:unsavedChanges For example, this component provides a way to notify the user about unsaved changes on the UI and to participate in saving or discarding those changes based on the user&#8217;s decision. Let\u2019s\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/04\/12\/how-to-notify-user-about-unsaved-changes-on-the-ui-using-lightning-component\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1131,1055,1133,207,208,1130,367,886,1132,1129,770],"class_list":["post-6148","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-aura","tag-lightning-aura-component","tag-lightning-basic","tag-lightning-basics","tag-lightning-component","tag-lightning-unsavedchanges","tag-salesforce","tag-salesforce-notification","tag-setunsavedchanges-method","tag-unsavedchanges","tag-user-info"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6148"}],"version-history":[{"count":1,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6148\/revisions"}],"predecessor-version":[{"id":6150,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6148\/revisions\/6150"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}