Application Events In Salesforce Lightning Framework
In Salesforce Lightning, if we need to pass data from one component to another within an application , we can use Lighting Events.
For example: you have an Account’s datatable, and you need to pass Account’s ID for the selected account and to another Lightning component. For this, you need to create an Lightning Application event. This event would get fired from the Account component and handled in the Contacts component. First, create an Application Event.
Don't forget to check out: The DreamPlace For ISVs – Salesforce AppExchange
<aura:event type="APPLICATION" description="Event template" >
<aura:attribute name="Pass_AccountId" type="Id"/>
</aura:event>
Lightning Application:
<aura:application extends="force:slds">
<c: AccountContactIterationPlusSign/>
<c: AccountContactIterationChildCmp/>
</aura:application>
Now, create a Lightning Component, which would iterate Account’s Name. It also contain a <lightning:button> on whose click, All contacts related to that Account which would get displayed below the Account’s name.
Account Component:
<aura:component controller=' PassAccountIdApplicationEvent>
<aura:attribute name="accountList" type="Account[]"/>
<aura:attribute name="checkButtonID" type="Id"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<form>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">
<thead>
<tr class="slds-text-title_caps">
<th scope="col">
<div class="slds-truncate" title="Account Name">Account Name</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accountList}" var="accountRecord">
<tr>
<td>
<lightning:button iconName="utility:add" variant="bare" name="{!accountRecord.Id}" onclick="{! c.handleClick }" />
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="">{!accountRecord.Name}</div>
<aura:if isTrue="{!v.checkButtonID == accountRecord.Id}">
<c:AccountContactIterationChildCmp aura:id="AccountContactIterationChildCmp"/>
</aura:if>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</form>
</aura:component>
Here in handleClick Method, you would then pass “Pass_AccountId” and will fire the event.
Account Controller:
({
doInit : function(component, event, helper) {
helper.queryAccountFieldsMethod(component);
},
handleClick:function (component, event, helper) {
var accountID = event.getSource().get('v.name');
component.set('v.checkButtonID', accountID);
//alert("rowId"+accountID);
var evt = $A.get("e.c: AccountContactIterationEvent");
evt.setParams({ "Pass_AccountId": accountID});
evt.fire();
}
})
Account Helper:
({
queryAccountFieldsMethod : function(component) {
// Call class's method 'accountResults' to get accounts
var action = component.get("c.accountResults");
action.setCallback(this,function(response){
var state = response.getState();
if(state == "SUCCESS"){
// Set the value in Account datatable
component.set("v.accountList", response.getReturnValue());
}else{
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(action);
},
})
Apex Class:
public class PassAccountIdApplicationEvent {
@AuraEnabled
//Method to get all accounts related to search keyword
public static List<Account> accountResults() {
List < Account > accountList = [Select Id, Name, Phone,Industry, Website FROM Account LIMIT 5000];
return accountList;
}
//Method to get all Contacts related to selected account
@AuraEnabled
public static List<Contact> getContactsList(Id recordId){
List<Contact> contactList = [Select Id,
FirstName,
LastName,
Name
FROM Contact
WHERE AccountId=: recordId ];
return contactList;
}
}
Contact Component:
<aura:component controller=PassAccountIdApplicationEvent>
<aura:attribute name="contactList" type="Contact[]"/>
<aura:attribute name="contactColumns" type="List"/>
<aura:attribute name="Pass_AccountId" type="Id" />
//Handle the Application event
<aura:handler event="c:AccountContactIterationEvent" action="{!c.getAccountIDFromApplicationEvent}"/>
<!-- AccountContactIterationEvent-->
<form>
<aura:if isTrue="{!not(empty(v.contactList))}">
<aura:iteration items="{!v.contactList}" var="contactRecord">
{!contactRecord.Name}<br/>
</aura:iteration>
</aura:if>
</form>
</aura:component>
Check out another amazing blog by Krati here: Salesforce Apex Trigger Handler | The Developer Guide
Here, when you get the Account Id you can pass it to helper and get the result you required, here it is fetching contact’s name.
Contact Controller:
({
getAccountIDFromApplicationEvent : function(component, event, helper) {
var accountId = event.getParam("Pass_AccountId");
//alert("accountId"+accountId);
helper.accountContactMethod(component,accountId);
}
})
Contact Helper:
({
helperMethod : function() {
},
accountContactMethod: function(component,accountId){
var action = component.get("c.getContactsList");
action.setParams({
"recordId" : accountId
});
action.setCallback(this,function(response){
var state = response.getState();
if(state == "SUCCESS"){
// Set the value in Contact List
component.set("v.contactList", response.getReturnValue());
if(response.getReturnValue().length == 0){
alert('There are no contacts');
}
}else{
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(action);
},
})
