Events in Salesforce Lightning Component

COMPONENT LIGHTNING EVENTS:

In Salesforce, the Component Lightning Events are used to interact between the Lightning Components or in other words, we can say that it is the intermediate stage between the components to communicate.

Don’t forget to check out: Image Uploader: An Amazing Lightning Component

# FLOW OF LIGHTNING EVENTS:

STEP 1:

Create an Event.

STEP 2:

Register an Event.

STEP 3:

Fire an Event.

STEP 4:

Handle an Event.

TYPES OF LIGHTNING EVENT:

There are two types of Custom Events in Lightning that are as follows-

1. COMPONENT EVENT:

A component event in the lightning component is an event that is fired by another lightning component. A component event can either be managed by the component itself or it can be managed by any of another component that is already present in the hierarchy that gets that particular event. The component events can only be registered in the child components and handled by the parent component.

1.1) STEPS OF COMPONENT EVENT:

1.1.1)  CREATE A EVENT COMPONENT:

<<...AccEvent.evt…>>

<aura:event type=”COMPONENT”>
    <aura:attribute name = “AccRecord” type = ”Account”/>
</aura:event>

NOTE: Attribute is the information passed from firing component to handling component.

1.1.2)   REGISTER THE EVENT (In Child Component):

{Register Event}

<aura:registerEvent name = ”cmpAccEvent” type = “c:AccEvent”/>

Where  “cmpAccEvent”(name) = Name of Event to be fired.  &

“c:AccEvent”(type) = For registering the event the Type is used to give all the information of Event which is going to be registered.

1.1.3)  FIRE THE EVENT(From Child Component):

{Fire Event}

({
    fireComponentEvent : function(cmp,event) {
        Var cmpEvent = cmp.getEvent(“cmpAccEvent”);
        cmpEvent.setParams({“AccRecord” : cmp.get(“v.newAccount”)});cmpEvent.fire();
    }
})

Where “getEvent()” Method is used to get the registered event.   &

“Fire()” Method is used to fire the event.

1.1.4)  HANDLE THE EVENT(In Parent Event):

{Handle Event}

<...Note that name = “cmpAccEvent” in aura:registerEvent in AccNotifier.cmp…>

<aura:handler name = “cmpAccEvent” event = “c.AccEvent” action = “{!c.handlerComponentEvent”}>

NOTE: “aura:handler” tag is used to handle and receive the event.

2) APPLICATION EVENT:

An application event in the lightning component is generally like a broadcast message. Just take an example that if you are going to send a broadcast message, then all the receivers that are configured to accept that broadcast message are going to receive that particular message. On the other hand, an application event is fired by that component and all other types of other components that have the handler defined to receive that event are notified on the time when the event is fired. It is the opposite of component events because the Application events are not bound by a hierarchy or relationship.

2.1)  STEPS OF APPLICATION  EVENT-

2.1.1)  CREATE A APPLICATION EVENT:

<...c:appEvent...>

<aura:event type = “APPLICATION”>
    <aura:attribute name = “message” type = “String”/>
</aura:event>

NOTE: Attribute is the information passed from firing component to handling component.

2.1.2)  REGISTER THE EVENT:

{Register Event}

<aura:registerEvent name = “appEvent” type = “c.appEvent”/>

Where  “appEvent”(name) = Name of Event to be fired.  &

“c:appEvent”(type) = For registering the event the Type is used to give all the information of Event which is going to be registered.

2.1.3)  FIRE THE EVENT:

{Fire Event}

var appEvent = $A.get(“e.c:appEvent”);
appEvent.fire();

NOTE:  You can use the $A.get(“e.myNamespace:myAppEvent”) in your org to receive an instance of myAppEvent event in the myNamespace namespace.

NOTE: Use fire() to fire the event.

2.1.4)  HANDLE THE EVENT:

{Handle Event}

<aura:handler event = “c.appEvent” action =“{c.handlerApplicationEvent}”/>

NOTE: “aura:handler” tag is used to handle and receive the event.