+ Start a Discussion
Ayush UjjainAyush Ujjain 

PageBlock table with Collapse/Expand functionality on onclick event.

Salesforce Expert,
I am new to Salesforce,I have a scenario :

I have a account list that contains few fields like (Name,Biling state,phone and few more) and with that I want a button called Show, whenever i click on show that will give me selected account description and account name. But the output will be in expand/collapse patterm in that list itself.

I wrote wraper class for this using pageblock table but my output is not coming as expected.Can any 1 pls help.

- Ayush
Best Answer chosen by Ayush Ujjain
suresh sanneboina 4suresh sanneboina 4
Hi Ayush,

<apex:page controller="AccountSelectClassController">
    <script>
        function doClick (accountdesc) {
            alert(accountdesc);
            return false;
        }
    </script>
    <apex:form >
        <apex:pageBlock id="table1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Selected Account's  Description" action="{!processSelected}" rerender="table1" rendered="{!showall}"/>
                <apex:commandButton value="Show All" action="{!showAllRecords}" rendered="{!showselected}"/>
            </apex:pageBlockButtons>
 
            <apex:pageBlockSection title="All Accounts" columns="2" >
                <apex:outputPanel id="showall" rendered="{!showall}">
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" >
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column value="{!accWrap.acc.Description}" />
                    <apex:column headerValue="Button">
                        <apex:commandButton onclick="return doClick('{!accWrap.acc.Name}');" value="show Info"/>
                    </apex:column>
                </apex:pageBlockTable>
                </apex:outputPanel>
                <apex:outputPanel id="showSelected" rendered="{!showselected}">
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>   
                    <apex:column value="{!c.description}" headerValue="Description"/>
                </apex:pageBlockTable>
                </apex:outputPanel>
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
 
</apex:page>

 

All Answers

Anuj PatelAnuj Patel
Hi,

It can be done. Please refer to the links I have added below.
https://developer.salesforce.com/forums?id=906F000000097IMIAY
https://help.salesforce.com/apex/HTViewSolution?id=000181821&language=en_US
https://developer.salesforce.com/forums?id=906F000000097vcIAA

You can pick any based on your sepcific requirements. 



Please mark it as the best answer if you find it useful.

Thanks,
Anuj.



 
suresh sanneboina 4suresh sanneboina 4
Hi Ayush,

Can you show the code.
Ayush UjjainAyush Ujjain

Hi Suresh,

please find the code below,
Here I created one another table for my desired output, but i dont want other table I want the original table only to get expand /collapse to show my output.

Vf page:
<apex:page controller="AccountSelectClassController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Selected Account's  Description" action="{!processSelected}" rerender="table2"/>
            </apex:pageBlockButtons>
 
            <apex:pageblockSection title="All Accounts" columns="2">
 
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" >
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column value="{!accWrap.acc.Description}" />
                    
                </apex:pageBlockTable>
  <script ="text/javascript">
  
  
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>   
                    <apex:column value="{!c.description}" headerValue="Description"/>
                    <apex:column value="{!c.Test_Vf__c}" headerValue="UT"/>
                    
                  
                </apex:pageBlockTable>
                
                

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


Controller:
// Wrapper Class 

public class AccountSelectClassController
{
 
    //variable Declaration
    public List<wrapAccount> wrapAccountList {get; set;}
    public List<Account> selectedAccounts{get;set;}
 
     // Controller
    public AccountSelectClassController()
    {
        if(wrapAccountList == null) 
        {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone,Description,Test_Vf__c from Account]) 
            {
                // Adding records to the list
                wrapAccountList.add(new wrapAccount(a));
            }
        }
    }
 
 // Method 
 
    public void processSelected() 
    {
    selectedAccounts = new List<Account>();
 
        for(wrapAccount wrapAccountObj : wrapAccountList) 
        {
            if(wrapAccountObj.selected == true)
             {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
    }
 
    // Wrapper Class
    public class wrapAccount 
    {
        public Account acc {get; set;}
        public Boolean selected {get; set;}
 
        public wrapAccount(Account a)
         {
            acc = a;
            selected = false;
        }
    }
}

Ayush UjjainAyush Ujjain
Hi Suresh
Any luck?

SF Experts,
Can any1 else give a try,I nid it asap.

Thanks,
Ayush
suresh sanneboina 4suresh sanneboina 4
Hi Ayush,

Sorry For the late reply

Please find the below code
Vf Page:

<apex:page controller="AccountSelectClassController">
    <apex:form >
        <apex:pageBlock id="table1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Selected Account's  Description" action="{!processSelected}" rerender="table1" rendered="{!showall}"/>
                <apex:commandButton value="Show All" action="{!showAllRecords}" rendered="{!showselected}"/>
            </apex:pageBlockButtons>
 
            <apex:pageBlockSection title="All Accounts" columns="2" >
                <apex:outputPanel id="showall" rendered="{!showall}">
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" >
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column value="{!accWrap.acc.Description}" />
                </apex:pageBlockTable>
                </apex:outputPanel>
                <apex:outputPanel id="showSelected" rendered="{!showselected}">
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>   
                    <apex:column value="{!c.description}" headerValue="Description"/>
                </apex:pageBlockTable>
                </apex:outputPanel>
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
 
</apex:page>

Controller:
public class AccountSelectClassController
{
 
    //variable Declaration
    public List<wrapAccount> wrapAccountList {get; set;}
    public List<Account> selectedAccounts{get;set;}
    public Boolean showall {get;set;}
    public Boolean showselected {get;set;}
 
     // Controller
    public AccountSelectClassController()
    {
        if(wrapAccountList == null) 
        {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone,Description from Account]) 
            {
                // Adding records to the list
                wrapAccountList.add(new wrapAccount(a));
            }
        }
        showall =true;
    }
 
 // Method 
 
    public void processSelected() 
    {
    selectedAccounts = new List<Account>();
 
        for(wrapAccount wrapAccountObj : wrapAccountList) 
        {
            if(wrapAccountObj.selected == true)
             {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
        showall =false;
        showselected =true;
    }
    
    public void showAllRecords()
    {
        showall =true;
        showselected =false;
    }
 
    // Wrapper Class
    public class wrapAccount 
    {
        public Account acc {get; set;}
        public Boolean selected {get; set;}
 
        public wrapAccount(Account a)
         {
            acc = a;
            selected = false;
        }
    }
}
Ayush UjjainAyush Ujjain
Hi Suresh,
Thanks for your help but still have one thing. We have Select Account description button at the top I want to show that in list itself( In one of the column of list) and then when ever we Click that button it show description there only.(Like in between two row there will be one popup or small window kind of thing there we can see the things wat we have in select account description.
suresh sanneboina 4suresh sanneboina 4
Hi Ayush,

<apex:page controller="AccountSelectClassController">
    <script>
        function doClick (accountdesc) {
            alert(accountdesc);
            return false;
        }
    </script>
    <apex:form >
        <apex:pageBlock id="table1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Selected Account's  Description" action="{!processSelected}" rerender="table1" rendered="{!showall}"/>
                <apex:commandButton value="Show All" action="{!showAllRecords}" rendered="{!showselected}"/>
            </apex:pageBlockButtons>
 
            <apex:pageBlockSection title="All Accounts" columns="2" >
                <apex:outputPanel id="showall" rendered="{!showall}">
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" >
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column value="{!accWrap.acc.Description}" />
                    <apex:column headerValue="Button">
                        <apex:commandButton onclick="return doClick('{!accWrap.acc.Name}');" value="show Info"/>
                    </apex:column>
                </apex:pageBlockTable>
                </apex:outputPanel>
                <apex:outputPanel id="showSelected" rendered="{!showselected}">
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>   
                    <apex:column value="{!c.description}" headerValue="Description"/>
                </apex:pageBlockTable>
                </apex:outputPanel>
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
 
</apex:page>

 
This was selected as the best answer
Ayush UjjainAyush Ujjain
Thanks Suresh for your time. I am pretty new to salesforce still learning many things from google or trailhead.Can you guide me some links or books that will help me to increase my knowledge on VF and apex.
suresh sanneboina 4suresh sanneboina 4
Hi Ayush,

You can find everything about salesforce from below links

https://developer.salesforce.com
https://developer.salesforce.com/docs/
https://developer.salesforce.com/page/Cheat_Sheets
Ayush UjjainAyush Ujjain
Thanks Suresh...Sorry to bugging you  I nid to change one thing but no luck .
As per your code When i click on Selcted Account button its taking me to next page , I want to stay in same page and show in details just below that row(In a table format to in a particular fomat).Can we do that ?
suresh sanneboina 4suresh sanneboina 4
<apex:page controller="AccountSelectClassController">
    <apex:includeScript value="{!$Resource.jsforce}" />
    <script>
        //var conn = new jsforce.Connection({accessToken: '{!$Api.Session_Id}'});
        function doClick (accountdesc) {
        alert(accountdesc);
          /*  var soqlQuery = "SELECT Id, Name FROM Account where Id ='" + accountid + "'";
            conn.query (soqlQuery, function (err, res) {
                if (err) {
                    alert ('NG:' + err);
                }
                for (var i=0; i<res.records.length; i++) {
                  var record = res.records[i];
                  alert(record.Name);
                }
            });*/
            return false;
        }
    </script>
    <apex:form >
        <apex:pageBlock id="table1">
            <apex:pageBlockButtons >
                <apex:commandButton value="Selected Account's  Description" action="{!processSelected}" rerender="table1" rendered="{!showall}"/>
                <apex:commandButton value="Show All" action="{!showAllRecords}" rendered="{!showselected}"/>
            </apex:pageBlockButtons>
 
            <apex:pageBlockSection title="All Accounts" columns="2" >
                <apex:outputPanel id="showall" rendered="{!showall}">
                <apex:pageBlockTable value="{!wrapAccountList}" var="accWrap" id="table" >
                    <apex:column >
                        <apex:facet name="header">
                            <apex:inputCheckbox onclick="selectAllCheckboxes(this,'inputId')"/>
                        </apex:facet>
                        <apex:inputCheckbox value="{!accWrap.selected}" id="inputId"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Name}" />
                    <apex:column value="{!accWrap.acc.BillingState}" />
                    <apex:column headerValue="Button">
                        <apex:commandButton onclick="return doClick('{!accWrap.acc.Name}');" value="show Info"/>
                    </apex:column>
                    <apex:column value="{!accWrap.acc.Description}" rendered="{!accWrap.selected}"/>
                </apex:pageBlockTable>
                </apex:outputPanel>
                <apex:outputPanel id="showSelected" rendered="{!showselected}">
                <apex:pageBlockTable value="{!selectedAccounts}" var="c" id="table2" title="Selected Accounts">
                    <apex:column value="{!c.Name}" headerValue="Account Name"/>   
                    <apex:column value="{!c.description}" headerValue="Description"/>
                </apex:pageBlockTable>
                </apex:outputPanel>
            </apex:pageblockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
public class AccountSelectClassController
{
 
    //variable Declaration
    public List<wrapAccount> wrapAccountList {get; set;}
    public List<Account> selectedAccounts{get;set;}
    public Boolean showall {get;set;}
    public Boolean showselected {get;set;}
 
     // Controller
    public AccountSelectClassController()
    {
        if(wrapAccountList == null) 
        {
            wrapAccountList = new List<wrapAccount>();
            for(Account a: [select Id, Name,BillingState, Website, Phone,Description from Account]) 
            {
                // Adding records to the list
                wrapAccountList.add(new wrapAccount(a));
            }
        }
        showall =true;
    }
 
 // Method 
 
    public pagereference processSelected() 
    {
    selectedAccounts = new List<Account>();
 
        for(wrapAccount wrapAccountObj : wrapAccountList) 
        {
            if(wrapAccountObj.selected == true)
             {
                selectedAccounts.add(wrapAccountObj.acc);
            }
        }
        //showall =false;
        //showselected =true;
        return null;
    }
    
    public void showAllRecords()
    {
        showall =true;
        showselected =false;
    }
 
    // Wrapper Class
    public class wrapAccount 
    {
        public Account acc {get; set;}
        public Boolean selected {get; set;}
        public Boolean displayinfo {get;set;}
 
        public wrapAccount(Account a)
         {
            acc = a;
            selected = false;
            displayinfo =false;
        }
    }
}

 
Ayush UjjainAyush Ujjain
Suresh its giving error

Error: Static Resource named jsforce does not exist. Check spelling
Ayush UjjainAyush Ujjain
Does it work or u ?
 
suresh sanneboina 4suresh sanneboina 4
yes
suresh sanneboina 4suresh sanneboina 4
the description is not dispalyed by default. When you select the check box you are able to display the description info of that account.