Sunday, January 15, 2017

Customizable Visualforce Component to display Hierarchy Relationship between records for any Object (Account Hierarchy, Case Hierarchy etc.)

It is very common use case to display hierarchy relation between records in tabular form (for example account hierarchy, case hierarchy etc.) In order to achieve this, I have created a reusable visualforce component for this purpose which can be customize as per requirement to display hierarchy in table tree grid.

Below are inputs required for component:
  1. Specify the object name for which you want to display hierarchy.
  2. Specify the parent field API name (used for self relationship).
  3. Specify the API names of fields separated by comma which you want to display in table tree grid.
  4. Specify the columns labels separated by comma (make sure sequence is same as that of API fields name )for table tree grid.
  5. Specify the field API name which will display as hyperlink for record detail page.

You can create new VF page and include this component and specify above inputs and component will display the hierarchy of record starting from top most parent. 

Below is visualforce component and apex class code:

For example to generate the account hierarchy, create a VF page with code :
<apex:page controller="hierarchyComponentController">
<c:hierarchyComponent sObjectAPIName="Account" sParentfieldAPIName="ParentId" ColumnsToDispaly="Name, Type, Industry" RecordLinkfieldAPIName="Name" ColumnsLabels="Account Name, Type, Industry"/>

Note: Don't forget to append record Id on visualforce page url for which you want to display hierarchy. Below is sample URL:

Hope this will help...

This can be used as base code and can be customize as per your requirements.

Looking forward for everyone's comment and feedback.

Refer Below Links for Salesforce Interview Questions


  1. Sunil, if we want to do for 5 level hierarchy, will this work ?

    1. Yes. This will work. I have tested upto 10 level deep.

  2. Hi sunil,
    Thank you very much for the code,it really helpful for me,but when i try it in my org i am getting this error

    Error: is required and must be the outermost tag in the markup at line 1 column 1

    where is c:hierarchyComponent code?can you please suggest me

    1. Hi sunil,
      I got the solution,I have done dumb mistake.

  3. Hi Sunil,

    Instead of passing single id in url,I want to display all records of object and when i click a record it should display hirarchy of that record,Can we do it with the code you provided.Can you please help in this.Its urgent


  4. I sunil thanks for your blog. I want to display parent releted child till nth level but its showing all the children at the third level .
    Can you please help me on that.

  5. What would it take to make this display in a Lightning Component?

    1. Hi Thaddeus,

      You can refer below blog to implement this in Lightning.

  6. If you think your girlfriend is cheating on you, then this is the e-book for you. Learn all of the techniques to catch her at her own game lie detectors

  7. These are common but important things we live by each day and we cannot just simply ignore that our partners may have interests different to that of our own. Dealing with it is never easy especially if you are not use to it.  what to talk to girls about

  8. Knows more about relationships? Then give a helping hand to your young ones. Let's grow the world knowledge. Head over to Thinkle Reletionship and help a seeker please.

  9. I'm having an issue where child records are appending at the bottom and not nested under the parent. I have top tier, company, & company branch hierarchy. Companies are accurately listed under Top Tier, but the branches are not listed under their appropriate company.

  10. i love reading this article so beautiful!!great job! Relatietherapie Zaandam

  11. This is awesome, but the spacing is all off. Can anyone help me with this?