Salesforce Lightning Events – An Introduction

With the Winter ’16 release of Salesforce Lightning, we now have a reinvented interface focusing on intelligent user experience. It is a component-based framework that follows the MVC design pattern in which every new piece of requirement is a component. It has a promising UI, better customizing ability, and quicker access to readymade apps and components.

The advantage here is that all these components are reusable. However, one of the limitations of JavaScript is that the JS of one component cannot communicate with the JS of another component.

How can these components talk with each other? This is where Events come into the picture. In simple terms, Lightning Events are the bridge to this communication. This blog discusses the Salesforce Lightning Framework Events and when and where to use each event.

Salesforce Lightning Events are broadly classified into four:

1. System Events
2. Lightning Application Events from the library
3. Application Events
4. Component Events

SYSTEM EVENTS

System events are fired automatically by the Lightning framework and during component initialization, rendering or attribute value change, etc. The different types of Lightning-supported system events are:

1. aura:valueInit – executes a logic when the component markup is initiated or loaded but the component page is not yet rendered. This is the first system event that gets fired.
2. aura:valueRender – executes a logic when the component page is rendered completely or re-rendered
3. aura:noAccess – executes a logic when the requested resource has no access permission
4. aura:locationChange – executes a logic when the URL hash part has been changed
5. aura:systemError – executes a logic when an error occurs during the execution of server-side (apex controller) action.
6. aura:valueChange – executes a logic when the aura attribute value is changed
7. aura:valueDestroy – executes a logic when the component is destroyed and we want to do some custom cleanup during that period.

System events are easy to handle and if you want to perform a logic during the occurrence of any of these events mentioned above, you can handle it in your HTML markup code by adding the below code:

<aura:handler name=”name_of_the_event” value=”{!this}” action=”{!c.handleSystemEvent}”/>

NB: “name_of_the_event” can be init, render, destroy, change, aura:systemError

Now you can write the logic that you want to perform in the JS controller using the below syntax:

({
handleSystemEvent: function (component, event, helper) {
//Do your logic
}
})

LIGHTNING APPLICATION EVENTS FROM LIBRARY 

These events are provided by the Salesforce library and can be often used based on your requirements. However, some of these library events might not be supported by the Salesforce app and Lightning Experience or a standalone app at the same time. So it is recommended to instantiate the event using $A.get() to determine from where your component is running i.e. Salesforce app and Lightning Experience or a standalone app.

createRecord: function (component, event, helper) {
var createRecordEvent= $A.get(“e.force:createRecord”); //event taken from library
if (createRecordEvent){
// means if the event is supported

       //fire the create Record event in Salesforce app and Lightning Experience
createRecordEvent.setParams({
“entityApiName”: “Contact”

        });
createRecordEvent.fire();
} else {

        //if event is not supported
//your record creation implementation for a standalone app here
}
}

Refer the link below to learn the different types of events supported by Salesforce Lightning library:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_one.htm

APPLICATION EVENTS 

Application Events helps in passing values between two independent events (without parent child relationship). It behaves just like a broadcast message wherein any device that has the receiver turned on can receive the broadcast message sent from a single device. It means that in case of Application Events, any component with the handler statement defined for the event can receive the fired event.

COMPONENT EVENTS 

Component Events are required to pass values from the child component to the parent. The parent component (receiver) will be handling the event fired by the child components (sender).

Read more: A Guide to Application & Component Events in Salesforce Lightning

If you have any questions, feel free to contact us at services@suyati.com.