Has anyone ever tried to create a role hierarchy type relationship logic in Lightning with similar visualization of the hierarchical diagram? I've a VF page where the same has been done using a JS framework but unfortunately this framework can't be used in Lightning since Locker Service doesn't allow it. I'm now trying to move this from VF to Lightning
1
-
please share with us exactly what are you trying to achieve - a printscreen or something else– Itai ShmidaCommented Sep 13, 2017 at 9:53
Add a comment
|
2 Answers
Have a look at the lightning:tree base component.
The example given there basically illustrates your use case. All you need to do is implement an Apex controller to query the UserRole object and build the hierarchy and transform it to JSON in the Java Script controller.
Lightning Component
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="items" type="Object" access="PRIVATE"/>
<lightning:tree items="{! v.items }" header="Roles"/>
</aura:component>
Lightning Controller
({
init: function (cmp) {
var items = [{ // These items are hard coded, implement Apex controller to retrieve UserRole objects and build this JSON object.
"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" :[]
}]
}]
}, {
"label": "Eastern Sales Director",
"name": "5",
"expanded": false,
"items": [{
"label": "Easter Sales Manager",
"name": "6",
"expanded": true,
"items" :[{
"label": "NY Sales Rep",
"name": "7",
"expanded": true,
"items" :[]
}, {
"label": "MA Sales Rep",
"name": "8",
"expanded": true,
"items" :[]
}]
}]
}, {
"label": "International Sales Director",
"name": "9",
"expanded": true,
"items": [{
"label": "Asia Sales Manager",
"name": "10",
"expanded": true,
"items" :[{
"label": "Sales Rep1",
"name": "11",
"expanded": true,
"items" :[]
}, {
"label": "Sales Rep2",
"name": "12",
"expanded": true,
"items" :[]
}]
},{
"label": "Europe Sales Manager",
"name": "13",
"expanded": false,
"items" :[{
"label": "Sales Rep1",
"name": "14",
"expanded": true,
"items" :[]
}, {
"label": "Sales Rep2",
"name": "15",
"expanded": true,
"items" :[]
}]
}]
}];
cmp.set('v.items', items);
}
})
Besides lightning:tree component there is lightning:treeGrid one. There are small diffrences in implementation but I think that treeGrid just looks better.
Component
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="gridColumns" type="List" />
<aura:attribute name="gridData" type="Object" />
<aura:attribute name="gridExpandedRows" type="Object" />
<lightning:treeGrid
columns="{! v.gridColumns }"
data="{! v.gridData }"
expandedRows="{! v.gridExpandedRows }"
keyField="name"
aura:id="mytree"
/>
Controller
({
init: function (cmp) {
var columns = [
{
type: 'text',
fieldName: 'accountName',
label: 'Account Name'
},
{
type: 'number',
fieldName: 'employees',
label: 'Employees'
},
{
type: 'phone',
fieldName: 'phone',
label: 'Phone Number'
},
{
type: 'url',
fieldName: 'accountOwner',
label: 'Account Owner',
typeAttributes: {
label: { fieldName: 'accountOwnerName' }
}
}
];
cmp.set('v.gridColumns', columns);
var nestedData = [
{
"name": "123555",
"accountName": "Rewis Inc",
"employees": 3100,
"phone": "837-555-1212",
"accountOwner": "http://sfdc.co/jane-doe",
"accountOwnerName": "Jane Doe"
},
{
"name": "123556",
"accountName": "Acme Corporation",
"employees": 10000,
"phone": "837-555-1212",
"accountOwner": "http://sfdc.co/john-doe",
"accountOwnerName": "John Doe",
"_children": [
{
"name": "123556-A",
"accountName": "Acme Corporation (Bay Area)",
"employees": 3000,
"phone": "837-555-1212",
"accountOwner": "http://sfdc.co/john-doe",
"accountOwnerName": "John Doe",
"_children": [
{
"name": "123556-A-A",
"accountName": "Acme Corporation (Oakland)",
"employees": 745,
"phone": "837-555-1212",
"accountOwner": "http://sfdc.co/john-doe",
"accountOwnerName": "John Doe"
},
{
"name": "123556-A-B",
"accountName": "Acme Corporation (San Francisco)",
"employees": 578,
"phone": "837-555-1212",
"accountOwner": "http://sfdc.co/jane-doe",
"accountOwnerName": "Jane Doe"
}
]
}
]
},
];
cmp.set('v.gridData', nestedData);
var expandedRows = ["123556"];
cmp.set('v.gridExpandedRows', expandedRows);
}
})
Additionally if you want to create custom hierarchy of how many levels you want I used this algorithm to correctly place data in the structure:
getNestedChildren : function (models, parentId) {
const nestedTreeStructure = [];
const length = models.length;
for (let i = 0; i < length; i++) {
const model = models[i];
if (model.parent == parentId) {
const _children = this.getNestedChildren(models, model.id);
if (_children.length > 0) {
model._children = _children;
}
nestedTreeStructure.push(model);
}
}
return nestedTreeStructure;
}
Where models is flat array of parents and kids and parentId is id which parents have (in my case it was just null).
References:
https://stackoverflow.com/questions/444296/how-to-efficiently-build-a-tree-from-a-flat-structure
