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
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.
-
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– AnnappaMar 6, 2017 at 11:37
-
-
@AnnappaPH see the updated answer for dynamic data. It's just a matter of querying records and putting them in to a tree structure.– sfdcfoxMar 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.– sfdcfoxMar 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..– AnnappaMar 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
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);
}
})
-
-
1To make it dynamic, review my github repo Lightning dynamic tree and related SFSE question.– MahmoodMar 15, 2018 at 7:13
-