Hi, In this scenario we have shown, how to display related contacts for Account using Lightning Component. when click on Account record, the related all contacts will be displayed below….
Apex Controller
public class AccRelatedConC{
@AuraEnabled
public static List<Account> fetchAcc (){
return [SELECT Id, Name, Phone FROM Account LIMIT 10];
}
@AuraEnabled
public static List<Contact> fetchCon (String recordId){
return [SELECT Id, Name, Phone FROM Contact WHERE AccountId=:recordId];
}
}
Lightning Component
<aura:component controller="AccRelatedConC"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="PageHeading" type="String" default="Account and Related Contacts" />
<aura:attribute name="accData" type="List"/>
<aura:attribute name="conData" type="List"/>
<aura:attribute name="show" type="boolean" default="false"/>
<aura:handler name="init" value="{!this}" action="{!c.doinit}" />
<div class=" slds-page-header slds-text-heading--large slds-align--absolute-center">
{!v.PageHeading}
</div>
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Accounts</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Account Name">Account Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accData}" var="row" indexVar="index">
<tr>
<th scope="row">
<div class="slds-truncate" >
<a onclick="{!c.showCon}" value="{!row}" data-index="{!index}">{!row.Name} </a>
</div>
</th>
<td><div class="slds-truncate" title="{!row.Phone}">{!row.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
<br/>
<aura:if isTrue="{!v.show}">
<div class="slds-section slds-is-open">
<h3 class="slds-section__title slds-theme_shade">
<span class="slds-truncate slds-p-horizontal_small" title="Section Title">Related Contact Details</span>
</h3>
<br/>
<table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
<thead>
<tr class="slds-text-heading--label">
<th scope="col"><div class="slds-truncate" title="Contact Name">Contact Name</div></th>
<th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.conData}" var="row2">
<tr>
<th scope="row"><div class="slds-truncate" title="{!row2.Name}">{!row2.Name}</div></th>
<td><div class="slds-truncate" title="{!row2.Phone}">{!row2.Phone}</div></td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
</aura:if>
</aura:component>
js Controller
({
doinit : function(component, event, helper) {
var action = component.get('c.fetchAcc');
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + allValues);
component.set('v.accData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
},
showCon : function(component, event, helper){
component.set("v.show",true);
var idx = event.target.getAttribute('data-index');
console.log('idx---->>> ' + idx);
var rowRecord = component.get("v.accData")[idx];
console.log('rowRecord---->>> ' + JSON.stringify(rowRecord));
var action = component.get('c.fetchCon');
action.setParams({recordId : rowRecord.Id});
action.setCallback(this, function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
component.set('v.conData', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
Application
<aura:application extends="force:slds">
<c:accountContactDisplay />
</aura:application>
Output