Hey guys, today 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.
Files we used to Application event in Lightning Component â
appEventCmp.cmp | Lightning Component | It is used to click function to display record based on record Id. |
appEventCmpController.js | JavaScript Controller | It is hold Javascript findAccDetail fnction to connect javascript controller to helper function. |
appEventCmpHelper.js | JavaScript Controller Helper | It is hold Javascript recordAccData function to get the record based on record Id and pass the attribute event value. |
AccountDetailsCmp.cmp | Lightning Component | It is child component and iterating data from salesforce object. |
AccountDetailsCmpController.js | JavaScript Controller | It is hold Javascript storeEventData fnction to connect javascript helper function. |
AccountDetailsCmpHelper.js | JavaScript Controller Helper | It is hold Javascript storeEventData fnction and get event value that is coming from parent component. |
accountEventCtrl.apxc | Apex Class Controller | It is used to get Account Record based on Record Id in Apex Method. |
myAppEvent.evt | Lightning Event | It is used to store the attributes value and pass from parent to child component through javascript register/handler Event in component. |
Final Output â
You can download file directly from github by Click Here.
Other related post that would you like to learn in Salesforce
- Find the below steps âž
Create Lightning Component
Step 1:- Create Lightning Component : appEventCmp.cmp
From Developer Console >> File >> New >> Lightning Component
appEventCmp.cmp [Lightning Component File]
![]() |
<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
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
appEventCmpController.js [JavaScript Controller]
![]() |
({
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
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
appEventCmpHelper.js [JavaScript Helper File]
![]() |
({
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
From Developer Console >> File >> New >> Lightning Component
AccountDetailsCmp.cmp [Lightning Component File]
![]() |
<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
From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller
AccountDetailsCmpController.js [JavaScript Controller]
![]() |
({
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
From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper
AccountDetailsCmpHelper.js [JavaScript Helper File]
![]() |
({
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
From Developer Console >> File >> New >> Lightning Event
myAppEvent.evt [Lightning Event File]
![]() |
<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
From Developer Console >> File >> New >> Apex Class
accountEventCtrl.apxc [Apex Class Controller]
![]() |
public class accountEventCtrl {
@AuraEnabled
public static List<Account> accItemList( Id recId){
List<Account> accObj = [SELECT Id, Name, Phone, Industry, TYPE, Description FROM Account WHERE Id=:recId];
system.debug('accObj ' + accObj);
RETURN accObj;
}
}
Further post that would you like to learn in Salesforce
What is event propagation in Aura component?
What is event propagation in Aura component? Image result for event propagation in aura Event propagation determines how you communicate in your application. The event propagation rules determine which components in the containment hierarchy can handle events in the bubble or capture phase. The framework supports capture and bubble phases for component event propagation.
How do you stop event propagation in Aura component?
Any handling event can stop propagation by calling stopPropagation() on the event. Bubble phase :-The framework executes the bubble phase from the source component to the application root until all components are traversed or stopPropagation() is called.
What are the three phases of event propagation in JS?
There are three different phases during lifecycle of an JavaScript event. They follow the same order as listed above. Capturing Phase is when event goes down to the element. Target phase is when event reach the element and Bubbling phase is when the event bubbles up from the element.
Related Topics | You May Also Like
Our Free Courses â
đ Get Free Course â
![]() đ Salesforce Administrators đ Salesforce Lightning Flow Builder đ Salesforce Record Trigger Flow Builder |
đ Get Free Course â
![]() đ Aura Lightning Framework đ Lightning Web Component (LWC) đ Rest APIs Integration |