Salesforce.com-Tips and Tricks
Greytrix is one of the oldest Sage Development Partner of two decades for Sage product lines and Reseller of Sage ERP and CRM. Greytrix has been awarded "Sage Partner of the Year" numerous times both as developers and resellers. In these blogs, Greytrix will endeavour to share its knowledge with regards to implementation, training, customisation, components and technology and help users to understand in depth techno – functional aspects of Salesforce.com To leverage the Greytrix advantage write to us at salesforce@greytrix.com
Follow us on LinkedIn Follow us on Twitter Follow us on Facebook Follow us on YouTube
Skip to content
  • Home

How to Notify User about Unsaved Changes on the UI using Lightning Component

By Greytrix | April 12, 2021
0 Comment

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’s decision.
  • Let’s 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.
  • So using the “Lightning:unsavedChanges” 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.
  • To clarify, the process is handled by “setUnsavedChanges” method. This method is present in the “Lightning:unsavedChanges” component. This method has two arguments:
    • A Boolean argument that indicates unsaved data is present or not. It returns true if unsaved data present, otherwise false.
    • An optional object argument.

Create Lightning Component

SampleComponent

  • For example, in this Lightning component, we are creating an instance of “Lightning:unsavedChanges" component to access its “setUnsavedChanges” method and assign an aura:id attribute to it. Refer to the below code to define the component.
<aura:component>
    <aura:attribute name="firstname" type="String" />
    <aura:attribute name="lastname" type="String" />
    <aura:handler name="change" value="{!v.firstname}" action="{!c.valueChanged}"/>
    <aura:handler name="change" value="{!v.lastname}" action="{!c.valueChanged}"/>
    <lightning:unsavedChanges aura:id="unsaved"
                onsave="{!c.handleSave}"
                ondiscard="{!c. handleDiscard}" />

    <lightning:card variant="narrow" title="Unsaved Example">
        <div class="slds-p-around_medium">
            <lightning:input type="text" label="First Name" value="{!v.firstname}"  />
            <lightning:input type="text" label="Last Name" value="{!v.lastname}"/>
        </div>
        <div class="slds-p-around_medium">
            <lightning:button variant="brand" label="Save" title="Save" onclick="{! c.save }" />
        </div>
    </lightning:card>
</aura:component>

SampleComponentController

  • Whenever the user enters any data on First Name or Last Name field the “valueChanged” 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.
  • The “handleSave” or “handleDiscard” method is called based on their selection. Refer the below code.
({  
 valueChanged : function(component, event, helper) 
    {
        var unsaved = component.find("unsaved");
        unsaved.setUnsavedChanges(true, { label: 'You have unsaved changes. Do you want to Continue?' });
    },
    handleSave: function(component, event, helper) {
        //method invoke when user click on save button
     },
     handleDiscard: function(component, event, helper) {
        //method invoke when user click on save discard button
     }
})
  • 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.
User Notification for Unsaved Changes
User Notification for Unsaved Changes

As a result, user is now notified about unsaved changes on the page in a custom Lightning component.

We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com.

About Us
Greytrix – 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.

Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration for Sage X3, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.
Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star rated app listed on Salesforce AppExchange.

The GUMU™ 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.

For more information on our Salesforce products and services, contact us at salesforce@greytrix.com. We will be glad to assist you.

Related Posts

  • How to Use Lightning Component in Visualforce page
  • Add Delete Row Dynamically In Salesforce Lightning
  • Using Aura method to pass value from Child component to Parent component (with example)
  • Salesforce – How to get row index of lightning table rows

Category: Salesforce Services Tags: Aura, Lightning aura component, Lightning basic, Lightning basics, Lightning Component, Lightning: unsavedchanges, Salesforce, Salesforce Notification, setUnsavedChanges method, UnsavedChanges, user info
Post navigation
← Displaying Related List based on User Profile in Lightning Experience How to Dynamically set base 64 image in lightning: carousel image →

Greytrix Websites and Blogs

  • Greytrix
  • GUMU™ Cloud
  • Greytrix Africa
  • Greytrix Australia
  • Sage X3 – Tips, Tricks and Components
  • Sage 100 & 500 ERP Tips and Tricks
  • Sage 300 – Tips, Tricks and Components
  • Sage CRM – Tips, Tricks and Components
  • Sage Business Cloud – Tips, Tricks and Components

GUMU™ Salesforce Sage Integration

https://www.youtube.com/watch?v=X9Dg4uwGT-0

Categories

  • GUMU™ Features
  • GUMU™ Salesforce
  • GUMU™ Tricks & Tips
  • Salesforce Services
  • Uncategorized
sage enterprise management services

Recent Posts

  • How to Get List of Apex Class by using ApextypeImplementor
  • How to Promote AR-Invoice from Salesforce to Sage 300 Cloud Using Salesforce Classic Version
  • How to Create and Set up Demo Pardot Org in Salesforce
  • How to Promote Quote from Salesforce to Sage Intacct Integration using GUMU™ lightning version
  • New GUMU Chain Next Functionality for Entity Mapping/Import in GUMU™ Settings for Integration

Popular blogs

  • Thinking of enhancing your business processes? Get the best ERP – CRM connector on Salesforce AppExchange!
  • GUMU™ for Salesforce – Sage ERP Integration
  • Leverage real-time enterprise data for better insights of your Customers with Salesforce – Sage 300 integration
  • GUMU™ Integration for Salesforce with Sage 300

Archives

Awards

Greytrix Top ISV Partner
Greytrix Revenue Growth Enterprise Business
Greytrix Africa Highest Revenue
Greytrix Prtner of the Year
Greytrix Partner Award
Copyright 2022
Salesforce.com-Tips and Tricks
Iconic One Theme | Powered by Wordpress