Change formatting of Table Row based on field value

  • 6
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I want to set conditional formatting on the Priority field on the standard Task object. If the priority is High, I want to add a class to the HTML element so that I can apply custom CSS through the class.

I've read various posts here that are similar to this need, but I'm having trouble extrapolating from them.

My attempt so far is to use a custom field renderer on the Priority field in my table of Tasks and to call the JQueryUI function addClass(). Here's my inline snippet that I'm using as the custom field renderer. Am I in any way on the right track?

var field = arguments[0],
value = arguments[1];
if (field.mode == 'read' && field.value == 'High') {
field.addClass("highpriority");
}
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
  • confused once again

Posted 5 years ago

  • 6
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Official Response
Several have asked for this to be more completely fleshed out.  Here we go.  I'm building a lead page where if the "do not call" field is set,  the background of the row turns light red.  Here are the steps: 

1. Make sure you have the "do not call field" in your model and in your field. 

2. Go to Resources Tab of the pallet and add A Javascript resource of type "In LIne-Snippet"  Give snippet a memorable name.  I used "HighlightRow"



Here is the code for the Snippet: 
var field = arguments[0], 
value = skuid.utils.decodeHTML(arguments[1]);
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (field.mode == 'read' && value === true)
{
field.item.element.addClass("LeadTab_highlighted-row");

}

3. Then add a CSS Resource of type "in-line".   The code for this should be: 

table.nx-skootable-data tbody tr.LeadTab_highlighted-row td {    
background-color: LightCoral;
}

4. Go back to your table and select the "do not call" field.  In the field properties change the field renderer to bhe "Custom (run a Snippet)"  This will add a new property called "Render Snippet Name"   Here type what you called your Javascript resource in step 2.  Again I used "HighlightRow"



Save your page and enjoy the results. 




To help out with your work,  I have pasted this page in our page repository.  Copy this xml into a new page in your org and check it out.