Tree View in a Visualforce Page... Accounts/Contacts/Cases in a single view

4:13 PM

This article would cover steps to create a Visualforce Page which outputs a tree like structure wherein you could view Accounts, the Contacts related to the account and the Cases related to the Contact - All in one single tree structure.

Watch a DEMO here.....

Screenshot:
Step 1:

Download the Jquery Plugin from here. Upload this Zip file into Static Resources with the name "Jtreeview"

Step 2:

Create the Apex Class "treenodes" and paste the below code.



public class treenodes {

/* Wrapper class to contain the nodes and their children */
public class cNodes
{

 public List<Contact> parent {get; set;}
 Public Account gparent {get;set;}

 public cNodes(Account  gp, List<Contact> p)
 {
     parent = p;
     gparent = gp;
 }
}
/* end of Wrapper class */ 

Public List<cNodes> hierarchy;

Public List<cNodes> getmainnodes()
{
    hierarchy = new List<cNodes>();
    List<Account> tempparent = [Select Id,Name from Account];
    for (Integer i =0; i< tempparent.size() ; i++)
    {
        List<Contact> tempchildren = [Select Id,FirstName,LastName,(Select Id,CaseNumber,Subject from Cases) from Contact where AccountId = :tempparent[i].Id];
        hierarchy.add(new cNodes(tempparent[i],tempchildren));
     }   
    return hierarchy;
}   
}


Step 3:

Create a Visualforce Page "TreeViewDemo" and paste the below code.



<apex:page sidebar="false" controller="treenodes" showheader="false">
<!-- Include the Jquery Script files -->
    <link rel="stylesheet" href="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}"/>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
<!-- End of Javascript files -->
<script type="text/javascript">
        $(function() {
            $("#tree").treeview({
                collapsed: false,
                animated: "medium",
                control:"#sidetreecontrol",
                persist: "location"
            });
        })
</script>
<br/> <br/> <br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;">&nbsp;</div>
<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>
<ul id="tree">
    <apex:repeat value="{!mainnodes}" var="parent">
        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>
             <ul>
                 <apex:repeat value="{!parent.parent}" var="child">
                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>
                        <ul>
                            <apex:repeat value="{!child.Cases}" var="gchildren">
                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>
                            </apex:repeat>
                        </ul>       
                    </li>
                 </apex:repeat>  
             </ul>  
        </li>
    </apex:repeat>
</ul>
<!-- End of Tree -->       
</apex:page>




Note: You may modify the hierarchy by replacing the Objects and the queries with your required ones. Also, you may have to optimize the apex class to handle more than 100 queries as this demo has a SOQL query within a FOR loop (An Example of bad programming practice).

23 comments

  1. Hi Varun Gupta... Saw your comment regarding the error at line 23.. Were you able to solve the issue??, i am not seeing a problem with the code..

    ReplyDelete
  2. I cannot get + or - pics.
    Do I need to upload them.

    Except that everything works fine.

    ReplyDelete
    Replies
    1. Hi Narasimha,
      M looking for the same functionality.Can you please forward me the same,if you have @ ayush.topper@gmail.com

      Regards,
      Ayush

      Delete
  3. The zip file which you download for the Jquery plugin will contain the images.. Does it not?

    ReplyDelete
  4. I want to make a tree view like this but i want to make it more dynamic. Suppose i have few groups like

    ABC
    BCD
    DEC
    ERP
    SER

    all these are groups as i click on ABC it should show BCD group same as i click on BCD it should be show DEF group. So i want to make this tree view.
    Please help me to make this type of tree view

    Thanks
    Varun Gupta

    ReplyDelete
  5. Sorry could not reply on time.
    Yes sir now its workin

    ReplyDelete
  6. Was there a reason the images weren't working? Dont work for me either... love the blog post though! Thx!

    ReplyDelete
  7. Will check the problem with the images and update soon..

    ReplyDelete
  8. there is no such folder of images in jquery zip file...could you please check this out

    ReplyDelete
  9. Can you please Send Zip File

    ReplyDelete
  10. This is the problem
    Child Parent

    1. ABC BCD
    2. BCD DEF
    3. DEF GHI
    4. GHI
    5. 123 456
    6. 678 456


    OUTPUT IS: in the form of tree

    1.GHI
    DEF
    BCD
    ABC

    2. 456
    123

    678

    bt output is:

    1. BCD
    ABC
    2. DEF
    BCD
    ABC
    3. GHI
    DEF
    BCD
    ABC
    4. 456
    123
    5. 456
    678

    ReplyDelete
  11. plz send me reply asap

    ReplyDelete
  12. Good Post... but there is a big problem with this code...
    it gives an error ,if you have more than 3000 records for contact, "System.LimitException: Too many SOQL queries: 101",
    and it happens because DML operation is used inside the for loop.

    Thanks
    Amit

    ReplyDelete
  13. Hi I am not able to see the demo as I am being asked to login. How can I see it?

    ReplyDelete
  14. I have account hierarchy in place. I want to have a custom button on account detail page which will open a visualforce page. This visualforce page should display all account hierarchy based related lists of opportunity, contacts, and leads. -------------------------
    Suppose parent account is A. It has 2 childs, A1, A2. Now, A1 has 2 childs A11, A12. A2 has 3 childs A21, A22, A23. If I click on A in the tree, the vf page should show all opportunities, contacts, and leads of A, A1, A2, A11, A12, A21, A22, and A23. If I click on A2, then the vf page should show all opportunities of A2, A21, A22, and A23 only. How is that possible?

    ReplyDelete
  15. The demo and download Jquery Plugin link is not working. Update it!

    ReplyDelete
  16. This is probably a stupid question, but how are you initiating the treeview? I am not seeing it as a choice to embed as a visualforce page. I am hoping this will help me with a problem I have been trying to solve that involves a tree view of Account - Certain types of opportunites - certain types of custom object records - certain types of custom object records related to the node above - certain partner account. Account is the new customer, opportunity is a specific type of sale, custom object record is one type of activity, related custom object is a routed request for service - and the partner account represents all of the locations this service was required to be done. I then want to show this tree with all levels on Account, on opportunity with all lower levels and on the custom object with it's lower levels. What do you think?

    ReplyDelete
  17. Thanks Vijay for this awesome post!

    ReplyDelete
  18. Hi, how I can see only active account with child contacts and child cases. I had 3 objects (master-detail) , and I need show only 1. master object with all child objects

    ReplyDelete
  19. Thanks... This is the thing i was looking for.

    ReplyDelete
  20. Thanks ... have a good day!

    ReplyDelete