As a continuation to my previous post of  "Displaying nested PageBlock tables", in this article i would be explaining the steps to expand/collapse your nested table. To read the previous article Click here


Why do this???

Mainly, to improve readability and user friendliness. Secondly, by doing so you better understand the power of Javascript combined with Visualforce.

Step 1:

You will need two images, one for expand and the other for collapse. Below are the two images. Right-click the images and save it to your machine.

- Upload this image into Static Resource as Plus_Image

- Upload this image into Static Resource as Minus_Image


Step 2:

Upload these files into Static Resource.

Step 3:

Create an Apex Class named "nestedqueryexample". Paste the following code.

public class nestedqueryexample
{
  public List<Account> getaccsandtmember()
  {
      List<Account> accounts = [Select Id,(Select TeamMemberRole, User.Name From Account.AccountTeamMembers), Name, BillingCountry from Account];
      return accounts;
  }
}

Step 4:

Create a Visualforce Page named "nestedqueryexample". Paste the following code.

<apex:page tabstyle="Account" controller="nestedqueryexample" showheader="false">
<script>
        function switchMenu(obj,obj1,obj2) 
        {
            var el = document.getElementById(obj);                                       
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            }
            else {
            el.style.display = '';
            }
            var e2 = document.getElementById(obj1);                                       
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            }
            else {
            e2.style.display = '';
            }
             var e3 = document.getElementById(obj2);                                       
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            }
            else {
            e3.style.display = '';
            }

        }
</script>
    <apex:pageblock >     
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Team Members                                                                               
                    </apex:facet>
                    <apex:outputpanel id="plusimage">
                          <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expand - Team Member's"/> 
                    </apex:outputpanel>
                    <apex:outputpanel id="minusimage" style="display:none;">
                          <apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Collapse - Team Member's"/>
                    </apex:outputpanel>
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                                                <apex:variable value="{!0}" var="rowNum"/>
                                                <apex:repeat var="count" value="{!accdet.AccountTeamMembers}">
                                                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                                                </apex:repeat>
                            <apex:outputText rendered="{!rowNum=0}">  No Team Members  </apex:outputText>
                        <apex:pageblocktable value="{!accdet.AccountTeamMembers}" var="tm" rendered="{!rowNum>0}">
                            <apex:column headerValue="Team Member">
                                   <apex:outputfield value="{!tm.User.Name}"/>
                             </apex:column>
                             <apex:column headerValue="Role">
                                   <apex:outputfield value="{!tm.TeamMemberRole}"/>
                             </apex:column>                          
                        </apex:pageblocktable>
                   </apex:outputpanel>     
            </apex:column>
            <apex:column headervalue="Account Name">
                    <apex:outputtext value="{!accdet.Name}"/>
            </apex:column>
            <apex:column headervalue="Billing Country">
                    <apex:outputtext value="{!accdet.BillingCountry}"/>
            </apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
</apex:page>

Code Explained:

In this example, we have used a Javascript function named "switchMenu". In our visualforce Page, we have placed the nested pageblocktable, the expand image and the collapse image into three apex:outputpanel's.

When the expand or collapse image is clicked when call the Javascript function which displays the necessary outputpanel's and hides the ones that are not required.

If you note carefully, we have passed parameters to the javascript function using $Component variable. Components inside a table or repeat tag are preappended with an integer value to identify them uniquely.

For example, our nested pageblocktable has an id "inlinetablesec". So, for the first row the id of this table would be 0:inlinetablesec and for the next 1:inlinetablesec and so on. This is done automatically by Salesforce, and we make use of this in our javascript function to display/hide the respective tables.

Hope this article helps you in some way. Write to me in case you have any difficulties.


Screenshot: