function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sparkysparky 

conditional styling in table

What's the best way to apply conditional styling to the rows of a table?  (Either dataTable or pageBlockTable).  I know you can use rowClasses to do alternating styles, but I want styles that will be based on one of the fields/properties of the objects that are represented in the table.

So as a simple example, if the table is a List of Opportunities, I'd want the whole row in bold if the stage is Closed Lost.

Can you take an IF expression and stick it inside the rowClasses property of the table?  Is that the best way to handle this, assuming my logic is simple enough to be represented by an IF?

Thanks!


Best Answer chosen by Admin (Salesforce Developers) 
jwetzlerjwetzler
TehNrd, you should be using headerValue :)

His example is correct, or if it made more sense you could do {!style} and have a getStyle component in your controller that returns the style/styleClass that you want.  Depends on if you'd rather have the logic in your controller or on your page.

All Answers

TehNrdTehNrd
This should help you out. Note that you have to add the conditional styling to each element of the row.

Code:
<apex:pageblockTable value="{!opps}" var="opp" >
 <apex:column headerValue="Name"> 
  <apex:outputText value="{!opp.Name}" style="{!if(opp.StageName='Closed Lost','color:red;font-weight: bold', 'color:black')}"/> 
 </apex:column>

 <apex:column headerValue="Stage"> 
  <apex:outputText value="{!opp.Stage}" style="{!if(opp.StageName='Closed Lost','color:red;font-weight: bold', 'color:black')}"/> 
 </apex:column>
</apex:pageBlockTable>

 Credit for this actually goes out to Jill Wetzler as I asked this same question and she helped me.



Message Edited by TehNrd on 07-02-2008 10:10 AM
jwetzlerjwetzler
TehNrd, you should be using headerValue :)

His example is correct, or if it made more sense you could do {!style} and have a getStyle component in your controller that returns the style/styleClass that you want.  Depends on if you'd rather have the logic in your controller or on your page.
This was selected as the best answer
TehNrdTehNrd
Thanks for that tip. I've updated the code above.

I built a lot of my pages in pre-release before the pageBlockTable component existed and I've been converting most of my dataTables to pageBlockTables but didn't notice the headerValue attribute.
jwetzlerjwetzler
The header will also be automatically generated for you (only in pageBlockTable, not dataTable) if you use the value attribute with an sObject field, but of course with your code up there you'd lose your special styling.  You could probably replace it with style and styleClass on column (also don't miss headerStyle and headerClass) if you really wanted to.  Just a suggestion in case you care about localizing your header value.


Message Edited by jwetzler on 07-02-2008 10:22 AM
gireeshzgireeshz

wow - this is great information.  I have been trying to figure out how to do this on another page that I created.  I am not much of a CSS hacker.  I ended up creating a separate dataTable for each different set of rows so that I could color them differently.  ugh.

Any ideas on how  to do this at the row level rather than the individual field level?  

Jill, i like your idea of moving the login back to controller in a 'style' getter function.  but, how would that function know the value of the data for the record that it was applying the style to, so that it could return the proper style information?

gireesh


Message Edited by gireeshz on 07-02-2008 03:05 PM
kdanikdani
quick question, what formula is needed to do this on a number field, i.e if less than 0% format as red if greater than 0% format as green, the if statement does not allow me to save as its says not expected a number
TehNrdTehNrd
style="{!if(opp.Probability > 0,'color:red;font-weight: bold', 'color:black')}"/>
kdanikdani

am getting an error from the code below. the field it is looking at is a percentage formula field.

 

Error: Incorrect parameter for function not(). Expected Boolean, received Number

<apex:page standardcontroller="Account">
<apex:pageBlock >
<apex:pageBlockTable value="{!account}" var="account">
<apex:column value="{!Account.FY07_Revenue__c}"/>
<apex:column value="{!Account.FY08_Revenue__c}"/>
<apex:column value="{!Account.FY08_YOY_Variance__c}" style="{!if(!Account.FY08_YOY_Variance__c > 0,'color:red;font-weight: bold', 'color:black')}"/>
<apex:column value="{!Account.FY_09_Revenue__c}"/>
<apex:column value="{!Account.FY09_YOY_Variance__c}"/>
<apex:column value="{!Account.Invoiced_Current_Fiscal_Year__c}"/>
<apex:column value="{!Account.FY10_YOY_Variance__c}"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:page>
 


TehNrdTehNrd
Try this:
 
style="{!IF(Account.FY08_YOY_Variance__c > 0,'color:red;font-weight: bold', 'color:black')}"
 
And if that doesn't work, try this:
 
style="{!IF(0 < Account.FY08_YOY_Variance__c,'color:red;font-weight: bold', 'color:black')}" 


kdanikdani
thanksfor your help. it works now, much appreciated. going to give your blog a read see if I can pick up anything from there too.


TehNrdTehNrd
Cool, and thanks.


Alexis KasperaviciusAlexis Kasperavicius
Going further, is there any simple way to compare fields in different rows?
 
For example, if you wanted to do conditional formatting and make repeating cells a different color? I seem to be finding someting along this line in regard to accessing specific row number, but can't figure it out - what would go in place of "THIS" in following example:
 
<apex:pageblockTable value="{!opps}" var="opp" >
 <apex:column headerValue="Name"> 
  <apex:outputText value="{!opp.Name}" style="{!if(opp.Name[THIS]=opp.Name[THIS -1],'color:gray', 'color:black')}"/> 
 </apex:column>
</apex:pageBlockTable>


DeManDeMan
I ended up using jquery
 
j = jQuery.noConflict();
j.each(j('.marker'),function(){
     color = j(this).attr('color');
     j(this).parent().parent().addClass(color);
})
 
 
then within just one column
 
 
<div class="marker" color = "{!IF(conditional, 'green', 'blue')}" />