+ Start a Discussion
sheila srivatsavsheila srivatsav 

display account and related contact using accordion

My requirement is to display Account and its related contacts using accordion and accordion section.

I am able to display account and when I expand account it will show Rating and Phone but Under each account I want a separate accordion to show contact firstname and contact lastname.

Here's my code
public with sharing class MyController {

    @AuraEnabled
    public static List<Account> showAccountsForAccordion()
    {
        List<Account> accList = [select Id,Name,Rating,Phone,(select firstname,lastname from contacts)
                                 FROM 
                                 Account
                                 Order By name LIMIT 4];
        return accList;
    }
}

<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyController"
                access="global" >
	
    <aura:attribute name="accnList"
                    type="List"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <div class="demo-only slds-grid" style="height: 150px; width: 300px; padding: 2rem;">
    <div class="slds-is-fixed">
    <div style="position: absolute; top: 1rem; left: 1rem; border: 1px solid red; background: rgb(244, 246, 249);">
    
    <lightning:accordion>
          <aura:iteration items="{!v.accnList}" 
                          var="acc">
              
              <lightning:accordionSection name="{!acc.Name}" 
                                          label="{!acc.Name}">
                  
                   <aura:set attribute="body">
                       
                        <p>Rating : {!acc.Rating}</p>
                        <p>Phone : {!acc.Phone}</p>
                      
                    </aura:set>
                  
                  </lightning:accordionSection>
              
              <aura:iteration items="{!v.accnList.contacts}" 
                                  var="con">
                  <lightning:accordionSection name="{!con.Name}" 
                                              label="{!con.Name}">
                  
                   <aura:set attribute="body">
                       
                        <p>FirstName : {!con.FirstName}</p>
                        <p>LastNamePhone : {!con.LastName}</p>
                      
                    </aura:set>
                   </lightning:accordionSection>
                       </aura:iteration>
      </aura:iteration>
      </lightning:accordion>
  </div>
</div>
         </div>
</aura:component>


({
	doInit : function(component, event, helper) {
		
        debugger;
        var action=component.get('c.showAccountsForAccordion');
        
        action.setCallback(this,function(response){
            
            debugger;
            var state = response.getState();
            console.log('state ='+state);
            if (component.isValid() && state === "SUCCESS") {
               
                component.set("v.accnList", response.getReturnValue());
                console.log('v.accnList='+response.getReturnValue());
              }
        });$A.enqueueAction(action);
        
	}
})

Please tell me how to achieve this.

thanks
sheila
Best Answer chosen by sheila srivatsav
Maharajan CMaharajan C
Hi Sheila,

I have found some issues in your code:

1. Account Contact relation ship Name : It's not contacts  --> Contacts in Lightning component:

2. Add the contact Name field in Soql Query.

I have tried the below code it's working fine to me. And i have used the Accordion inside Accordion to display the contacts inside the Account.

Component :

<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyController"
                access="global" >
    
    <aura:attribute name="accnList"
                    type="List"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <div class="demo-only slds-grid" style="height: 150px; width: 300px; padding: 2rem;">
        <div class="slds-is-fixed">
            <div style="position: absolute; top: 1rem; left: 1rem; border: 1px solid red; background: rgb(244, 246, 249);">
                
                <lightning:accordion>
                    <aura:iteration items="{!v.accnList}" 
                                    var="acc">
                                                
                <lightning:accordionSection name="{!acc.Name}" 
                                                        label="{!acc.Name}">    
                        
                        <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                               role="grid">
                            <thead>
                                <tr>
                                    <p>Rating : {!acc.Rating}</p>
                                </tr>
                                <tr>
                                    <p>Phone : {!acc.Phone}</p>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="slds-hint-parent">
                                   
                                   <lightning:accordion>
                                    <aura:iteration items="{!acc.Contacts}" 
                                                    var="con">
                                        <lightning:accordionSection name="{!con.Name}" 
                                                                    label="{!con.Name}">
                                            
                                            <aura:set attribute="body">
                                                
                                                <p>FirstName : {!con.FirstName}</p>
                                                <p>LastNamePhone : {!con.LastName}</p>
                                                
                                            </aura:set>
                                        </lightning:accordionSection>
                                    </aura:iteration>
                                </lightning:accordion> 
                                    
                                </tr>
                                
                        </tbody>
                    </table>

                                
                            </lightning:accordionSection>
                            
                        </aura:iteration>
                    </lightning:accordion>
                </div>
            </div>
        </div>
    </aura:component>
=========================

Controller :

({
    doInit : function(component, event, helper) {
        
        var action=component.get('c.showAccountsForAccordion');
        
        action.setCallback(this,function(response){
            var state = response.getState();
            console.log('state ='+state);
            if (component.isValid() && state === "SUCCESS") {
               
                component.set("v.accnList", response.getReturnValue());
                console.log('v.accnList='+JSON.stringify(response.getReturnValue()));
              }
        });$A.enqueueAction(action);
        
    }
})
==========================
Apex Class:

public with sharing class MyController {

@AuraEnabled
public static List<Account> showAccountsForAccordion()
{
List<Account> accList = [select Id,Name,Rating,Phone,(select firstname,Name,lastname from contacts)
FROM
Account
Order By name LIMIT 4];
return accList;
}
}


O/p:

User-added image

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!


Thanks,
Maharajan.C

All Answers

Raj VakatiRaj Vakati
Refer this link 

Just replace book and Book_Categories__c to Account and contact

https://rajvakati.com/2018/02/18/lightning-accordion-component-example/

 
Maharajan CMaharajan C
Hi Sheila,

I have found some issues in your code:

1. Account Contact relation ship Name : It's not contacts  --> Contacts in Lightning component:

2. Add the contact Name field in Soql Query.

I have tried the below code it's working fine to me. And i have used the Accordion inside Accordion to display the contacts inside the Account.

Component :

<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyController"
                access="global" >
    
    <aura:attribute name="accnList"
                    type="List"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <div class="demo-only slds-grid" style="height: 150px; width: 300px; padding: 2rem;">
        <div class="slds-is-fixed">
            <div style="position: absolute; top: 1rem; left: 1rem; border: 1px solid red; background: rgb(244, 246, 249);">
                
                <lightning:accordion>
                    <aura:iteration items="{!v.accnList}" 
                                    var="acc">
                                                
                <lightning:accordionSection name="{!acc.Name}" 
                                                        label="{!acc.Name}">    
                        
                        <table class="slds-table slds-table--bordered slds-table--cell-buffer slds-table--striped slds-max-medium-table--stacked-horizontal"
                               role="grid">
                            <thead>
                                <tr>
                                    <p>Rating : {!acc.Rating}</p>
                                </tr>
                                <tr>
                                    <p>Phone : {!acc.Phone}</p>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="slds-hint-parent">
                                   
                                   <lightning:accordion>
                                    <aura:iteration items="{!acc.Contacts}" 
                                                    var="con">
                                        <lightning:accordionSection name="{!con.Name}" 
                                                                    label="{!con.Name}">
                                            
                                            <aura:set attribute="body">
                                                
                                                <p>FirstName : {!con.FirstName}</p>
                                                <p>LastNamePhone : {!con.LastName}</p>
                                                
                                            </aura:set>
                                        </lightning:accordionSection>
                                    </aura:iteration>
                                </lightning:accordion> 
                                    
                                </tr>
                                
                        </tbody>
                    </table>

                                
                            </lightning:accordionSection>
                            
                        </aura:iteration>
                    </lightning:accordion>
                </div>
            </div>
        </div>
    </aura:component>
=========================

Controller :

({
    doInit : function(component, event, helper) {
        
        var action=component.get('c.showAccountsForAccordion');
        
        action.setCallback(this,function(response){
            var state = response.getState();
            console.log('state ='+state);
            if (component.isValid() && state === "SUCCESS") {
               
                component.set("v.accnList", response.getReturnValue());
                console.log('v.accnList='+JSON.stringify(response.getReturnValue()));
              }
        });$A.enqueueAction(action);
        
    }
})
==========================
Apex Class:

public with sharing class MyController {

@AuraEnabled
public static List<Account> showAccountsForAccordion()
{
List<Account> accList = [select Id,Name,Rating,Phone,(select firstname,Name,lastname from contacts)
FROM
Account
Order By name LIMIT 4];
return accList;
}
}


O/p:

User-added image

Can you please Let me know if it helps or not!!!

If it helps don't forget to mark this as a best answer!!!


Thanks,
Maharajan.C
This was selected as the best answer
karthikeyan perumalkarthikeyan perumal
Hello, 

Its small chnages in your code.

change you component like below, 

<aura:iteration items="{!v.accnList.contacts}"     var="con"> you need to chnage this line to like below 

<aura:iteration items="{!acc.contacts}"     var="con"> that the issue. you design is good.
<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="MyLighController"
                access="global" >
	
    <aura:attribute name="accnList"
                    type="List"/>
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <div class="demo-only slds-grid" style="height: 150px; width: 300px; padding: 2rem;">
    <div class="slds-is-fixed">
    <div style="position: absolute; top: 1rem; left: 1rem; border: 1px solid red; background: rgb(244, 246, 249);">
    
    <lightning:accordion>
          <aura:iteration items="{!v.accnList}" 
                          var="acc">
              
              <lightning:accordionSection name="{!acc.Name}" 
                                          label="{!acc.Name}">
                  
                   <aura:set attribute="body">
                       
                        <p>Rating : {!acc.Rating}</p>
                        <p>Phone : {!acc.Phone}</p>
                      
                   
                  
                  
              
              <aura:iteration items="{!acc.Contacts}" 
                                  var="con">
                  <lightning:accordionSection name="{!con.FirstName}" 
                                              label="{!con.LastName}">
                  
                   <aura:set attribute="body">
                       
                        <p>FirstName : {!con.FirstName}</p>
                        <p>LastNamePhone : {!con.LastName}</p>
                      
                    </aura:set>
                   </lightning:accordionSection>
                       </aura:iteration>
                   </aura:set>
                  </lightning:accordionSection>
              
      </aura:iteration>
      </lightning:accordion>
  </div>
</div>
         </div>
</aura:component>

hope this will help you, 

Thanks
karthik
 
megha patil 16megha patil 16
 use 'slds accordion' to show Account and it's Opportunities ?
SAGAR BAWANESAGAR BAWANE
http://www.shayaripe.com/2020/04/good-morning-shayari.html 
http://www.shayaripe.com/2020/04/love-shayari-image.html
SAGAR BAWANESAGAR BAWANE
www.shayaripe.com/2020/04/good-morning-shayari.html 
www.shayaripe.com/2020/04/love-shayari-image.html
SAGAR BAWANESAGAR BAWANE
www.shayaripe.com/2020/04/good-morning-shayari.html 
www.shayaripe.com/2020/04/love-shayari-image.html

nice