How to display User Hierarchy in Lightning. I have tried Jquery but It didn't work.How to display Tree Structure in sales force Lightning

2 Answers 2


There's no need to use jQuery for this task. You simply need to make a treeNode component, and then render it. Here's a very rough example that I wrote up just for this question. Here's the various pieces involved.


<aura:component >
    <aura:attribute name="node" type="Object" />
    <aura:attribute name="expanded" type="Boolean" default="false" />

        <div onclick="{!c.toggle}">
            <aura:if isTrue="{!v.node.items.length>0}">
                [ {!v.expanded?'-':'+'} ]
            </aura:if> {!v.node.Name}
        <aura:if isTrue="{!v.expanded}">
            <div class="node">
                <aura:iteration items="{!v.node.items}" var="node">
                    <c:TreeNode node="{!node}" />


    toggle: function(component, event, helper) {
        component.set("v.expanded", !component.get("v.expanded"));


.THIS .node {
    margin-left: 1em;

Demo application:


public class TreeNodeDataProvider {
    @AuraEnabled public static UserRole[] getUserRoles() {
        return [SELECT Name, ParentRoleId FROM UserRole];


<aura:application controller="TreeNodeDataProvider">
    <aura:attribute name="nodes" type="Object" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:iteration items="{!v.nodes}" var="node">
        <c:TreeNode node="{!node}" />


    init: function(component, event, helper) {
        var action = component.get("c.getUserRoles");
        action.setCallback(this, function(response) {
            var roles = {}, results;
            if(component.isValid() && response.getState() === "SUCCESS") {
                results = response.getReturnValue();
                roles[undefined] = { Name: "Root", items: [] };
                results.forEach(function(v) {
                    roles[v.Id] = { Name: v.Name, items: [] };
                results.forEach(function(v) {
                component.set("v.nodes", roles[undefined].items);
            } else {

You'll need some styling and so on, but hopefully this simple demo, which you can copy-paste into an org, will give you a start for replicating a nested tree.

I haven't implemented checkboxes or anything special, but you can include any sort of additional functionality you'd like.

Edit: Now with Real Data.

  • Question:In this case you already knows demo contains two child's. each child contains sub childs. In real time scenario. How to do it can you please explain me ..It helps me a alot
    – Annappa PH
    Commented Mar 6, 2017 at 11:37
  • Like very much !!! Commented Mar 6, 2017 at 13:08
  • @AnnappaPH see the updated answer for dynamic data. It's just a matter of querying records and putting them in to a tree structure.
    – sfdcfox
    Commented Mar 6, 2017 at 17:56
  • @AnnappaPH You really should open a new question for this, and revert your previous edit. This helps other people find answers as well.
    – sfdcfox
    Commented Mar 7, 2017 at 15:27
  • @Sfdcfox I have reverted back...Thank you...But how to add user photos in that code?..I have tried different ways But It didn't work..
    – Annappa PH
    Commented Mar 8, 2017 at 4:53

Since Winter '18, you can now use lightning:tree to display your data in tree structure quite easily. A simple example from the article


<aura:component >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="items" type="Object"/>
    <lightning:tree items="{! v.items }" header="Roles"/>

Client side controller

    doInit: function (cmp, event, helper) {
    var items = [{
            "label": "Western Sales Director",
            "name": "1",
            "expanded": true,
            "items": [{
                "label": "Western Sales Manager",
                "name": "2",
                "expanded": true,
                "items" :[{
                    "label": "CA Sales Rep",
                    "name": "3",
                    "expanded": true,
                    "items" : []
                    "label": "OR Sales Rep",
                    "name": "4",
                    "expanded": true,
                    "items" : []
        cmp.set('v.items', items);
  • How can you make this dynamic?
    – Chance
    Commented Mar 14, 2018 at 14:18
  • 1
    To make it dynamic, review my github repo Lightning dynamic tree and related SFSE question.
    – Mahmood
    Commented Mar 15, 2018 at 7:13
  • Well done! @Mohmood
    – SatyaV
    Commented Mar 15, 2018 at 19:07

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .