Code By Code – Lightning Framework – Chapter 17 – Application Events

Code By Code – Lightning Framework – Chapter 17 – Application Events

Chapter 17

Topics for this chapter:

  • Application Events

Application Events

From Chapter 13 – Component Events and Chapter 15 – Aura Method, we have already learned about communication between aura components belongs to the same hierarchy.

With component events, you can communicate with self or parent components in the same hierarchy, and with aura methods, you can communicate down in the hierarchy from parent component to child component.

What is there is no relation between two components or if they belong to different component hierarchies. Like the different components, we add using app builder. How to communicate among these components? Application Event is the answer.

Application event uses the pub-sub methodology, which allows communication among different components. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

Image Source: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application.htm

 

To fire and handle application events, we need to follow below steps:

  • Create Application Event file.
  • Define your attribute between <aura:event> tag
  • Fire the event from component controller using fire() method
  • Handle the application event in your component using <aura:handler> and define an action to be executed

Create Application Event

Open developer console and navigate to File -> New -> Lightning Event.
Give your name any name and click submit. For RentACar application, we have “CarSelectedApplicationEvent” which notifies other components on a car selection. Below is the code from the same event:

<aura:event type=”APPLICATION” description=”This is application event to notify other components when a car is selected.  Other components can get the car attribute value and can handle the event accordingly.”>
<aura:attribute type=”Car__c” name=”car” />
</aura:event>

RAISING AND HANDLING COMPONENT EVENTS

Application event does not need to be registered like component event and you can directly raise or fire them from the controller. Below is a code snippet from CarTile component’s controller:

var appEvent = $A.get(“e.c:CarSelectedApplicationEvent”);
if(appEvent){
appEvent.setParams({
“car” : car,
});
appEvent.fire();
} else{
//alert(“Event not supported”);
}

To handle the event in any component, you need to define the aura handler and controller action. Below is the code snippet from CarDetails component:

<aura:handler event=”c:CarSelectedApplicationEvent” action=”{!c.onCarSelected}” />

Controller action:

onCarSelected : function(component, event, helper) {
component.set(“v.Id”, event.getParam(“car”).Id);
component.set(“v.showComponent”, true);
/*
* handle record change;
* reloadRecord will cause you to lose your current record,
* including any changes you’ve made
* */
component.find(“service”).reloadRecord();
},

Lightning Component Development Day9 - Application Event, Use LDS to Create Or Save Record

Test your knowledge

Application Events

Next In This Guide

Manish Choudhari

I am a certified Salesforce Application & System Architect and Developer working on Salesforce Technology since 2014. Currently, I have 14 Salesforce certifications along with OCPJP (Oracle Certified Profession JavaSE6 Programmer) working in Salesforce.com Hyderabad as a Technical Engineer. Writing technical blogs, learning new technologies and frameworks and sharing knowledge is my hobby.

This Post Has One Comment

Leave a Reply

Close Menu