Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › How to implement Lightning:Tree in Lightning component to Display Hierarchy for any Salesforce Sobject?

Tagged: , , , , , , , , ,

  • Prachi

    Member
    July 27, 2018 at 7:40 AM

    Hello Anjali,

    In API version 41.0, Salesforce has introduce new component called lightning:tree. This can be used to display hierarchy in tree structure. Before this, we have to used jquery or other javascript libraries to implement this.After introduction of lightning:tree, it is very easy to use this and implement this in short time.You just have specify below attributes to component to display tree structure:-

    ltngcurrentRecId : Salesforce 15 or 18 digit Id of any record for which you want to see hierarchy.
    ltngSobjectname : sObject API name (like Account, Case, Position__c etc.)
    ltngParentFieldAPIName : Field API name which creates self relationship between records.
    ltngLabelFieldAPIName : Field API name which will be used to display records in tree structure(like Name, CaseNumber, Title__c etc.).
    ltngHierarchyHeader : Header label which will be displayed above tree structure.

    Below is a simple code for the same:-

    <aura:application extends="force:slds">
    <c:SK_LightningTreeCmp ltngcurrentRecId="0019000000ld4kO"
    ltngSobjectname="Account"
    ltngParentFieldAPIName="ParentId"
    ltngLabelFieldAPIName="Name"
    ltngHierarchyHeader="Account Hierarchy"/>

    <c:SK_LightningTreeCmp ltngcurrentRecId="5009000000GJkJG"
    ltngSobjectname="Case"
    ltngParentFieldAPIName="ParentId"
    ltngLabelFieldAPIName="CaseNumber"
    ltngHierarchyHeader="Case Hierarchy"/>
    </aura:application>

    Thanks.

  • [adinserter block='9']

  • madhulika shah

    Member
    July 27, 2018 at 7:43 AM

    Hi Anjali,

    Salesforce have added a new lightning component called lightning:tree, using this we can display the hierarchy of Salesforce. To know how to implement it and how it works, kindly refer to the link provided:

    https://cloudyabhi.blogspot.com/2017/09/lightningtree-to-display-account.html

  • Parul

    Member
    September 23, 2018 at 8:57 AM

    lightning:tree component displays 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.

  • Parul

    Member
    September 23, 2018 at 8:58 AM

    To create a tree, we have to pass in an array of key-value pairs to the items attribute.
    Below are the keys:

    disabled (Boolean): Specifies whether a branch is disabled. A disabled branch can’t be expanded. The default is false.
    expanded (Boolean): Specifies whether a branch is expanded. An expanded branch displays its nested items visually. The default is false.
    href (String): The URL of the link.
    name (String): The unique name for the item for the onselect event handler to return the tree item that was clicked.
    items (Object): Nested items as an array of key-value pairs.
    label (String): Required. The title and label for the hyperlink.

Log In to reply.

Popular Salesforce Blogs