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:

I recently had to work on a requirement which included nested queries and nested tables. Thanks to the forums and the developer guides, i got the information from a couple of posts and articles.

This article is just a consolidation of information spread over many places.

Scenario:

I will have to display a list of Accounts. Under each account i will have to display the associated Account Team Members.


SOQL Query:

The SOQL Query to retrieve both the Account Details as well as the Account Team Member details will be as follows..

Select Id,(Select TeamMemberRole, User.Name From Account.AccountTeamMembers), Name, BillingCountry from Account

This is what is called a nested query which is quite obvious from the fact that you can see two "Select" statements in a single query..

Now, let us create a simple visualforce page to display the query results.


Visualforce Page:

<apex:page tabstyle="Account" controller="nestedqueryexample">
    <apex:pageblock> 
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Team Members                                                                               
                    </apex:facet>
                    <apex:pageblocktable value="{!accdet.AccountTeamMembers}" var="tm">
                        <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: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>  

Controller (Apex Class):

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;
  }
}

Your final output will look like this.


Learn More - Click here

I just recently enabled the new User Interface of Salesforce.com and found it to be really interesting...

Here is how you can enable it in your sandbox

• Login to your sandbox. Navigate to Setup -> App Setup -> User Interface . You can then enable the option as shown in the picture below.

The new theme is supported only in the latest version of  browsers like Firefox, Safari and Internet Explorer . You will get a popup window displaying this message.

Now click on any tab to see the new User Interface.

Setup ,however has the old theme. Below are some screen shots to make you go crazy!!



Here is a look of a Visualforce Page


And Report looks like this



I think most of you would like this... Doesn't it look cool??