How to use Nested Components in Lightning Component Using Salesforce Lightning Design System

Hi Guys,

In my last post I showed how to use SVG Icon in Lightning Component. In this post, I will be showing you how to build a Nested component in Lightning Component using Salesforce Lightning Design System. In this you can see Tree view of Accounts and its related contacts like:


Let’s walk through code by few steps:


Step-1: AccConListController.apxc

public class AccConListController {
    public static List<Account> getAccounts() {
        List<Account> accounts=[SELECT Id, Name, (select name, Phone, Email FROM Contacts) FROM Account limit 1000];
        return accounts;

In this class we create a funtion which is used for getting accounts and its related contacts.

Step-2: AccountRow.cmp

<aura:component >
    <aura:attribute name="acc" type="Account" />
    <aura:attribute name="ext" type ="String" default="plus"/>
    <li  id="tree0-node0" class="slds-tree__branch slds-is-open" role="treeitem" aria-level="1" aria-expanded="true">
        <div class="slds-tree__item">
            <aura:if isTrue="{!v.acc.Contacts[0] != null}">
                <aura:if isTrue="{!v.ext=='plus'}">
                    <div id="plus" >➕</div>
                    <aura:set attribute="else">
                        <div id="minus">➖</div>
                <aura:set attribute="else">
            <a id="tree0-node0-0-link"  tabindex="-1" onclick="{!c.showHidePanel}" role="presentation">{!v.acc.Name}</a>
        <ul aura:id="{!v.acc.Id}" id="{!v.acc.Id}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
            <aura:iteration items="{!v.acc.Contacts}" var="con">
                <li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 20px;">
                    <a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!con.Name}</a>    	

This is a Child component and it is used for show an account name and its related contacts.

Step-3: AccountRowController.js

	showHidePanel : function(component, event, helper) {
        var id=component.get("v.acc.Id");        
        var e=document.getElementById(id);      
        if ( == 'block' ||''){
   = 'none';
   = 'block';

This is controller of AccountRow Component.

Step-4: AccountTree.cmp

<aura:component controller="AccConListController" implements="force:appHostable">
    <ltng:require styles="/resource/SLDS/assets/styles/salesforce-lightning-design-system-vf.css" 
                  afterScriptsLoaded="{!c.doInit}" />    
    <aura:attribute name="Accounts" type="Account[]" />
    <div class="slds">
        <div class="slds-page-header">
            <div class="slds-grid">
                <div class="slds-col slds-has-flexi-truncate">
                    <div class="slds-media">
                        <div class="slds-media__figure">
                            <c:svgIcon svgPath="/resource/SLDS/assets/icons/standard-sprite/svg/symbols.svg#process" category="standard" size="large" name="user" />
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Tree View</p>
                            <div class="slds-grid">
                                <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle">Account -> Contact</h1>
                <!-- /slds-col-->                        
            <!-- /slds-grid-->                 
        <!-- /slds-page-header-->
        <div class="slds-tree-container" role="application">
            <ul class="slds-tree" role="tree" aria-labelledby="treeheading" aria-activedescendant="tree0-node0">
                <aura:iteration items="{!v.Accounts}" var="acc">        	
                    <c:AccountRow acc="{!acc}" />

This is parent component that holds AccountRow component as a nested component. And also i am using here SVG Icon in header. For more detail about SVG Icon see in my previous post or click here.

Step-5: AccountTreeController.js

	doInit : function(component, event, helper) {          
    showPanel : function(component, event, helper){        

This is controller of AccountTree Component.

Step-6: AccountTreeHelper.js

	//Fetch the Accounts from the Apex controller
    getAccounts: function(component) {        
        var action = component.get("c.getAccounts");
        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            component.set("v.Accounts", actionResult.getReturnValue());            

This is helper of AccountTree Component. Its getAccounts() function calls getAccounts() method of AccConListController.apxc class


21 thoughts on “How to use Nested Components in Lightning Component Using Salesforce Lightning Design System

  1. Pingback: Lightning Component Bundle Concept | Sushil Kumar

  2. Hi sushil,

    I am facing issue in achieving drag and drop functionality in Lightning using jquery. Can you please help me with some sample code and JQuery version which will correctly load in Lightning to achieve Draggable and Droppable functionality.



  3. Hi Sushil,

    Need a help !!

    Just like rerender or use of action region in Visualforce.How to rerender a particular block in Lightning.



  4. hello,
    i am trying to use the same nested component and was not able to see any data on page… can you please tell me the version of SLDS you are using


  5. Hi Sushil,

    we tried using this component and got this error. if we are removing the SVG:Icon component from AccountTree.cmp, page will be displayed with only Account->Contacts text and records not displayed. we used the solution mentioned in success story but didnt worked out. Could you please suggest solution.

    Aura.loadComponent(): Failed to initialize application.
    An internal server error has occurred

    Thanks and regards,


    • Hi Lokesh

      Maybe you have missed something in the script that’s why you are getting an error. If you will share code then I can able to resolve your problem.

      Thanks & Regards
      Sushil Kumar


  6. Hi,

    I have a requirement to display a nested data structure of accounts. Each account has multiple addresses. Each account as well as address will have check boxes for user to select and when select will have to do some processing. All this in lightning in SFDC. Can you please help me to implement this requirement?



      • Hey Thanks for replying. My requirement is a bit more complicated than that.. So I need to display a tree kind of structure with the accounts at the top node and the addresses as children nodes. Both account and addresses have radio buttons that the user can select and once done,the chosen records will be sent to apex controller for some dml operations. Now the data that is displayed in this tree structure ,account and addresses are not present in salesforce but is received from an external system with a REST callout.
        Can you help me here? I can do this in visual force but I am not that ok with lightning so I am a bit confused to implement this in lightning


  7. Hi Sushil,

    Nice Blog. I have question regarding this.
    My Requirement is for a self Lookup in Asset of Object.I need to create same Tree Structure of the records.I am facing issue with the soql Query for Self Lookup.Can you suggest what to do?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s