Expand / Collapse Pageblock table columns in Visualforce

6:09 AM

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:

15 comments

  1. Can you make a site that is open for public? For example, your personal Ebay site with registration in Salesforce? Can you give me a tutorial on how to do this? Thanks!

    -King

    ReplyDelete
  2. Can you give me a tutorial on how to make a page with a search function in Salesforce?

    ReplyDelete
  3. Hello..

    Here is an article of how to create a public site.. Click here ... You can then purchase Force.com Site User License which is cheap to authenticate logins..

    To make a custom search here is the article Click here ..

    Let me know if you have any questions..

    Thanks - Edwin

    ReplyDelete
  4. good work very help full

    ReplyDelete
  5. Hello,

    Will you pls tell me the structure of backend. i mean what is "AccountTeamMember", is that a different object. in this given example. pls give the breif idea for this.

    ReplyDelete
  6. This is fantastic! Thanks very much for the code.

    ReplyDelete
  7. THanks so much for this awesome code! I learned how to do this in Dev 501 and promptly forgot it. Link up with me on twitter so I can give you a proper shout-out to all the Force.com worthies I know!

    ReplyDelete
  8. OMG!! Many thanks for this post. Works perfectly

    ReplyDelete
  9. Hi,

    Can we do expand all(select all,deselect all) at a time

    ReplyDelete
  10. Hey thanks really a nice post.....

    ReplyDelete
  11. very much impressed..! Thanks

    ReplyDelete
  12. Why do you need to reinvent the wheel? http://jqueryui.com/accordion/

    ReplyDelete
  13. How can we extend this to display the child records "under" the row as opposed to in a column within it?

    ReplyDelete
  14. Thank you for this code. I have some issues. I have a list of contacts on the account. The issue is that expend display the address under the list instead of the under the corresponding contact.

    Here is the code:






    View/Edit
    Action



    First Name



    Last Name



    Title



    FSL ID



    CICA ID



    Status



    Active?
















    Address



    Mailing City



    State



    Mailing Zip



    Phone



    Email








    Thank you.

    ReplyDelete