In this article, we will discuss events in lightning aura components and their use cases in general.
Lightning Events are used to communicate between the Lightning Components. One component registers to fire an event in its markup and the Events are fired from the controller, triggered by a user interface. Another component handles the event and receives the data by listening to that event.
Types of events in Lightning Aura Framework
We declare the event using aura: event tag in a .evt resource or the lightning event and they can be of two types: component or application.
Component Events
A component event is fired from a component and can be handled by the component itself or by a component contained in the hierarchy that receives the event. Component events are thereby helpful in passing data from child to parent component.
Application Events
Application events are handled by all components that have the handler defined to receive that event and are listening to the event when it is fired. These events follow a traditional publish-subscribe model.
System Events in Lightning Framework
System events are the events fired by the Lightning framework such as during component initialization, rendering, attribute value change, etc. We can handle these events in the Lightning apps or components and within the Salesforce mobile app.
Example: The init event is fired when an app or component is initialized, prior to rendering. It is handled using aura:handler tag.
CMP
<aura:component>
<aura:attribute name="setOnInit" type="String" default="default value" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<p><b>{!v.setOnInit}</b></p>
</aura:component>JS
({
doInit: function(cmp) {
cmp.set("v.setOnInit", "It is Fun!");
}
})Similarly, the event render is fired when an app or component is rendered or rerendered. Handle this event using the aura:handler tag.
<aura:handler name="render" value="{!this}" action="{!c.doOnRender}"/>We also have a destroy event when a component is destroyed. Handle this event if you need to do custom cleanup when a component is destroyed.
<aura:handler name="destroy" value="{!this}" action="{!c.doHandleDestroy}"/>Setting value="{!this}" marks this as a root event of the event hierarchy for all events of type=”VALUE”, i.e. an aura:valueEvent.
Lightning Application Events provided by Salesforce Library
We have some events provided by Salesforce Library that can be helpful for example: to show a full Record Create panel, or display a record edit screen for a given record.
However, some of these library events might not be supported in the Salesforce app and Lightning Experience or a standalone app.
We can show a full standard create record panel using the below example.
createRec : function (component, event, helper) {
var createRecEvent = $A.get("e.force:createRecord");
createRecEvent.setParams({
"entityApiName": "Account"
});
createRecEvent.fire();
}We can refer to more such events here. It can be helpful as we don’t need to create the entire page and can use it in a simpler fashion.