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.

One Reply to “Hierarchy in VisualForce”

  1. Amazing work on this particular content! I personally cannot communicate just how this created a big difference in my own thought process in this matter. You actually wrote a really good post right here. I really like it.

Comments are closed.