Tuesday, 4 December 2012

Hierarchy in VisualForce


Hierarchy in 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<account> acc;
    
    public List<accountWrap> accountList { get; set; }
    public accconhierarchy (){
        List<contactWrap> cw;
        accountList = new List<accountWrap>();
        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<contactWrap>();
            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<contactWrap> contactset{get;set;}
        public accountWrap(account a,boolean b, List<contactWrap> 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 

<apex:page controller="accconhierarchy">
  <apex:form >
      <apex:pageBlock >
      <style type="text/css">
        .showContacts {
            background: transparent url('/img/alohaSkin/twisty_sprite.png') 0 0 no-repeat;
        }
        .hideContacts {
            background: transparent url('/img/alohaSkin/twisty_sprite.png') 0 -11px no-repeat;
        }
    </style>
                  <apex:outputPanel layout="none"
                        rendered="{!accountList.size!=0}">
                        <table id="tableAccount" class="list" border="0" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr class="headerRow">
                                    <th class="actionColumn">Action</th>
                                    <th>Account Name</th>
                                    <th>Industry</th>
                                    <th>Billing Country</th>
                                    <th>Createdby</th>
                                </tr>
                            </thead>
                            <tbody>
                            <apex:repeat id="repeatAccount"
                                value="{!accountList}"
                                var="item">
                                <apex:variable var="acc" value="{!item.oAccount}" />   
                                <tr id="{!$Component.repeatAccount}:account" class="dataRow">
                                    <td class="actionColumn">
                                        <apex:inputCheckbox id="selectAccountRow"
                                            value="{!item.IsSelected}"
                                            onclick="javascript:toggleSelectAll(this, '{!$Component.repeatAccount}');"/>
                                    </td>
                                    <td class="dataCell">
                                        <apex:outputLink id="linkShowHide" value="javascript:toggleContactRow('{!$Component.repeatAccount}')">
                                            <img id="{!$Component.repeatAccount}:Img" src="/s.gif" class="showContacts" border="0" height="11px" width="11px" style="padding-right: 4px;"/>
                                            <apex:outputField value="{!acc.Name}" />
                                        </apex:outputLink>
                                    </td>
                                    <td class="dataCell"><apex:outputField value="{!acc.Industry}" /></td>
                                    <td class="dataCell"><apex:outputField value="{!acc.billingcountry}" /></td>
                                    <td class="dataCell"><apex:outputField value="{!acc.CreatedById}" /></td>
                                </tr>

                                <tr id="{!$Component.repeatAccount}:Contact" class="dataRow" style="display:none;">
                                    <td colspan="100" style="padding:10px; padding-left: 45px;">
                                        <h3>Contacts</h3>
                                        <br/>                                        
                                        <apex:outputPanel layout="none">                                            
                                            <table id="tableAccountContacts" class="list" border="0" cellpadding="0" cellspacing="0">
                                                <thead>
                                                    <tr class="headerRow">
                                                        <th class="actionColumn">Action</th>
                                                        <th>Name</th>
                                                        <th>Email</th>
                                                        <th>Phone</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                <apex:repeat id="repeatAccountContacts"
                                                    value="{!item.contactSet}"
                                                    var="subitem">
                                                    <apex:variable value="{!subitem.oContact}" var="con" />
                                                    <tr class="dataRow">
                                                        <td class="actionColumn"><apex:inputCheckbox id="selectContactRow" styleclass="ContactCheckbox" value="{!subitem.IsSelected}"/></td>
                                                        <td class="dataCell"><apex:outputField value="{!con.Name}" /></td>
                                                        <td class="dataCell"><apex:outputField value="{!con.email}"/></td>
                                                        <td class="dataCell"><apex:outputField value="{!con.phone}" /></td>                                                        
                                                    </tr>
                                                </apex:repeat>
                                                </tbody>
                                            </table>
                                        </apex:outputPanel>
                                    </td>
                                </tr>
                            </apex:repeat>
                            </tbody>
                        </table>
                    </apex:outputPanel>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script>
        jQuery.noConflict();
        function toggleContactRow(rowId) {
            try {
                var AccountImg = jQuery(document.getElementById(rowId + ":Img"));
                var ContactsRow = jQuery(document.getElementById(rowId + ":Contact"));
                if (AccountImg.hasClass("hideContacts")) {
                    AccountImg.attr("class", "showContacts");
                    ContactsRow.hide();
                }
                else {
                    AccountImg.attr("class", "hideContacts");
                    ContactsRow.show();
                }
            }
            catch (e) { alert(e); }
        }  

        function toggleSelectAll(elCheckbox, rowId) {
            try {
                var SelectAll = jQuery(elCheckbox);
                var ContactsRow = jQuery(document.getElementById(rowId + ":Contact"));
                ContactsRow.find(".ContactCheckbox").each(function() {
                    jQuery(this).prop("checked", SelectAll.is(":checked"));
                });
            }
            catch (e) { alert(e); }
        }

    </script> 
    </apex:pageBlock>
  </apex:form>
</apex:page>

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

No comments:

Post a Comment

Why to use Database.Stateful()?

Database Stateful is interface. It is used in batch classes to maintain the state of the class across transactions i.e. if you want to use ...