0
 <table class="slds-table slds-table--bordered slds-table--cell-buffer" style="margin-top:50px;">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col">
                    <div onclick="{!c.sortByName}"
                         class="slds-truncate"
                         title="Account Name">
                        Account Name
                        <aura:if isTrue="{!v.sortField=='Name'}">
                            <span>
                                <aura:if isTrue="{!v.sortAsc}">
                                    &#8593;
                                    <aura:set attribute="else">
                                        &#8595;
                                    </aura:set>
                                </aura:if>
                            </span>
                        </aura:if>
                    </div> 
                </th>
                <th scope="col">
                    <div  onclick="{!c.sortByIndustry}" class="slds-truncate" title="Industry">Industry
                        <aura:if isTrue="{!v.sortField=='Industry'}">
                            <span>
                                <aura:if isTrue="{!v.sortAsc}">
                                    &#8593;
                                    <aura:set attribute="else">
                                        &#8595;
                                    </aura:set>
                                </aura:if>
                            </span>
                        </aura:if>
                    </div>
                </th>
                <th scope="col">
                    <div  onclick ="{!c.sortByAnnualRevenue}" class="slds-truncate" title="Annual Revenue">Annual Revenue
                        <aura:if isTrue="{!v.sortField=='AnnualRevenue'}">
                            <span>
                                <aura:if isTrue="{!v.sortAsc}">
                                    &#8593;
                                    <aura:set attribute="else">
                                        &#8595;
                                    </aura:set>
                                </aura:if>
                            </span>
                        </aura:if>
                    </div>
                </th>
            </tr>
        </thead>
        <tbody>
            <lightning:accordion>
                <aura:iteration items="{!v.accounts}" var="acc">
                    <aura:iteration items="{!acc.Contacts}" var="con">
                        <tr class="slds-text-title--caps">
                            <td scope="row">
                                <div class="slds-truncate">
                                    <lightning:accordionsection name="{!acc.Name}" label="{!acc.Name}">
                                        <aura:set attribute="body">
                                            <p><b>contact Name :  {!con.Name}</b></p>
                                            <p><b>contact Email :  {!con.Email}</b></p>
                                            <p><b>contact Phone :  {!con.Phone}</b></p>
                                            <p><b>contact MailingCity :{!con.MailingCity}</b></p>
                                        </aura:set>
                                    </lightning:accordionsection>
                                </div>
                            </td>
                            <td scope="row">
                                <div class="slds-truncate" title="Industry">
                                    {!acc.Industry}
                                </div>
                            </td>
                            <td scope="row">
                                <div class="slds-truncate" title="Annual Revenue">
                                    {!acc.AnnualRevenue}
                                </div>
                            </td>
                        </tr>
                    </aura:iteration>
                </aura:iteration>
            </lightning:accordion>
        </tbody>
    </table>

I am trying to implement Lightning Accordion into my custom SLDS table, but while doing it am getting repeated Account records. (i mean 1 account record getting displayed multiple times) please check image to understand my issue. Sforce Account  record in image is being displayed twice

  • Please use triple backticks (```) or the {} tool in the editor to format your code. – David Reed May 14 at 18:24
  • 1
    Well, I think its doing what is supposed to, you are creating the accordion with the name of the account inside the loop of contacts, so if you have more than 1 contact for the same account, you'll have more than one accordion per account. – Sergio Alcocer May 14 at 18:36
2

Your iteration is doing what is supposed to 😉

<aura:iteration items="{!v.accounts}" var="acc">
    <aura:iteration items="{!acc.Contacts}" var="con">
...
        <lightning:accordionsection name="{!acc.Name}" label="{!acc.Name}">

You are iterating over Accounts, and for each Account, you iterate over its contacts, and for each contact you create a new <lightning:accordionsection.

This means that you would have as many section repetitions as contacts that account has.

By the look of your screenshot I'd say that

Express Logistics and Transport --> 2 contacts

University of Arizona --> 1 contact

United Oil & Gas, UK --> 1 contact

United Oil & Gas, Singapore --> 2 contacts

GenePoint --> 1 contact sForce --> 2 contacts

If I understand what you want to achieve... I'd suggest you to exchange the accordion and the iteration to do something like the code below (do as many adjustments as you need, this is just to give you an idea

<aura:iteration items="{!v.accounts}" var="acc">
    <tr class="slds-text-title--caps"> 
        <td scope="row">
            <div class="slds-truncate">
                <lightning:accordionsection name="{!acc.Name}" label="{!acc.Name}">
                    <aura:iteration items="{!acc.Contacts}" var="con">
                        <p><b>contact Name :  {!con.Name}</b></p>
                        <p><b>contact Email :  {!con.Email}</b></p>
                        <p><b>contact Phone :  {!con.Phone}</b></p>
                        <p><b>contact MailingCity :{!con.MailingCity}</b></p>
                        <hr/>
                    </aura:iteration>
                </lightning:accordionsection>
            </div>
        </td>
        <td scope="row">
            <div class="slds-truncate" title="Industry">
                {!acc.Industry}
            </div>
        </td>
        <td scope="row">
            <div class="slds-truncate" title="Annual Revenue">
                {!acc.AnnualRevenue}
            </div>
        </td>
    </tr>
</aura:iteration>
| improve this answer | |
  • I am getting error like this after using above code "This page has an error. You might just need to refresh it. Action failed: lightning:accordionSection$controller$handleSelectSection [Cannot read property 'notifySectionSelect' of undefined] Failing descriptor: {lightning:accordionSection$controller$handleSelectSection} " when i tried to open the Accordion section to see the contact details: – Amar Mishra May 15 at 2:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.