How to pass data from parent component to child component Using Application event in salesforce

[vijayk3327]

In this post we are going to learn about How to Use Application Event to pass attribute value from one lightning component to another in aura lightning component Salesforce.

Event-driven programming is used in many languages and frameworks, such as JavaScript and Java Swing. The idea is that you write handlers that respond to interface events as they occur.

A component registers that it may fire an event in its markup. Events are fired from JavaScript controller actions that are typically triggered by a user interacting with the user interface.

There are two types of events in the framework:

Component events are handled by the component itself or a component that instantiates or contains the component.
Application events are handled by all components that are listening to the event. These events are essentially a traditional publish-subscribe model. To know more details about Events, Clcick Here.

👉 To get source code live demo link, Click Here.

Create Lightning Component
Step 1:- Create Lightning Component : appEventCmp.cmp

`<aura:component controller="accountEventCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:registerEvent name="regAppEvent" type="c:myAppEvent"/>
<aura:attribute name="isLoading" type="Boolean" default="false"/>
<aura:attribute name="showAccDetails" type="boolean"/>

<div class="slds slds-p-around_medium">

    <lightning:card title="{!v.headerTitle}">
    <aura:set attribute="actions">
        <lightning:button variant="Neutral" label="Account Detail" onclick="{!c.findAccDetail}"></lightning:button>    
    </aura:set>
</lightning:card>


<aura:if isTrue="{!v.showAccDetails}">
    <div class="slds-modal slds-fade-in-open slds-modal_large">
        <div class="slds-modal__container">
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                    <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Account Details</h2>
            </header>

            <div class="slds-modal__content slds-p-around--medium slds-grid slds-wrap " style="height:500px;">
                <c:AccountDetailsCmp />
            </div>
            <footer class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" onclick="{!c.closeModal}">Close</button>
            </footer>
        </div>
    </div>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
<aura:if isTrue="{! v.isLoading }">
    <lightning:spinner alternativeText="Loading"/>
</aura:if>
</div>

</aura:component>`

Create JavaScript Controller
Step 2:- Create Lightning Component : appEventCmpController.js

` ({
findAccDetail : function(component, event, helper) {
helper.recordAccData(component, event, helper);
},

closeModal : function(component, event, helper){
    component.set("v.showAccDetails", false);
},

})`

Create JavaScript Helper
Step 3:- Create Lightning Component : appEventCmpHelper.js

({

recordAccData : function(component, event, helper) {
    component.set("v.showAccDetails", true);
    var rcordId = component.get("v.recordId");       
    var action = component.get("c.accItemList");
    component.set("v.showAccDetails", true);
     action.setParams({
        "recId" : rcordId
    });
    action.setCallback(this, function(response){
        var state = response.getState();
         console.log('state', state);
        if(state = "SUCCESS"){
            var result = response.getReturnValue();   
            //alert('result111 ' + JSON.stringify(result));
            //console.log('result222 ' + JSON.stringify(response.getReturnValue()));

            var appEvent = $A.get("e.c:myAppEvent");
            appEvent.setParams({
                "accItemEvntData":result,
                "accID" :rcordId
            });
            appEvent.fire();
        }
    });
    $A.enqueueAction(action);
},

})`

Create Lightning Component
Step 4:- Create Lightning Component : AccountDetailsCmp.cmp

`<aura:component controller="accountEventCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="accListItem" type="List"/>
<aura:handler event="c:myAppEvent" action="{!c.storeEventData}"/>
<aura:attribute name="accID" type="string"/>

<div class="slds slds-p-around_medium">

    <table class="slds-table slds-table--bordered slds-table--fixed-layout slds-max-Large-table--stacked-horizontal" >
      <thead>
           <tr class="slds-line-height_reset">
               <th>Name</th>
               <th>Phone</th>
               <th>Industry</th>
               <th>Type</th>
               <th>Description</th>
           </tr>
      </thead>
       <tbody>
          <aura:iteration items="{!v.accListItem}" var="item" indexVar="index"> 
           <tr>
               <td><div class="slds-truncate slds-line-clamp" title="{!item.Name}">{!item.Name}</div></td>
               <td><div class="slds-truncate slds-line-clamp" title="{!item.Name}">{!item.Phone}</div></td>
               <td><div class="slds-truncate slds-line-clamp" title="{!item.Name}">{!item.Industry}</div></td>
               <td><div class="slds-truncate slds-line-clamp" title="{!item.Name}">{!item.Type}</div></td>
               <td><div class="slds-truncate slds-line-clamp" title="{!item.Name}">{!item.Description}</div></td>
           </tr>

          </aura:iteration>     
       </tbody> 
    </table>   
</div>

</aura:component>`

Create JavaScript Controller
Step 5:- Create Lightning Component : AccountDetailsCmpController.js

` ({
doInit : function(component, event, helper) {
},

storeEventData : function(component, event, helper) {       
   helper.storeEventDataHelper(component, event, helper);
},

})`

Create JavaScript Helper
Step 6:- Create Lightning Component : AccountDetailsCmpHelper.js

`({
storeEventDataHelper : function(component, event, helper) {
var accItemEvntData = event.getParam("accItemEvntData");
var accID = event.getParam("accID");

     component.set("v.accListItem", accItemEvntData);
     component.set("v.accID", accID);

},

})`

Create Lightning Event
Step 7:- Create Lightning Event : myAppEvent.evt

<aura:event type="APPLICATION" description="Event template"> <aura:attribute name="accItemEvntData" type="accountEventCtrl[]"/> <aura:attribute name="accID" type="String"/> </aura:event>

Create Apex Class Controller
Step 8:- Create Apex Class : accountEventCtrl.apxc

` public class accountEventCtrl {

@AuraEnabled
public static List accItemList( Id recId){
List accObj = [SELECT Id, Name, Phone, Industry, TYPE, Description FROM Account WHERE Id=:recId];
system.debug('accObj ' + accObj);
RETURN accObj;
}

}`

👉 To get source code live demo link, Click Here.