lightning:tree metatext example

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. metatext one of the attributes which you can pass it to the array of items .metata attribute is used to provide users with supplemental information and aid with identification or disambiguation. For example, if you want to provide the contact details in the Items that are displaying as shown in the below image.

Apex Class 

public class TreeController {
    @AuraEnabled
    public static String getTreeData(){
        List<Account> accs = [Select Id , Name,Rating,Type,(Select Id , Name,FirstName ,LastName,Email from Contacts) from Account];
        Map<Id , Contact> opps =new Map<Id , Contact>( [Select Id , Name,(Select Id ,Name,Amount,StageName From Opportunities) from Contact]);
        
        List<AccountWrapper> aooo = new List<AccountWrapper>();
        for(Account a : accs){
            AccountWrapper aWraper = new AccountWrapper() ; 
            aWraper.name =a.Id ;
            aWraper.label =a.Name ;
            aWraper.metatext = a.Name+'-'+a.Type+'-'+a.Rating ;
            aWraper.expanded =false ;
            List<Items> co = new List<Items>();
            for(Contact c : a.Contacts){
                Items conWrapp = new Items();
                conWrapp.name =c.Id ;
                conWrapp.metatext =c.FirstName+'-'+c.LastName+'-'+c.Email;
                conWrapp.label =c.Name ;
                conWrapp.expanded =false ;
                
                List<Items> wrapperOooo = new List<Items>();
                for(Opportunity o : opps.get(c.Id).Opportunities){
                    Items ooo = new Items(); 
                    ooo.name = o.Id ;
                    ooo.label = o.Name ;
                    ooo.metatext =o.Name+'-'+o.Amount+'-'+o.StageName;
                    ooo.expanded = false ;
                    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 String metatext {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 String metatext {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" onselect="{!c.handleSelect}"/>
</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);
    },
    handleSelect: function (cmp, event, helper) {
        //return name of selected tree item
        var id = event.getParam('name');
        var urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({
            "url": "/"+id
        });
        urlEvent.fire();
    }
    
})