Data-driven styling

A useful technique when creating a custom user interface with Visualforce is to conditionally style important pieces of information to draw the user's attention to them as soon as a page is rendered.

Most Visualforce developers are familiar with using merge fields to provide sObject field values to output tags, or to decide if a section of a page should be rendered. In the tag shown below, the merge field, {!account.Name}, will be replaced with the contents of the name field from the account sObject:

<apex:outputField value="{!account.Name}"/>

Merge fields can also contain formula operators and be used to dynamically style data when it is displayed.

In this recipe we will display a table of campaign records and style the campaign cost in green if it was within budget, or red if it was over budget.

How it works…

Opening the following URL in your browser displays the ConditionalColour page: https://<instance>/apex/ConditionalColour. Here, <instance> is the Salesforce instance specific to your organization, for example, na6.salesforce.com.

A list of campaigns is displayed, with the campaign cost rendered in red or green depending on whether it came in on or over budget.

Conditional styling is applied to the Actual Cost column by comparing the actual cost with the budgeted cost.

<apex:column style="color:
   {!IF(AND(NOT(ISNULL(campaign.ActualCost)), 
   campaign.ActualCost<=campaign.BudgetedCost), 
  "lawngreen", "red")}" value="{!campaign.ActualCost}"/>