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!