Tree structure in Lightning

Question

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

Answer 1

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.

TreeNode.cmp

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

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

TreeNodeController.js

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

TreeNode.css

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

---

Demo application:

TreeNodeDataProvider.cls

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

TreeNodeDemo.app

<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}" />
    </aura:iteration>
</aura:application>

TreeNodeDemoController.js

({
    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) {
                    roles[v.ParentRoleId].items.push(roles[v.Id]);
                });
                component.set("v.nodes", roles[undefined].items);
            } else {
                alert(response.getError());
            }
        });
        $A.enqueueAction(action);
    }
})

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.

Answer 2

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

Component

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

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);
    }     
})