Thursday, November 15, 2018

Lightning Treegrid : Generic Component to display hierarchy in tabular format for any sobject

In this blog, I am going to share a reusable component which can be used to display hierarchy of records along with other fields information in treegrid format.

Previously we have to use jquery to implement this but now "Lightning:treegrid" tag have been introduced which can be used to display treegrid in lightning framework.

In order to use this component, you have to pass below parameters to this components:
  • ltngcurrentRecId =  RecordId (15 or 18 digit)
  • ltngSobjectName = Object API Name
  • ltngParentFieldAPIName = Parent Field API name which create self relationship
  • ltngColumnLabelList = Specify the column label
  • ltngColumnAPINameList = Specify the API field names in same order as that of column
  • ltngHyperlinkColumn = Field API Name which will work as hyperlink for record detail page
Suppose you have display treegrid for Account hierarchy by using below syntax:

<c:SK_GenericTreeGridCmp ltngcurrentRecId="0019000000ld4kS"
ltngSobjectName="Account"
ltngParentFieldAPIName="ParentId"
ltngColumnLabelList="['Name','Type','Industry','Account Owner']"
ltngColumnAPINameList="['Name','Type','Industry','Owner.Name']"
ltngHyperlinkColumn="Name"/>

Below is output:

Suppose you have to display case hierarchy, then use below code snippet:

<c:SK_GenericTreeGridCmp ltngcurrentRecId="5009000000GJkJE"
ltngSobjectName="Case"
ltngParentFieldAPIName="ParentId"
ltngColumnLabelList="['CaseNumber','Subject','Status','Case Owner']"
ltngColumnAPINameList="['CaseNumber','Subject','Status','Owner.Name']"
ltngHyperlinkColumn="CaseNumber"
ltngHeaderValue="Case Hierarchy"/>

Below is output snapshot


Below is complete code snippet for your reference:


You can download the code from GitHub by using below URL:
Lightning-Treegrid-Generic-Component-to-display-hierarchy-in-tabular-format-for-any-sobject

Note:

  • Specify Field API properly as javascript is case sensitive. For example, specify "Name" instead of "name"
  • For adding parent field API names, provide API names properly. For example for Account owner use, "Owner.Name" instead of "owner.name".
Hope this will help!!!

8 comments:

  1. This is an awesome post. Really very informative and creative. This sharing concept is a good way to enhance the knowledge. Thank you very much for this post. I like this site very much. I like it and it help me to development very well...
    Mobile App Development Company In Chennai
    Android App Development Company In Chennai
    Android Application Development Company In Chennai
    Custom Web Application Development Company In Chennai

    ReplyDelete
  2. Hi, Is there any way we can select child rows on selecting parent row? For example, We have a requirement where once user select parent account, it should select all contacts specific to that account.

    ReplyDelete
    Replies
    1. Please ping if u got any solution regarding the same

      Delete
    2. Refer below link

      https://www.infallibletechie.com/2020/05/lightningtreegrid-select-child-rows.html

      Delete
  3. Great Blog... The information you shared is very effective for learners I have got some important suggestions from it, Keep Sharing such a nice blog.
    custom web application development company

    ReplyDelete
  4. Is it possible to NOT show toggle icon when there are no child records for a parent record in tree grid

    ReplyDelete
  5. Could you share this is an LWC format?

    ReplyDelete