salesforcesky.com

Learn Salesforce Anywhere Anytime

Theme Switch

EXAMPLE OF THE AURA COMPONENT

Loading

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: