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:

Screenshot_2015-11-04-20-23-16

Screenshot_2015-11-04-20-23-30
Let’s walk through code by few steps:

Screenshot_2015-11-04-20-22-58

Step-1: AccConListController.apxc

public class AccConListController {
    @AuraEnabled
    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>
                </aura:if> 
                &nbsp;
                <aura:set attribute="else">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </aura:set>
            </aura:if> 
            <a id="tree0-node0-0-link"  tabindex="-1" onclick="{!c.showHidePanel}" role="presentation">{!v.acc.Name}</a>
        </div>
        
        <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>    	
                </li>
            </aura:iteration>
        </ul>
    </li>
</aura:component>

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 (e.style.display == 'block' || e.style.display==''){
            e.style.display = 'none';
            component.set("v.ext","plus");
        }else{
            e.style.display = 'block';
            component.set("v.ext","minus");
        } 
	},
})

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" 
                  scripts="/resource/jquerymin" 
                  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>
                        <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>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /slds-col-->                        
            </div>   
            <!-- /slds-grid-->                 
        </div>
        <!-- /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}" />
                </aura:iteration>
            </ul>
        </div>
    </div>
</aura:component>

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) {          
        helper.getAccounts(component);          
    },
    
    showPanel : function(component, event, helper){        
        helper.onLoadPage(component); 
	},
    
})

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());            
        });        
        $A.enqueueAction(action);                
    },        
})

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

Advertisements

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.

    Thanks,
    Chaitanya

    Like

  3. Hi Sushil,

    Need a help !!

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

    Thanks
    Chaitanya

    Like

  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

    Like

  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.
    https://success.salesforce.com/issues_view?id=a1p30000000jhaFAAQ

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

    Thanks and regards,
    Lokesh

    Like

    • 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

      Like

  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?

    Thanks,

    Like

      • 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

        Like

  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?

    Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s