Displaying Visualforce page Column values with different colors in PageBlock Table.

Displaying Visualforce page Column values with different colors in PageBlock Table.

Displaying Visualforce page Column values with different colors in PageBlock Table.

Hi,

I have one requirement that based on the Opportunity Stage picklist value I have to display the column in different colors on Visualforce Page.

Controller :
public class OpportunityCLS {
public List<opportunity> oppList = new List<opportunity>();

public List<opportunity> getRecords(){
 oppList = [Select Name,CloseDate,Amount,StageName from Opportunity];
 return oppList;

}


}

Visualforce Page:

<apex:page controller="OpportunityCLS">
  <apex:pageblock >
   <apex:pageblockTable value="{!Records}" var="opp">
   <apex:column value="{!opp.Name}"/>
   <apex:column >
    <apex:facet name="Header">Amount</apex:facet>
    <div style="background-color:{!If(opp.StageName =='Negotiation/Review','#7CFC00',If(opp.StageName =='Closed Won','#DEB887','#DC143C'))};">
{!opp.StageName}
    </div>
   </apex:column>  
   <apex:column value="{!opp.Amount}"/>
   <apex:column value="{!opp.CloseDate}"/>   
   
   </apex:pageblockTable>  
  </apex:pageblock>

</apex:page>


Output: 

You can assign CSS classes dynamically based on the picklist value using styleClass attribute:

<style>
.errorClass {
    background-color: red;
}
.normalClass {
    background-color: green;
}
</style>

<apex:pageBlock>
    <apex:pageBlockTable value="{!testObjectList}" var="item">
        <apex:column value="{!item.name}" 
                     styleClass="{!IF(item.status__c == 'Critical','errorClass','normalClass')}"/>
        <apex:column value="{!item.status__c}" 
                     styleClass="{!IF(item.status__c == 'Critical','errorClass','normalClass')}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

The result page: