USE CASE: Show the list of all the accounts present in an org in Accordions, and inside the body of the Accordion display all Contacts under that Account
Component – (AccountAndContacts)
<!-- Code by SalesforceSky.com -->
<aura:component controller="AccountAndContacts"
implements="flexipage:availableForAllPageTypes,
forceCommunity:availableForAllPageTypes,force:appHostable"
access="global">
<lightning:navigation aura:id="navigation"/>
<aura:attribute name="myContact" type="Contact"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!--Markup start-->
<div class="slds-card">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center
slds-has-flexi-truncate">
<div class="slds-media__figure">
<lightning:Icon
iconName="standard:account" size="small"
class="slds-icon slds-input__icon slds-input__icon_right " />
</div>
</header>
</div>
<lightning:accordion aura:id="accordion" activeSectionName="B">
<aura:iteration items="{!v.myContact}" var="con">
<lightning:accordionSection label="{!con.Name}" >
<aura:set attribute="body">
<!-- Accordian Body -->
<c:OrderData conId="{!con.Id}"/>
<lightning:button label="Create Order"
variant="brand" onclick="{!c.doCreate}"/>
</aura:set>
</lightning:accordionSection>
</aura:iteration>
</lightning:accordion>
<footer class="slds-card__footer"></footer>
</div>
<!--Markup ends-->
</aura:component>
Controller –
/* Code by Salesforcesky.com */
({
doInit : function(component, event, helper) {
helper.getContactData(component);
},
doCreate : function(component, event, helper) {
var pageReference = component.find("navigation");
// alert('yaha hun yr hunn Navigation me');
var pageReferenceNav = {
"type": "standard__component",
"attributes": {
"componentName": "c__CreateOrdersNav"
},
"state": {
"myAttr": component.get("v.myOrderId")
}
};
pageReference.navigate(pageReferenceNav);
}
//Page Reference
})
Helper
/* Code by Salesforcesky.com */
({
getContactData : function(component) {
var action = component.get("c.getContacts");
action.setCallback(this,function(response){
var state = response.getState();
if(state === 'SUCCESS'){
var responseValue = response.getReturnValue();
component.set("v.myContact",responseValue);
}else if(state=== 'ERROR'){
}else if(state=== 'INCOMPLETE'){
}
},'ALL');
$A.enqueueAction(action);
},
})
Apex Controller – ( AccountAndContacts )
//Code by Salesforcesky.com
public class getOrdersData {
@AuraEnabled
public static List<Contact> getContacts(){
List<Contact> myOrder =
[Select id, Name FROM Contact WHERE RecordType.Name = 'Customer'];
return myOrder;
}
}
Add the Component in the Testing Application
<aura:application extends="force:slds" >
<c:AccountAndContacts />
</aura:application>
Here is the Preview:
