salesforcesky.com

Learn Salesforce Anywhere Anytime

Theme Switch

EVENTS IN AURA COMPONENT

Loading

COMPONENT EVENT – 

Component events are handled by the same component that fires the event or by the component that contains the component that fire the event 

APPLICATION EVENT –

Application events are handled by those who are listening to the Application event. These events are based on the publish-subscribe model.

EXAMPLE OF THE COMPONENT EVENT –

Usecase: When a user in the child component click on a button message need to be set in the component event and fire the event by the same component and handled over the Parent component

Component Event – 

<!-- EXAMPLE OF THE COMPONENT EVENT -->
<aura:event type="COMPONENT">
   <aura:attribute name="msg" type="String"/>
</aura:event>

Child Component – 

<!-- CHILD COMPONENT -->
<aura:component>
   <aura:registerEvent name="cmpoEvent" type="c:ceEvent"/>
 
   <h1>Component Event Example</h1>
   <p><lightning:button
       label="Fire Component Event"
       onclick="{!c.fireNow}" />
   </p>
</aura:component>

Child Controller – 

{
   fireNow : function(component, event) {
       // Get the component event by using the
       // name value from aura:registerEvent
       var compEvent = 
component.getEvent("cmpoEvent");
       compEvent.setParams({
           "message": "I am setting message 
from the child component to the parent 
component by the help of a component and 
this is my Component event example" });
       compEvent.fire();
   }
}

Parent Component – 

<!-- PARENT COMPONENT -->
<aura:component>
   <aura:attribute name="messageFromChildEvent" type="String"/>
   <aura:attribute name="numOfEvents" type="Integer" default="0"/>
 
   <!-- Note that name="cmpEvent" in aura:registerEvent
    in ceNotifier.cmp -->
   <aura:handler name="cmpEvent" event="c:ceEvent" action="{!c.handleCE}"/>
 
   <!-- handler contains the notifier component -->
   <c:childComponent/>
  
   <p>{!v.messageFromChildEvent}</p>
   <p>Number of events: {!v.numOfEvents}</p>
 
</aura:component>

Parent Controller

{
   handleCE : function(component, event) {
       var message = event.getParam("msg");
 
       // set the handler attributes based on event data
       component.set("v.messageFromChildEvent", message);
       var numEventsHandled = parseInt(component.get("v.numOfEvents")) + 1;
       component.set("v.numEvents", numEventsHandled);
   }
}

To test this out you need to place your parent component in a lightning application and test it out 

<aura:application extends=”force:slds” >
  <c:ParentComponent/>
</aura:application>

EXAMPLE OF THE APPLICATION EVENT –

Usecase: Event is fired by Component A and Handled by Component B 

Application Event ( aEvent )

<!-- EXAMPLE OF THE APPLICATION EVENT -->
<aura:event type="APPLICATION">
   <aura:attribute name="msg" type="String"/>
</aura:event>

Component A 

<aura:component>
   <aura:registerEvent name="appEvent" type="c:aEvent"/>
 
   <h1>EXAMPLE OF THE APPLICATION EVENT</h1>
 
   <p><lightning:button
       label="Click Now for Firing the Application Event"
       onclick="{!c.fireEvent}" />
   </p>
</aura:component>

Controller A 

{
   fireApplicationEvent : function(component, event) {
       var apEvent = $A.get("e.c:aEvent");
       apEvent.setParams({
           "message" : "I’M FIRING THE EVENT AND 
SET A MESSAGE FROM ONE COMPOENT TO ANOTHER 
hEY hOW ARE YOU WELCOME TO SALESFORCE SKY" });
       apEvent.fire();
   }
}

Component B

<aura:component>
   <aura:attribute name="messageEvent" type="String"/>
   <aura:attribute name="numOFEvents" type="Integer" default="0"/>
 
   <aura:handler event="c:aEvent" action="{!c.handleAppEvent}"/>
 
   <p>{!v.messageEvent}</p>
   <p>Number of events: {!v.numOFEvents}</p>
</aura:component>

Controller B 

{
   handleAppEvent : function(component, event) {
       var message = event.getParam("msg");
 
       // set the handler attributes based on event data
       component.set("v.messageEvent", message);
       var numEventsHandled = parseInt(component.get("v.numOFEvents")) + 1;
       component.set("v.numOFEvents", numEventsHandled);
   }
}

Now put both the component in a parent component

<!--Parent Component-->
<aura:component>
   <c:A/>
   <c:B/>
</aura:component>

Place your Parent Component in a Lightning App to Test it Out

<aura:application extends=”force:slds” >
  <c:ParentComponent/>
</aura:application>

STANDARD EVENTS – 

Standard events are the ones that are by default came with the framework, so we don’t need to create them we can use them on our own. Like init, show toast etc