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
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
<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>
({ 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