This blog will be focusing on the two important event types provided by Salesforce Lightning framework, namely, Application Events and Component Events, and how you can pass values from one component to another.

APPLICATION EVENTS 

When you have two independent events (meaning without parent child relationship) and you want to pass values between them, then “Application Events” are the way to achieve it. Imagine you have two independent components, say A which takes User Name as the input from the user and passes the value to another component, say B, which will receive the value for doing some logic. Here are the steps:

Step 1: Create the event with the event type as Application

<aura:event type=”APPLICATION” description=”Event template”>

 <aura:attribute name=”parameter” type=”string”/> //declare the string attribute that you want to pass

</aura:event>

Step 2: Register the event in the sender component A and fire the event using the below code

//Component code

<aura:registerEvent name=”cmpEvent” type=”c:Event_Name”/> // register the event

<aura:attribute name=” UserName” type=”string”/> // attribute to be set as parameter value

<lightning:input type=”text” name=”Name” label=” User Name” value=”{!v.UserName }”/> //taking input from the user

<button onclick=”{!c.passParameter }”>Next</button> // call the JS controller method  to fire the event when the button is clicked

// JS Controller code

({   passParameter :function(component,event,helper) {

        var evt = $A.get(“e.c:Event_Name “); // get the event instance created in step 1

        evt.setParams({“parameter” : component.get(“v. UserName“)});  //set the parameter value as User Name

        evt.fire(); // fire the event

    }

})

Event_Name – File name of the event created in Step 1

Step 3: Now handle the fired event inside receiver B as shown below

// Component code

<aura:handler event=”c:Event_Name ” action=”{!c.receiveParameter}”/> // handle the event fired by A by calling the JS controller method

// JS Controller code

({

receiveParameter: function(component,event,helper) {

    var valueRecieved = event.getParam(“parameter”);  //get the parameter value from event.  Now you can do your logic with the received value

}

})

Note that any component that has a handler for the firing event can receive the parameter from the event if the event type is Application.

COMPONENT EVENTS

You need Component Events when you have to pass values from child component to parent. In this case, the sender will be the child component and the receiver will be the parent component.

Step 1: Create the event with the event type as Component

<aura:event type=”COMPONENT” description=”Event template” >         

<aura:attribute name=”parameter” type=”String”/> // declare the string attribute that you want to pass

</aura:event>

Step 2:  Register the event in the sender component (child) and fire the event using the below code

// Component code

<aura:component >

   <aura:registerEvent name=”cmpEvent” type=”c:Event_Name “/>  // register the event

<button onclick=”{!c.passParameter }”>Next</button> // call the JS controller method  to fire the event when the button is clicked

</aura:component>

// JS Controller code

({

passParameter: function(cmp, event,helper) {

var evt = $A.get(“e.c:Event_Name “); // get the event instance created in step 1

evt .setParams({“parameter” : “A component event fired me “});  //set the parameter value

evt .fire();  // fire the event

   }

})

Step 3:

// Component code

   <aura:handler name=”cmpEvent” event=”c:Event_Name” action=”{!c.receiveParameter}”/>  // handle the event fired by A by calling the JS controller method

// JS Controller code

({

receiveParameter: function(cmp, event) {

   var valueRecieved = event.getParam(“parameter”);  //get the parameter value

//The value received will be “A component event fired me”

   }

})

 Read more: Leveraging Lightning Design System for Salesforce Applications

FREQUENTLY ASKED QUESTIONS 

1. Why is it mandatory to specify the “name” attribute for both handler and register statements in Component type events?

This is because unlike the Application events, every component with a handler cannot accept the fired event. Only the Parent component of the child can receive the fired event. Hence make sure you have given the name attribute in both handler and register statements.

2. Do we need to create an event to pass values from parent to child component?

No. You can easily achieve this using aura methods. But if you have to pass values from child to parent

then component type events are all that you need. Want to know more about aura methods?

Refer here.

3. What prior knowledge should I have to start playing around with events in Lightning?

If you have a good understanding of developing a basic lightning component, then that is all you need.

For any assistance, feel free to reach out to our salesforce experts at services@suyati.com

 

 

05 Feb 2019
Author : Mehrin Sherif
Mekbot - Suyati Technologies