The Salesforce Lightning framework offers two important event types namely Application Events and Component Events. Read this blog post to understand 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’ is the way to achieve it. Imagine you have two independent components, say A, which takes the 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 the child component to the 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 the parent to the 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.
