How to Cutomize pageBlockTable Columns On The Fly in Your VF Pages?



A few days ago I can across a developer's post having difficulty customizing pageBlockTable columns on the fly. The fact is that pageBlockTable component is designed very flexible by nature and is quite powerful component.

In this article I will demonstrate how you can customize your columns and show to the user what is required to be shown. This is specially useful when creating reports.

Imagine we have a Visualforce page which views Opportunities' information with following characteristics:
  • Opportunity Name
  • Account Name
  • Opportunity Amount
  • Fixed Interest Amount (%25 of the Amount)
  • Opportunity Status (based on Close Date, if it is passed then "Closed" if not then "Open")
Let's look at the controller's code first. It is very straight forward, it has only one method:


public class myOppsController

{

private List<Opportunity> opportunities;

public List<Opportunity> getOpportunities()

{

opportunities = [Select Name, Amount, Account.Name, CloseDate from Opportunity];

return opportunities;

}

}





getOpportunities() property returns a list of Opportunities.
Note: for the simplicity of the example I did not put any conditions or limit in number of rows that we return. However, if you have more than 1000 Opportunity records then before running this code add some conditions or limits to the query.

Well, now let's take a moment to see what we need to be able to customize the view of the selected columns.



<apex:page controller="myOppsController" tabStyle="Opportunity">
<apex:form >
<apex:sectionHeader title="Opps List" />
<apex:pageBlock title="" id="pageBlock">
<apex:pageMessages ></apex:pageMessages>
<apex:pageBlockTable value="{!opportunities}" var="o" rendered="{!NOT(ISNULL(opportunities))}">
<apex:column value="{!o.Name}"></apex:column>
<apex:column value="{!o.Account.Name}"></apex:column>
<apex:column value="{!o.Amount}"></apex:column>
<apex:column >
<apex:facet name="header">Fix Interest</apex:facet>
{! o.Amount * 0.25 }
</apex:column>
<apex:column >
<apex:facet name="header">Status</apex:facet>
<div style="background-color:{!IF(o.CloseDate > TODAY(),'#7CFC00', '#FFA07A')}">
{!IF(o.CloseDate > TODAY(),'Open', 'Closed')}
</div>
</apex:column>

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



As you can see in the above code by using the putting a template in the body of the apex:Column component you can actually go free style!

10 comments:

  1. Hi, I tried to add the "stageName" field as a column, but got a SQL error. Is it because the stagename is a picklist field? How to add it then?
    Thanks.
    CK

    ReplyDelete
  2. Also, is it possible to add the link to the opportunity on the name so users can click on the opportunity name to view the details?
    Thanks.

    ReplyDelete
  3. ok, I found answer to my first question, I added Stagename in the public class query.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. ok, i figured the answer to the second question. (am i a quick learner? :p)



    apex:facet name="header" Opp Name /apex:facet

    apex:outputLink value="/{!o.Id}" target="_blank">{!o.Name}apex:outputLink>

    apex:column>

    ReplyDelete
  6. Hi,

    I am facing a problem I like your article I just want to know that How I can apply custom link. For Example You are changing color of field which is conditional but I want to do that.............................
    A column has value lets suppose TRUE/FALSE you can say A Status Column. If a row value will be False then it should become RED which is done by your help but next step is only those rows which have false status can clickable means "False" which is showing in red color should also have a link which can call a APEX function in controller and pass ID of row in that function please help me out in this snario...............

    ReplyDelete
  7. Could you please help me with the following:
    How to add a row to the pageBlockTable when we click on add button and remove the selected row by clicking on the remove button?

    ReplyDelete
  8. The only way is to "Add" a record (new object) to the list you are binding with the pageBlockTable.

    To remove a row, too, remove a object from the list and fresh the page, then the table show one line less.

    ReplyDelete
  9. Thanks Sam.
    Could you please give me a sample code to add row as I am new to apex.

    ReplyDelete
  10. How can we fill the color to half the cell based on condition
    like if duration__c=30min then it should fill half the cell
    if duration__c=60min then fill full cell.
    Would you please help

    Thanks in Advance.

    ReplyDelete