[SalesForce] Conditional formatting of the Style attribute on apex:outputText in a custom visualforce page

Looking to get some feedback on a problem and have 3 possible solutions which I am struggling to get working.

The functionally I am trying to achieve is in an apex:outputText element I want an opportunity's close date be shown in red and bold if the close date is within 3 days. I Initially thought of using an inline if statement as I had done in the past as per the below

1st SOLUTION

<apex:outputText value="{0,date,dd'/'MM'/'yyyy}" style="{!IF(Opp.CloseDate < TODAY()+3, 'color: #FF8080; font-weight:800;', '')}"> 
    <apex:param value="Opp.CloseDate"/> 
</apex:outputText>

I am not sure why this doesn't seem to work despite working in the past but I suspect it might be due to the apex:param element.

The second solution i have tried is to use a function in the controller as per the below

2nd SOLUTION

public String getdateFormat(Date CloseDateCheck) {
        String StyleText;
        if(CloseDateCheck <= System.today()+2) {
            StyleText = 'color: #FF8080; font-weight:800;';            
        }
        return StyleText;
    }

Which is called by the following.

<apex:outputText value="{0,date,dd'/'MM'/'yyyy}" style="{!dateFormat(Opp.CloseDate)}"> 
    <apex:param value="Opp.CloseDate"/>
</apex:outputText>

This throws the following error

"Unknown function dateFormat. Check spelling."

The last solution I tried was to use a javascript function on the VF page as per the below.

3rd SOLUTION

function DateFunction(closeDateCheck) {
    var todayDate = new Date();
        if(closeDateCheck < date.setDate(todayDate.getDate() + 3); {
            return "'color: #FF8080; font-weight:800;'"  
    }
}

Which is called by the following.

 <apex:outputText value="{0,date,dd'/'MM'/'yyyy}" style="{!DateFunction(new Date(Opp.CloseDate))}"> 
        <apex:param value="Opp.CloseDate"/>
    </apex:outputText>

Much like the first solution this code does not affect the style element in the apex:outputText element.

Based on the examples I've seen the function in the controller does seem to be the preferred solution.

Any help would be greatly appreciated.

Cheers

Best Answer

first solution works perfectly. The only thing is that you have to pass value to apex:param not as simple string, but as VF expression {!Opp.CloseDate}. You want to have the following code:

<apex:outputText value="{0,date,dd'/'MM'/'yyyy}" style="{!IF(Opp.CloseDate < TODAY()+3, 'color: #FF8080; font-weight:800;', '')}"> 
    <apex:param value="{!Opp.CloseDate}"/> 
</apex:outputText>
Related Topic