+ Start a Discussion
Sivakumari2iSivakumari2i 

How to change text color based on some condition

Hi,


I have a text in visualforce page. If the value is less than 100 then i have to change the font color to red and if it is greater than 100 then i have to change the font color to green.

 

I dont know how to achieve this.

 

Please explain me with some examples.

 

 

Thanks,

S.Sivakumar.

Best Answer chosen by Admin (Salesforce Developers) 
Bhawani SharmaBhawani Sharma
<td ><font color="{!IF(AND(NOT(ISNULL(selectedAttainment)), selectedAttainment > 100), 'green', 'red')}">{!selectedAttainment}%</font></td>

All Answers

asish1989asish1989

Hi

This is possible by javascript,You can call a javascript function by clicking a button and link.In that jave script function you write condition for color change.

for your reference you can check my previous post .

 

http://boards.developerforce.com/t5/Visualforce-Development/How-to-change-color-of-a-link-from-one-color-to-another-color/m-p/502543#M55927

 

DId this post answers your questions If so please mark it as solved.

please hit the kudos if this post helps you for other's benifit.

 

  Thanks

Bhawani SharmaBhawani Sharma
style="text-color:{!If(list.Size > 100, 'Green', 'Red')}"
Sivakumari2iSivakumari2i

hi, i am not able to map your approach.

 

Here is my page code :

 

<table>

<tr><td>Attainment</td>
       <td>{!selectedAttainment}%</td>
</tr>

</table>

 

Here value of {!selectedAttainment} is returned from controller. If the vaue is >= 100 then i have to display it in green and if it is <100 then i have to display it in red.

 

How to achieve this?

 

Thanks,

S.Sivakumar

Bhawani SharmaBhawani Sharma
<td ><font color="{!IF(selectedAttainment > 100, 'green', 'red')}">{!selectedAttainment}%</font></td>
Sivakumari2iSivakumari2i

i am getting following error

 

Visualforce Error

 

The value 'null' is not valid for operator '>'

 

thanks,

S.Sivakumar

Bhawani SharmaBhawani Sharma
<td ><font color="{!IF(AND(NOT(ISNULL(selectedAttainment)), selectedAttainment > 100), 'green', 'red')}">{!selectedAttainment}%</font></td>
This was selected as the best answer
Bhawani SharmaBhawani Sharma
You are lucky one. you made me Super contributor :).
Sivakumari2iSivakumari2i

It worked.Thank you very much.

 

Can you explain me that?

 

Thanks,

S.Sivakumar.

Bhawani SharmaBhawani Sharma
It's simple, we just made style attribute conditional. So it will be drawn based on your variable value.
Sivakumari2iSivakumari2i

I tried this already without checking for not null.

Why you are checking for not null condition?

Is that necessary?

 

Thanks,

S.Sivakumar

Bhawani SharmaBhawani Sharma
at the time of page load, value of your variable will be null. That's why it is required.
Sivakumari2iSivakumari2i

k thanks for your reply.