Article

A Guide to Application and Component Events in Salesforce Lightning

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 itsolutions@milestone.tech.

Facebook
Twitter
LinkedIn
Categories

Select a Child Category
category
66a2018442943
1
0
226,352,350
Loading....
Recent Posts
Social Links

Related Posts

Want to Learn More?

Milestone experts take the time to listen, understand your needs, and provide the right mix of tools, technology, and resources to help you meet your goals.

Request a complimentary consultation to get started.

Request a Complimentary Consultation

Skip to content