function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Conditional Format for VisualForce Table


I need to render the background color of a cell based on the value in the cell. The value is retrieved from the a map generated by the controller. The background color will be one of seven colors based on the value retrieved. I have a method written that sets the value of the color as a string and takes the value of the rendered double as an arguement.

It's returning an error "Unknown property 'heatMapController.color'. I figured out from other posts in the forum about this error  that the system is looking at the statement:


as a function instead of a method call, but how do I call the method and pass the value in?  The method signature is:  String getColor(Double Val)

Here is the method:
public string getColor(Double val){
        color = '';
        if(val >= 0 && val < 25){
        if(val >= 25 && val < 50){
        if(val >= 50 && val < 75){
        if(val >= 75 && val < 85){
        if(val >= 85 && val < 95){
        if(val >= 95 && val < 100){
        if(val == 100){
        return color;

And this is how I'm calling it:

<apex:column headervalue="SitNum" style="{!color(defendNTAPNum[])}">

Thank you for your feedback!
You can't call a controller method that way, you can only reference a controller property. I've done this in two ways, depending on which way you prefer, but I definitely recommend one of these:

1. Use a list of wrapper classes, to represent the rows of your table, add a style property to that wrapper class, which you can then use as the bind for the style property. Works well if you want to do a robust, apex based solution, but also probably tougher to implement from where you are at now. 

2. Use jQuery, to grab the cells, the value, and add the style to the row. 

Hmmm, I was afraid of those answers. They are what I had found as well but was hoping my approach would take me around them. I did find this approach as a recommendation, however, it was more straightforward and didn’t involve utilizing a map. I tried the following JQuery solution – however, I’m not a great at JavaScript/JQuery so was unable to get this working. ( I couldn’t find my way to passing in the value of the map being referenced to the variable. Also – I didn’t want to write a conditional for each of the 9 maps I’m referencing in this table. I’m sure there is a way to only write the conditional statement once, but I’m not familiar enough with Jquery and Javascript to do it. I can write a wrapper class, but was hoping to avoid because it’s always a long process for me as I’m still learning how to utilize them. Overall, I’m displaying 9 columns with the values being retrieved from 9 different maps.
Admin User 10568Admin User 10568

Have you tested using style classes for this use case?

For example:

<apex:pageBlockTable value="{!oncs}" var="onc" align="center" cellpadding="2" border="1"  style="font-family: sans-serif; font-weight: bold; text-align: center; background-color:white;" >
              <apex:column headerValue="Level" value="{!onc.Property_Level__c}" style="{!IF ((onc.REPRO__Status__c !='Available'),"background-color: #A9A9A9;","")}" />
                  <apex:column value="{!onc.Price_List_Property_Name__c}" style="{!IF ((onc.REPRO__Status__c !='Available'),"background-color: #A9A9A9;","")}" /> 
                    <apex:column value="{!onc.REPRO__Type__c}" headerValue="Type" style="{!IF ((onc.REPRO__Status__c !='Available'),"background-color: #A9A9A9;","")}" />

It could end in a lot of duplicate code. Another option if the map isn't happening for you.