Usage of lightning:tree
In this blog, I am going to show how to use the lightning:tree component. In this example, I am fetching the data from the account and contact and opportunity object and show the data as a tree. A lightning:tree component displays the visualization of a structural hierarchy, such as a sitemap for a website or a role hierarchy in an organization. Items are displayed as hyperlinks and items in the hierarchy can be nested. Items with nested items are also known as branches.
Apex Class
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
public class TreeController { @AuraEnabled public static String getTreeData(){ List<Account> accs = [Select Id , Name,(Select Id , Name from Contacts) from Account]; Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,(Select Id ,Name From Opportunities) from Contact]); List<AccountWrapper> aooo = new List<AccountWrapper>(); for(Account a : accs){ AccountWrapper aWraper = new AccountWrapper() ; aWraper.name =a.Name ; aWraper.label =a.Name ; aWraper.expanded =true ; List<Items> co = new List<Items>(); for(Contact c : a.Contacts){ Items conWrapp = new Items(); conWrapp.name =c.Name ; conWrapp.label =c.Name ; conWrapp.expanded =true ; List<Items> wrapperOooo = new List<Items>(); for(Opportunity o : opps.get(c.Id).Opportunities){ Items ooo = new Items(); ooo.name = o.Name ; ooo.label = o.Name ; ooo.expanded = true ; wrapperOooo.add(ooo); } conWrapp.items =wrapperOooo ; co.add(conWrapp); } aWraper.items = co; aooo.add(aWraper); } return JSON.serializePretty(aooo) ; } public Class AccountWrapper{ @AuraEnabled public String name {get;set;} @AuraEnabled public String label {get;set;} @AuraEnabled public Boolean expanded {get;set;} @AuraEnabled public List<Items> items {get;set;} } public Class Items{ @AuraEnabled public String name {get;set;} @AuraEnabled public String label {get;set;} @AuraEnabled public Boolean expanded {get;set;} @AuraEnabled public List<Items> items {get;set;} } } |
Lightning Component
|
1 2 3 4 5 6 |
<aura:component controller="TreeController"> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:attribute name="items" type="Object"/> <lightning:tree items="{! v.items }" header="Account - Contact - Opportunity"/> </aura:component> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
({ doInit: function (cmp, event, helper) { var action = cmp.get("c.getTreeData"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { cmp.set('v.items', JSON.parse(response.getReturnValue())); } }); $A.enqueueAction(action); } }) |
Here is the output
