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 J.

J., Official Rep

  • 7,694 Points 5k badge 2x thumb
Glenn,

You are on the right track. I think that you just need to try "field.element.addClass" and you should see your extra CSS show up.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
That makes sense, but it hasn't changed the result, which is that no values are being rendered for the field at all. I've attached a screenshot.

Photo of Zach McElrath

Zach McElrath, Employee

  • 49,576 Points 20k badge 2x thumb
You are almost there. The main piece you're missing is to call the default field renderer (in bold):

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 == 'High') {
field.element.addClass("highpriority");
}

The other problem was that you need to use value, not field.value.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
I added that in, and the data now renders again, but my class is not being added when the value is High. Hmmm.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,576 Points 20k badge 2x thumb
Oops --- just looked at my answer and the problem was, as Glenn figured out, that you want to use "value" instead of "field.value".

I'm changing my answers so that future viewers of this post will not be confused.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
I think I've cracked it. This seems to work having changed the bold bit:

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 == 'High') {
field.element.addClass("highpriority");
}
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Yes, this tests well, so consider this one answered. This is a very neat solution for conditional formatting.
Photo of Will Soupcoff

Will Soupcoff

  • 734 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled
change the font color of a row in table based on condition.


I'd like to change the color of the text in a row to red if a checkbox on the record it TRUE (i.e. hot lead).  see picture attached.

Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,148 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. 
Photo of Korey

Korey

  • 1,162 Points 1k badge 2x thumb
I just wanted to comment to help anyone who had the same problem as me. This particular example only applies to things in a "read" mode. So, for my situation I was trying to make things change color when it was in "readonly" which means the examples all failed.

I just needed to change this bit:

field.mode == 'read'

to

field.mode == 'readonly'

and my highlighting worked.


I am sure this is a stupid problem, but it caught me out for an hour and I wanted to save someone else an hour.
Photo of Emily Davis

Emily Davis, Employee

  • 3,514 Points 3k badge 2x thumb
Korey, I've run into the same problem before. Thank you for including this!!
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,148 Points 20k badge 2x thumb
Korey.  Thanks for saving folks an hour! 
Photo of Matt Sones

Matt Sones, Champion

  • 31,642 Points 20k badge 2x thumb
I've followed these steps, and the render is correctly applying the css class, but my table doesn't change.



Here's the css:
table .nx-skootable-data tbody tr .highlightLate td {
background-color: LightCoral;
}

Even if I inspect and manually change the style of the row, nothing changes:
<tr class="nx-item highlightLate" style="background-color: lightcoral;">

Any idea what's going on here?
Photo of Emily Davis

Emily Davis, Employee

  • 3,514 Points 3k badge 2x thumb
Matt, this was a while ago. I'm guessing you probably already figured this one out? I think it's just an issue of where the class and styles are being applied. Since the JS snippet adds the class to the item(which is associated with the tr element), your css selector should say tr.highlightLaterather than tr .highlightLate (the highlightLate class applied to the tr rather than the child of the tr). As for manually adding the style, the style should actually be applied to each td that is a child of the trrather than the tr itself. Just for future reference! :)
Photo of Ryan Denis

Ryan Denis

  • 542 Points 500 badge 2x thumb
Hi Emily,

I am having the same issue Matt did. The render is correctly applying the css class but the table won't change. Except I used your suggestions for the css selector already.

CSS is:

table.nx-skootable-data tbody tr.LeadTab_highlighted-row td {

background-color: LightCoral;

}

Snippet is :

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");

}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,148 Points 20k badge 2x thumb
If the class is being applied but you are not getting the expected results - it either is because the class is not defined correctly (and all the properties are getting thrown out) or it is because there is another div sitting on top of your special one that is blocking it. 
Photo of Ryan Denis

Ryan Denis

  • 542 Points 500 badge 2x thumb
Your second idea worked. There was a problem with the CSS used in a map I had on the page. I thought I had tested it without the map already. Works now thanks!
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
I've got this working on a table, but would like to have the row highlight drive by a boolean field that I don't want to show in the table - essentially a hidden field for each row. I can make the column narrow, but is it possible to have the snippet run from a field not in the table?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,148 Points 20k badge 2x thumb
As long as you have the boolean in your model the syntax at the beginning of your snippet would need to look like this: 

var field = arguments[0];
var value1 = arguments[1];
var row = field.row;
var value2 = row.FieldName;


Then do all your evaluation on value2 field. 
(Edited)
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
Thanks, yes that worked fine.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,148 Points 20k badge 2x thumb
Glad to hear! 
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
I have the same use case here as Simon did. I tried to implement what you mentioned at the beginning of the Snippet, but I am not getting the same luck and feel like I've messed it up somehow. 

Any suggestions on what I may be missing here?? Trying to only highlight the accounts that have a field Active__c set to true when the active field is not on the table itself....it is in my model.  


<code>
var field = arguments[0];
var value1 = arguments[1];

var row = field.row;

var value2 = row.Active__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value); 

if (field.mode == 'read' && value2 === true) 

    { 

        field.item.element.addClass("highlightRow");


    }

</code>


Thanks!
Photo of Matt Sones

Matt Sones, Champion

  • 31,642 Points 20k badge 2x thumb
Jeff,

You need to change your field rendering line to render the value you're capturing from the snippet's arguments:

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1); 
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
Matt, 

Thanks for your comment! That's what I was thinking too....but my code looks like this (including your comment)

<code>
var field = arguments[0];
var value1 = arguments[1];

var row = field.row;

var value2 = row.Active__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1); 

if (field.mode == 'read' && value2 === true) 

    { 

        field.item.element.addClass("highlightRow");


    }
</code>

Anything else I could be missing?
Photo of Matt Sones

Matt Sones, Champion

  • 31,642 Points 20k badge 2x thumb
you could try
((field.mode == 'read') && (value2 === true))
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
Matt,

Thank you for your quick replies and help! You were right, but I didn't have the snippet on a field in the row (I had removed it to try this code....) and now it works.

Silly mistake, but thankful for your help!

Best Regards,

Jeff Rutter
Photo of Ryan Denis

Ryan Denis

  • 478 Points 250 badge 2x thumb
I wasn't able to get this to work for a hidden field either. How would you replicate step 4 where you add the snippet to a field? Here was my snippet:

--
var field = arguments[0];
var value1 = arguments[1];
var row = field.row;
var value2 = row.Re_bid__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1);

if ((field.mode == 'read') && (value2 === true))

{

field.item.element.addClass("rebid_highlighted-row");

}
---

The re-bid__c field was in my model. And I created the css class. But nothing was happening. I've put the field in the table for now to get it working but I would prefer to remove it. Thanks!
Photo of Ryan Denis

Ryan Denis

  • 478 Points 250 badge 2x thumb
I wasn't able to get this to work for a hidden field either. How would you replicate step 4 where you add the snippet to a field? Here was my snippet:

--
var field = arguments[0];
var value1 = arguments[1];
var row = field.row;
var value2 = row.Re_bid__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1);

if ((field.mode == 'read') && (value2 === true))

{

field.item.element.addClass("rebid_highlighted-row");

}
---

The re-bid__c field was in my model. And I created the css class. But nothing was happening. I've put the field in the table for now to get it working but I would prefer to remove it. Thanks!
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
Ryan,

I was able to get this working in the end for me. I had to pick one field on the table and render it as the snippet to get this working. Do you have one of your fields rendering as this snippet, because your code looks okay to me....
Photo of Ryan Denis

Ryan Denis

  • 478 Points 250 badge 2x thumb
That worked thanks! I didn't assign the snippet to a separate field.
Photo of Jeff Rutter

Jeff Rutter

  • 1,162 Points 1k badge 2x thumb
No problem! Glad to help!
Photo of Ryan Denis

Ryan Denis

  • 542 Points 500 badge 2x thumb
I've used this on a bunch of tab pages successfully. Is there any reason it wouldn't work on a table on a detail page? If not I can't see where I have gone wrong. I have tried with the field on the table and without. Same logic, highlight a row where a checkbox is marked as true. 

I've tried read/readonly. 

Snippet:

var field = arguments[0];var value1 = arguments[1];
var row = field.row;
var value2 = row.Flag__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1); 

if ((field.mode == 'readonly') && (value2 === true))



field.item.element.addClass("flag_highlighted-row");

}

CSS:

table.nx-skootable-data tbody tr.flag_highlighted-row td {    
   background-color: #ffffcc;

}
Photo of Tami Lust

Tami Lust

  • 5,326 Points 5k badge 2x thumb
I am using a very similar script on a table without issue. I could be mistaken but maybe change this line

if ((field.mode == 'readonly') && (value2 === true))

to

if (field.mode == 'readonly' && value2 === true)
Photo of Ryan Denis

Ryan Denis

  • 542 Points 500 badge 2x thumb
Thanks. Just tried it but still didn't work unfortunately. 
Photo of Andrew Ottaru

Andrew Ottaru

  • 412 Points 250 badge 2x thumb
Does anyone know how I can make this work for the detail page? I would like to highlight the page the user clicks on the record that DoNotCall is selected. Thanks