Saturday 17 December 2011

Making the color for each cell in a pageblocktable based on condition


Hi,


I am trying to show you how to change the colors of cells of pageBlockTable in visualforce based on condition
and also show you how to place the string literal in the cells based condition.


Here I have created an object with the name called Employeetest__c and having three fields are 
Name(text),Status__c(checkbox),Salary__c(number).


Requirement:


When the salary>=XXX and salary<XXX then make the color for that cell under the Salary column.
Like that for different conditions we need to set different colors for each cell based on condition.


and When status checkbox is checked then then place the "Active" in the cell  under the Status column otherwise 
place the "InActive" as string literals.


controller:
=======

public class employeetestController{


    public List<Employeetest__c> lstemp=new List<Employeetest__c>();
    
    public List<Employeetest__c> getrecs(){
    
            lstemp=[select name,salary__c,status__c from Employeetest__c];
            return lstemp;
       }
    
}


page:
======


<apex:page controller="employeetestController"  sidebar="false">
<apex:form >
<apex:image value="{!$Resource.TestName}"/>
<apex:pageBlock >
<apex:pageblocktable value="{!recs}" var="e">
<apex:column value="{!e.name}"/>
<apex:column >
<apex:facet name="header">Salary</apex:facet>
<div style="background-color:{!If(e.Salary__c>=7000 && e.Salary__c<10000,'#7CFC00',If(e.Salary__c>=10000 && e.Salary__c<100000,'#DEB887','#DC143C'))};width:30%;">
{!e.Salary__c}
</div>
</apex:column>
<apex:column >
<apex:facet name="header">Status</apex:facet>
<div>
{!IF(e.Status__c==true,'Active','InActive')}
</div>
</apex:column>
</apex:pageblocktable>
</apex:pageBlock>
</apex:form>
 </apex:page>



Output:
======
VFpage with colors and string literals based oncondition


Try this all the best 







No comments:

Post a Comment

How to include a screen flow in a Lightning Web Component

 Hi, Assume  you have a flow called "Quick Contact Creation" and API Name for the same is "Quick_Contact_Creation". To i...