2

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

16

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.

5
  • 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 Mar 6 '17 at 11:37
  • Like very much !!! – Itai Shmida Mar 6 '17 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 Mar 6 '17 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 Mar 7 '17 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 Mar 8 '17 at 4:53
3

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.