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 opportunity Stage pick list value i have to display the column in different colors in 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: 





That's it..

Posted in: Apex Examples,apex:pageblockTable rows with different colors in vf page. CSS in Visualforce page,Salesforce,salesforce training,Visualforce,Visualforce examples