Display Salesforce Records into hierarchical View

Objective:- Display Salesforce records into hierarchy view.
Example:- Consider an example of a custom object "Product__c" which has a self lookup relationship to itself . Now we have to display all the products in hierarchy View.

Here is an example of fictitious Electronic Product Hierarchy .

Problem Statement:- There are two main challanges here.
1.  Salesforce database does not support Hierarchical SOQL queries.
 2. Lack of native visualforce component to display hierarchy data or adjacency list  data .

Possible solutions:- There are two possible solutions from my understanding.
Here is a little explanation for both solutions.
1. Use of Google visulization API org chart component to display hierarchy :- Here we query database and prepare data nodes, then we simply supply these nodes to Google Visulization API org chart.Rest,this API is enough intelligent to display hierarchy view.
2. On demand hierarchy view: Display a small subset of data on the page using visualforce native or HTML components initially and query database (using visualforce remoting) once we want to traverse deep in the hierarchy.

Complexity:- I think it would be more complicated to adjust nodes on the page after every traversal . It needs more of javascript ,css ,HTML skills expertise.

Here is the visualforce Page code for same

<!--@author:Ashish Sharma
<apex:page controller="ProductHierarchyController">
    //Load Google Visulization API
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      //Load Google orgChart Package
      google.load('visualization', '1', {packages:['orgchart']});
      function drawChart() {
          //Javascript remoting call to get all the products.
            function(result, event){
                if (event.status){ 
                    // Initilize DataTable object
                    var data = new google.visualization.DataTable();
                        data.addColumn('string', 'Chocolate');
                        data.addColumn('string', 'Parent Chocolate');
                        data.addColumn('string', 'ToolTip');
                        // add rows from the remoting results
                         for(var i =0; i<result.length;i++){
                             var r = result[i];
                             //Adding Data to DataTable object 
                             //v:r.id ---->Id of a node
                             //f:r.name ---->Name displayed on the node
                             //r.Parent_Product_c__c ----> Id of parent node
                             //r.Name ------>Tooltip text.....displays text on node hover
                             data.addRow([{v:r.Id, f:r.Name},r.Parent_Product_c__c,r.Name]);
                        var chart = new       google.visualization.OrgChart(document.getElementById('chart_div'));
                        chart.draw(data, {allowHtml:true});  
            {escape: true}
    <div id='chart_div'></div>


Here is the Controller for same

public with sharing class ProductHierarchyController{
    //Load all the products
    public static List<Product__c> loadProducts(){
        return [select Id,Name,Parent_Product_c__r.Id from Product__c order by CreatedDate DESC];

Note:- I have not considered Force.com Governor limits in above code. Apply those in your use cases. 

Recomended Links: 
1. Google Visulization API OrgChart
2.Easy Visualforce Charts With Google Visulization API

Happy Independence Day!!!


  1. Could you please help me show Product__c object struct in this case?

  2. Your really did a great job

  3. I think this is an informative post and it is very useful and knowledgeable. therefore. I would like to thank you for the efforts you have made in writing this article.jogos friv gratis 2019
    Jogos 2019
    jogos friv


Post a Comment

Popular posts from this blog

A Quick Salesforce OAuth 2.0 Usage Demonstration

Salesforce To Authorize.Net Integration

Salesforce Shopify Integration