Apex Code Development You need to sign in to do that
Don't have an account?
Sujendran Sundarraj 8 collapse a table row inside a table in lightning component
Hello all,
I have a requirement in which I need to display list of account records and each account record should hold its contact records and each contact records will also have some other information in a seperate row below.
I want to have a collapisible buttonicon on each account records and contact reocrds. when I click account record collapisible button it should show or hide its contacts, similiarly when I click on contact's collapsible icon it should show or hide some contact below it.
This is my sample code.
In my code when I click on the collapsible icon in contact it hides the entire contacts section. any help on this would be much appreciated.
Thank you.
I have a requirement in which I need to display list of account records and each account record should hold its contact records and each contact records will also have some other information in a seperate row below.
I want to have a collapisible buttonicon on each account records and contact reocrds. when I click account record collapisible button it should show or hide its contacts, similiarly when I click on contact's collapsible icon it should show or hide some contact below it.
This is my sample code.
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="Accountcon" access="global" >
<aura:attribute name="accounts" type="Account[]"></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr class="slds-line-height_reset">
<tr class="slds-truncate" ><b>Show</b></tr>
<td class="slds-truncate" ><b>Name</b></td>
<td class="slds-truncate" ><b>Type</b></td>
</tr>
<aura:iteration items="{!v.accounts}" var="ac" indexVar="mylocIndex">
<tr class="slds-hint-parent">
<td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
</td>
<td class="slds-truncate">{!ac.Name}</td>
<td class="slds-truncate">{!ac.Type}</td>
</tr>
<aura:if isTrue="{!ac.expanded}">
<tr class="slds-line-height_reset">
<td class="slds-truncate" ><b>show</b></td>
<td class="slds-truncate" ><b>Last Name</b></td>
<td class="slds-truncate" ><b>Email</b></td>
</tr>
<b>Contact details</b>
<aura:iteration items="{!ac.Contacts}" var="con">
<tr class="slds-hint-parent">
<td> <lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
</td>
<td class="slds-truncate">
{!con.LastName}</td>
<td class="slds-truncate">{!con.email}</td>
</tr>
<tr>this section should be shown or hidden onclick of collapsible button on the contact record </tr>
</aura:iteration>
</aura:if>
</aura:iteration>
</table>
</aura:component>
Controller.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getacct");
action.setCallback(this, function(action){
component.set("v.accounts", action.getReturnValue());
});
$A.enqueueAction(action);
},
toggle :function(component, event, helper){
var items = component.get("v.accounts");
var index = event.getSource().get("v.value");
items[index].expanded = !items[index].expanded;
component.set("v.accounts", items);
}
})
Apex class:
public class AccountsController {
@AuraEnabled
public static List <Account> getAccounts() {
return [SELECT Id, name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, (select name, email, phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
}
}
In my code when I click on the collapsible icon in contact it hides the entire contacts section. any help on this would be much appreciated.
Thank you.
You are using the {!mylocIndex} for contacts toggle which is the same one that is being used for the accounts. You will need to seperate the expansion.
<lightning:buttonIcon value="{!mylocIndex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevronright'}" onclick="{!c.toggle}" ></lightning:buttonIcon>Thank you for your reply,
I tried but I cant get the exact output. Can you please help me on that.
Thank you.
I would say instead making this fully custom,
I would use the accordion:
https://developer.salesforce.com/docs/component-library/bundle/lightning:accordionSection/example
I created this you can add the table components if you want to. I left some comments for sections like the Open Sections:
Here is the code:
Component:
<aura:component implements="forceCommunity:availableForAllPageTypes" controller="Accountcon" access="global" > <aura:attribute name="accounts" type="Account[]"></aura:attribute> <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler> <aura:attribute name="activeSections" type="List" default="['A','C']" /> <aura:attribute name="activeSectionsMessage" type="String" default="" /> <aura:attribute name="activeSubSections" type="List" default="['A','C']" /> <aura:attribute name="activeSubSectionsMessage" type="String" default="" /> <p>{! v.activeSectionsMessage }</p> <p>{! v.activeSubSectionsMessage }</p> <lightning:accordion allowMultipleSectionsOpen="true" onsectiontoggle="{! c.handleSectionToggle }" activeSectionName="{! v.activeSections }" > <aura:iteration items="{!v.accounts}" var="ac" indexVar="mylocIndex"> <lightning:accordionSection name="{!ac.Name}" label="{!ac.Name}"> <aura:set attribute="body"> Type: {!ac.Type} <lightning:accordion allowMultipleSectionsOpen="true" onsectiontoggle="{! c.handleSubSectionToggle }" activeSectionName="{! v.activeSubSections }" > <aura:iteration items="{!ac.Contacts}" var="con"> <lightning:accordionSection name="{!con.LastName}" label="{!con.LastName}"> <aura:set attribute="body"> {!con.Email} </aura:set> </lightning:accordionSection> </aura:iteration> </lightning:accordion> </aura:set> </lightning:accordionSection> </aura:iteration> </lightning:accordion> </aura:component>Controller:
({ doInit : function(component, event, helper) { var action = component.get("c.getAccounts"); action.setCallback(this, function(action){ console.log(action.getReturnValue()); component.set("v.accounts", action.getReturnValue()); }); $A.enqueueAction(action); }, handleSectionToggle: function (cmp, event) { var openSections = event.getParam('openSections'); if (openSections.length === 0) { cmp.set('v.activeSectionsMessage', "All sections are closed"); } else { cmp.set('v.activeSectionsMessage', "Open sections: " + openSections.join(', ')); } }, handleSubSectionToggle : function (cmp, event) { var openSections = event.getParam('openSections'); if (openSections.length === 0) { cmp.set('v.activeSubSectionsMessage', "All sections are closed"); } else { cmp.set('v.activeSubSectionsMessage', "Open sections: " + openSections.join(', ')); } } })Apex Class:
public without sharing class Accountcon { @AuraEnabled public static List <Account> getAccounts() { return [SELECT name, industry, Type, NumberOfEmployees, TickerSymbol, Phone, (select name, Title, LastName, email, phone from contacts) FROM Account ORDER BY createdDate ASC limit 10]; } }This works in my org, you can implement this and let me know if this works out for you. I think this will be the simplest way with reusable slds components. Good luck! :)