Component Events In Salesforce Lightning Component

Component Event In Salesforce Lightning

In the previous EPISODE we discussed, How to use wrapper class in with a simple example.

In this episode, we are going to discuss events in salesforce lightning framework.

Let's begin...

WHAT EXACTLY EVENTS IN LIGHTNING ARE ?

When we are talking about the Aura framework or Aura based lightning component where we build an application. Which consist of multiple components in it. As well as a single lightning component with which consist of parent-child components.

So whenever we want to communicate from parent component to child component, we include child component inside the parent component. This is called a component composition in lightning.

For example :

parentComponent.cmp

----------------------------------------------------

<aura:component>

<aura:attribute name="valueToChild"

value="String">

<h1>This is parent component</h1>

//Including child component in parent

<c:childComponent value="{v.valueToChild}"/>

</aura:component>

----------------------------------------------------

In the above example, I have included child component inside a parentComponent.cmp as well as I m passing a valueToChild attribute value so that childCompoent can use this value.

let's have a look at below picture :

----------------------------------------------------

events in salesforce lightning component

----------------------------------------------------

The above picture shows the communication path from parent to child component

Parent To Child Component Communication :

In parent to child component communication, we can communicate by passing value from parent to child as explained above example.

But when we want to communicate from Child To Parent we cannot directly pass value inside an attribute. In that case, we use lightning Events ⚡️

There are two types of events in salesforce lightning framework :

1. COMPONENT EVENTS :

When we need to communicate in the same component [Parent-Child Chain] then we use Component Events in lightning component. This event will be registered on the child component and handled on the parent.

2. APPLICATION EVENTS :

When you have a publish-subscribe model, like when I publish any post all my friends can see my post on Facebook. This event model is irrespective of any components. In an application event, you can communicate with any component wherever your handler is defined.

In this EPISODE we are more interested in COMPONENT EVENTS.

In the Component event, we will try to achieve the reverse communication i.e. child to parent as mention in the below picture.

----------------------------------------------------

To implement COMPONENT EVENTS we need to follow these simple steps :

----------------------------------------------------

1. Create a lightning event with type COMPONENT.

2. Register an event on child component which will pass the value to a parent component.

3. Then we will fire() the event from child component's .JS controller.

4. Then create an event handler on a parent component to handle the event value.

5. From the handler, we can get the value from the event in parent components .JS controller.

6. And then finally we can store that in any Javascript variable and use it.

----------------------------------------------------

So let's follow these steps and understand it completely Kid...🤓

before begin let's have a look at today's recipe.

----------------------------------------------------

Ready.....Steady......Go...

To begin with, we need to create :

----------------------------------------------------

EVENT :

componentEvent.evt

----------------------------------------------------

COMPONENT :

1. Parent Component

componentEventParent.cmp

componentEventParent.js

2. Child Component

componentEventChild.cmp

componentEventChild.js

----------------------------------------------------

Now let's follow the above STEPS to understand component events :

STEP 1 : Create a lightning event with type COMPONENT.

----------------------------------------------------

events in salesforce lightning component by salesforcekid

----------------------------------------------------

Create a new Lightning Event with name componentEvent.

componentEvent.evt

----------------------------------------------------

<aura:event type="COMPONENT">

<aura:attribute name="eventResponse" type="String"/>

</aura:event>

----------------------------------------------------

STEP 2 : Register an event on child component which will pass the value to a parent component.

Create a child lightning component first called as componentEventChild.

componentEventChild.cmp

----------------------------------------------------

<aura:component implements="force:appHostable,

flexipage:availableForAllPageTypes" access="global" >

<aura:registerEvent name="cmpEvent" type="c:componentEvent"/>

5. From the handler, we can get the value from the event in parent components .JS controller.

<button class="slds-button slds-button_brand"

onclick="{!c.onclick}">Child Button</button>

</aura:component>

----------------------------------------------------

STEP 3 : Then we will fire() the event from child component's .JS controller.

componentEventChild.js

----------------------------------------------------

({

onclick : function(component, event, helper) {

//get the event

var event = component.getEvent("cmpEvent");

//set the response value inside eventResponse of componentEvent attribute

event.setParams({

"eventResponse" : "This is response from child "

});

//fire the event

event.fire();

}

})

----------------------------------------------------

STEP 4 : Then create an event handler on a parent component to handle the event value.

Create a parent component called componentEventParent.

componentEventParent.cmp

----------------------------------------------------

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">

<aura:handler name="cmpEvent"

event="c:componentEvent"

action="{!c.handleEvent}"/>

<aura:attribute name="eventValue" type="String"/>

<article class="slds-card">

<div class="slds-card__header slds-grid">

<h1>I am parent</h1>

</div><br/>

<c:componentEventChild/><br/><br/>

</article>

<article class="slds-card">

<h1>I am child component</h1>

<div class="slds-card__header slds-grid slds-text-heading_large">

{!v.eventValue}

</div>

</article>

</aura:component>

----------------------------------------------------

STEP 5 : From the handler, we can get the value from the event in the parent component .JS controller.

STEP 6 : And then finally we can store that in any Javascript variable and use it.

componentEventParent.js

----------------------------------------------------
({

handleEvent : function(component, event, helper)

{

//get response value fired from parent

var response = event.getParam("eventResponse");

//Set the value recieved from the event

component.set("v.eventValue", response);

}

})

----------------------------------------------------

Coooool !! let's create an aura application to preview this functionality.

Create an aura application called as componentEventApp and include parent component.

componentEventApp.app

----------------------------------------------------

<aura:application extends="force:slds">

<c:componentEventParent/>

</aura:application>

----------------------------------------------------

Click on preview

Output :

----------------------------------------------------

Now click on the preview button

----------------------------------------------------

Wooooo......And Finally Kid you did it. In this cool way, we can pass value from child component to child by following these simple steps.

In the next EPISODE, we will discuss how to use Application events in salesforce lightning component.

WOHOOO !! YOU HAVE JUST COMPLETED COMPONENT EVENTS IN SALESFORCE LIGHTNING COMPONENT EPISODE
If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you all
Happy Learning ☁️⚡️ (Learn. Help. Share.) 😊

<< PREVIOUS NEXT >>