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).

Share This Story

Tags: ,

23 comments

  1. Edwin RaymondMay 5, 2011 at 8:40 PM

    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. Charan TejJune 1, 2011 at 11:13 PM

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

    Except that everything works fine.

    ReplyDelete
    Replies
    1. UnknownMay 3, 2016 at 5:50 AM

      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. Edwin RaymondJune 2, 2011 at 3:01 PM

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

    ReplyDelete
  4. varun guptaJuly 13, 2011 at 10:50 AM

    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. varun guptaJuly 13, 2011 at 10:51 AM

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

    ReplyDelete
  6. AnonymousJuly 26, 2011 at 5:32 AM

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

    ReplyDelete
  7. EdwinJuly 29, 2011 at 4:29 PM

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

    ReplyDelete
  8. AnonymousFebruary 5, 2012 at 8:21 PM

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

    ReplyDelete
  9. AnonymousFebruary 8, 2012 at 5:11 AM

    Can you please Send Zip File

    ReplyDelete
  10. AnonymousFebruary 22, 2012 at 2:18 AM

    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. AnonymousFebruary 22, 2012 at 2:19 AM

    plz send me reply asap

    ReplyDelete
  12. AmitkumarsinghMarch 26, 2012 at 2:34 AM

    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. CalvinAugust 22, 2012 at 1:10 PM

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

    ReplyDelete
  14. AnonymousSeptember 3, 2012 at 6:47 AM

    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. rar_4uFebruary 22, 2013 at 5:26 AM

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

    ReplyDelete
  16. AnonymousJuly 18, 2013 at 2:02 PM

    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. AnonymousAugust 13, 2014 at 12:37 PM

    Thanks Vijay for this awesome post!

    ReplyDelete
  18. AnonymousAugust 27, 2014 at 5:50 AM

    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. Pradeep DaniOctober 7, 2015 at 12:31 AM

    Thanks..

    ReplyDelete
  20. I/\/\/-\/\/UEL'sJuly 18, 2016 at 12:06 AM

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

    ReplyDelete
  21. AnonymousJuly 5, 2020 at 3:33 AM

    Thanks ... have a good day!

    ReplyDelete