Component Events In Salesforce Lightning Component

Component Events In Salesforce Lightning Component by salesforce kid

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.

----------------------------------------------------
events in salesforce lightning component
----------------------------------------------------

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.
----------------------------------------------------
events in salesforce lightning component


events in salesforce lightning component
----------------------------------------------------

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" >
<!--Event Register on child component-->
 <aura:registerEvent name="cmpEvent" type="c:componentEvent"/>
5. From the handler, we can get the value from the event in parent components .JS controller.
<!--On click of button fire and event and pass the value from child to parent-->
 <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">

<!--Event handler to handle the component event value-->
  <aura:handler name="cmpEvent
                event="c:componentEvent
                action="{!c.handleEvent}"/>

<!--To store the value recieved from the child component-->
 <aura:attribute name="eventValue" type="String"/>

<!--SLDS card for parent label component-->
 <article class="slds-card">
   <div class="slds-card__header slds-grid">
     <h1>I am parent</h1>
   </div><br/>

<!-- Including child component inside parent-->
  <c:componentEventChild/><br/><br/>
    </article>

<!--SLDS card for child component response from event-->
<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">
 <!--Include parent component-->
    <c:componentEventParent/>
</aura:application>
----------------------------------------------------

Click on preview 

Output :
----------------------------------------------------
events in salesforce lightning component by salesforcekid
----------------------------------------------------

Now click on the preview button

----------------------------------------------------
events in salesforce lightning component by salesforcekid


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


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 >>

salesforcekid by ajinkya dhas
Component Events In Salesforce Lightning Component Component Events In Salesforce Lightning Component Reviewed by on Rating: 5

No comments:

HELP !! SHARE !! SUGGEST !!

Powered by Blogger.