Hierarchy in VisualForce

Hierarchy in VisualForce is an interesting feature unique to VisualForce

This is an example of how to build a hierarchy Lists in VF page with select checkboxes. It will have a checkbox at parent level with which you can select all the child automatically. It has a neat link with which you can show or hide children under a parent row. It uses jquery libraries for achieving this. It has a list of accounts with each accounts displaying all its contacts in a hierarchy view.

Apex Class

public class accconhierarchy {
    Private list acc;
   
    public List accountList { get; set; }
    public accconhierarchy (){
        List cw;
        accountList = new List();
        acc = [select id,name,industry,billingcountry,createdbyid,(select id,name,email,phone from contacts) from account limit 20];
        for(account a:acc){
            cw = new list();
            For(contact co : a.contacts){
               cw.add(new contactWrap(co));
            }
            accountList.add(new accountWrap(a,false,cw));
        }
    }
   
    public class accountWrap{
        public account oAccount{get;set;}
        public boolean isSelected{get;set;}
        public List contactset{get;set;}
        public accountWrap(account a,boolean b, List c){
            oAccount=a;
            isSelected=b;
            contactset =c;           
        }
    }
   
    public class contactWrap{
        public contact oContact{get;set;}
        public boolean isSelected{get;set;}       
        public contactWrap(contact a){
            oContact=a;
            isSelected=false;                      
        }
    }
   
}

Visualforce Page


 
     

 



                        rendered=”{!accountList.size!=0}”>


                           


                                   Action


                                   Account Name


                                   Industry


                                   Billing Country


                                   Createdby




                                value=”{!accountList}”
                                var=”item”>
                                  


                                    

                                            value=”{!item.IsSelected}”
                                            onclick=”javascript:toggleSelectAll(this, ‘{!$Component.repeatAccount}’);”/>
                                   


                                    
                                       
                                           
                                           


Contacts


                                               
                                                       Action
                                                       Name
                                                       Email
                                                       Phone

                                                    value=”{!item.contactSet}”
                                                    var=”subitem”>
                                                        

                       
                   
   
   
 

JS function toggleContactRow is used to show or hide contacts and toggleSelectAll is for header level checkbox at the parent Level.