Conditional Cell Color in VF dataTable

Question

I'm using a custom controller to query OpportunityFieldHistory to find changes to Close Date within a given timeframe. Then, the query results are displayed in a VF dataTable. I can display OldValue and NewValue, but I'd like to change the background cell color on NewValue depending on whether the Close Date was pushed out or moved closer. I've tried adding

style="background:{!if(oldvalue > new value,"Green","Red")}" 

but I don't think those columns can be compared that way.

I'm wondering if I need to iterate through the list result and do 1) formatting from OldValue and NewValue to date 2) assign some sort of temporary variable to render background color on.

Any hints to set me on the right path?

Class:

public class CloseDateChanges {
public list<opportunityfieldhistory> getOpportunity(){
    list<OpportunityFieldHistory> oppty = [select opportunity.name, opportunity.closedate, opportunity.amount, OldValue, NewValue, Field, createddate from OpportunityFieldHistory where createddate = last_week and field='CloseDate'];
    return oppty;
}
}

Page:

<apex:page controller="CloseDateChanges">
    <apex:dataTable value="{!Opportunity}" var="opp" cellPadding="4" border="1">
        <apex:column value="{!opp.opportunity.Name}" headerValue="Opportunity Name"/>
        <apex:column headerValue="ARR"><apex:outputtext value="${0,number,###,###}"><apex:param value="{!opp.opportunity.amount}"/></apex:outputtext></apex:column>
        <apex:column headerValue="Old Value"  ><apex:outputText value="{0,date,MM/dd/yyyy }"> <apex:param value="{!opp.oldvalue}" /> </apex:outputText></apex:column>
        <apex:column style="background:white" value="{!opp.opportunity.closedate}" headerValue="Current"/>

        <apex:column headerValue="Edit Date"><apex:outputText value="{0,date,MM/dd/yyyy }"> <apex:param value="{!opp.CreatedDate}" /> </apex:outputText></apex:column>


    </apex:dataTable>
</apex:page>

Answer 1

newValue and oldValue fields in any History objects are of Primitive datatype anyType. To compare it, we first need to convert it to respective type using valueOf method(in our case Date.valueOf).

Visualforce doesn't have any formula represenation of this valueOf method yet.

So our only hope it to use wrapper class like

public class oppwrap {
    public OpportunityFieldHistory ofh {get; set;}
    public Date oldDate {get; set;}
    public Date newDate {get; set;}
    public oppwrap(OpportunityFieldHistory ofh){
        this.ofh = ofh;
        this.oldDate = Date.valueOf(ofh.oldValue);
        this.newDate = Date.valueOf(ofh.newValue);
    }
}

Change your getOpportunity method

public list<oppwrap> getOpportunity(){
    List<oppwrap> lstoppwrap = new List<oppwrap>();
    for(OpportunityFieldHistory ofh : [select opportunity.name, opportunity.closedate, opportunity.amount, OldValue, NewValue, Field, createddate from OpportunityFieldHistory where createddate = last_week and field='CloseDate']){
        lstoppwrap.add(new oppwrap(ofh));
    }
    return oppty;
}

Change your page to refer the new wrapper

<apex:dataTable value="{!oppty}" var="opp" cellPadding="4" border="1">
    <apex:column value="{!opp.ofh.opportunity.Name}" headerValue="Opportunity Name"/>
    <apex:column headerValue="ARR"><apex:outputtext value="${0,number,###,###}"><apex:param value="{!opp.ofh.opportunity.amount}"/></apex:outputtext></apex:column>
    <apex:column headerValue="Old Value"  ><apex:outputText value="{0,date,MM/dd/yyyy }" style="background-color:{!IF(opp.oldDate>opp.newDate,'green','red')}"> <apex:param value="{!opp.ofh.oldvalue}" /> </apex:outputText></apex:column>
    <apex:column headerValue="New Value"  ><apex:outputText value="{0,date,MM/dd/yyyy }"> <apex:param value="{!opp.ofh.newvalue}" /> </apex:outputText></apex:column>
    <apex:column style="background:white" value="{!opp.ofh.opportunity.closedate}" headerValue="Current"/>    
    <apex:column headerValue="Edit Date"><apex:outputText value="{0,date,MM/dd/yyyy }"> <apex:param value="{!opp.ofh.CreatedDate}" /> </apex:outputText></apex:column>
</apex:dataTable>

The output looks like

Answer 2

Try adding CSS classes instead of directly using the styles. I have used this inside of VF elements, and it works:

<apex:column styleClass="{!IF({!if(oldvalue > newvalue,'GreenClass','RedClass'))}" headerValue="My Column">{!newvalue}</apex:column>

EDIT Actually, this answer is more complete: Can I change the color of a VF table cell dynamically?

EDIT 2

To compare the anyType, you'll have to cast it to a type you can compare. You'll have to use either a map, or a list of encapsulating classes.

Here's an anonymous block to illustrate comparing the values.

public class compareDates {
    public ContactHistory ch {get;set;}
    public Map<String,Date> DateMap {get;set;}
}
List<compareDates> cdList = new List<compareDates>();
List<ContactHistory> contactHistoryList = [SELECT Id, ContactId, Field, OldValue, NewValue FROM ContactHistory Where Field = 'Test__c'];
for(ContactHistory ch : contactHistoryList)
{
    compareDates cd = new compareDates();
    cd.ch = ch;
    cd.DateMap = new Map<String,Date>();
    cd.DateMap.put('OldValue',Date.valueOf(ch.OldValue));
    cd.DateMap.put('NewValue',Date.valueOf(ch.NewValue));
    cdList.add(cd);
}

for(compareDates cd : cdList)
{
    if(cd.DateMap.get('OldValue') < cd.DateMap.get('NewValue'))
        System.debug('Less Than');
    else if(cd.DateMap.get('OldValue') > cd.DateMap.get('NewValue'))
        System.debug('Greater Than');
    else
        System.debug('Not sure');
}

When it comes time to access a map in VF, you'll want to use something along the lines of:

{!ch.DateMap['OldValue']}