Posted in Lightning, Lightning Component, Lightning Design System

Winter’18 Lightning Tree Component

Dev Shukla  and I had worked together on a lightning venture for a couple of months and We decided to start a blog series to share our learning and experiments with “Lightning Lovers”.Many thanks to Dev Shukla for his contributor to this blog series.You can connect with Dev at twitter and check more about him here.

Using lightning: tree To Display Leads with Activity Information

Winter’18 Salesforce has added a new lightning component called lightning:tree, using this we can display the hierarchy of Salesforce. lightning: tree component provides visualization of a structure hierarchy. Tree items, also known as branches, can be expanded or collapsed.This component supports only version 41.0 and above.
Winter18.png 620×378
Business Use Case: We can use this component for displaying the Hierarchy structure like Account Hierarchy, Role Hierarchy, Custom Object Hierarchy. Also, we can use this component to display the information in hierarchy level like Leads with Activity Information, Top customers with Top Deals information.
Here I created a sample component to display my Leads with respective Tasks and on click on respective Task it will display the Task important information in modal like Subject, Status, Assigned To, Due Date and comments.

Here is the working demo: Live Demo

Here you go step by step Instructions to create the Lightning tree component.

  1. Apex Controller


public class LightningTreeAuraController{
    
    @AuraEnabled
    public static List<item> getLeadTree(){
        
        List<item> items = new List<item>();
        List<Lead> leadList = new List<Lead>();
        //get list of leads and respective tasks
        leadList = [SELECT Id, Name, (SELECT Id, Subject From Tasks) From Lead LIMIT 10];
        for(Lead lead: leadList){
            
            //get task of current lead record
            List<item> taskItems = new List<item>();
            for(Task task: lead.Tasks){
                //add task items
                item taskItem = new item('Task :'+ task.Subject, String.valueOf(task.Id), false, null);
                taskItems.add(taskItem);
            }
            
            //add lead items
            item leadItem = new item('Lead :' +lead.Name, String.valueOf(lead.Id), false, taskItems);
            items.add(leadItem);
        }
        return items;
    }
    
    //Item Wrapper Class
    public class item{
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String name {get; set;}
        @AuraEnabled
        public Boolean expanded {get; set;}
        @AuraEnabled
        public List<item> items {get; set;}
        
        public item(String label, String name, Boolean expanded, List<item> items){
            this.label = label;
            this.name = name;
            this.expanded = expanded;
            this.items = items;
        }
    }
     //get task information based on Subject click
    @AuraEnabled
    public static Task getTaskDetails(Id recordId){
        Task task = [Select id,Subject,Owner.Name,Description,ActivityDate,Status from Task where Id=:recordId];
        return task;
        
    }

2.  Lightning Component code

1

You can take complete component code here

3.Lightning Component JS Controller Code

({
    doInit: function (component, event, helper) {
        helper.getLeadtree(component);
    },
    openModel: function(component,event, helper) {
        var TaskId = event.getParam('name');
        helper.getTaskDetails(component,TaskId);
    },

    closeModel: function(component, event, helper) {
        // for Hide/Close Model,set the "isOpen" attribute to "Fasle"
        component.set("v.isOpen", false);
    },
})

4. Lightning Component Helper code

({
    getLeadtree : function(component, event, helper) {
        var spinner = component.find("spnr");
        var action = component.get('c.getLeadTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                //get lead and respective task list, and initialize with items
                component.set('v.items', response.getReturnValue());
                //hide spinner after getting data
                $A.util.toggleClass(spinner, "slds-hide");
            }else{
                $A.util.toggleClass(spinner, "slds-hide");
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);

    },
    getTaskDetails : function(component, TaskId) {
        var action = component.get('c.getTaskDetails');

        action.setParams({
            recordId : TaskId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            //get task information and initialize with task attribute
            component.set('v.task', response.getReturnValue());
            component.set("v.isOpen", true);

        });
        $A.enqueueAction(action);
    }
})

Here is Output of Component :

This slideshow requires JavaScript.

GitHub Repository
You can also download the code from the github repository here.

References :

Salesforce Documentation
Lightning Design System : Lightning Tree

lightning:tree to display Account Hierarchy

Advertisements

Author:

Hi! I am Pritam Shekhawat, Salesforce MVP. I am working as a 4x Certified Senior Salesforce developer as well I am a co-leader of Noida Salesforce user group. Most important thing which I like about Salesforce is giving back. There aren’t enough words in the dictionary to describe the significance of giving back.

2 thoughts on “Winter’18 Lightning Tree Component

  1. Hello Pritam,

    Thanks for sharing such a beautiful article. It is explained in a very simple manner and easy to understand.

    I observed that there is some mismatch between the code which is mentioned here and on github. For example, line no 6 in apex class should be “List items = new List();”, however it is perfectly fine on the github.

    Thanks,
    Arpit Sethi

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s