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!!!