Change formatting of Table Row based on field value

Korey, I’ve run into the same problem before. Thank you for including this!!

Korey.  Thanks for saving folks an hour! 

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! :slight_smile:

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.

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;

if (field.mode == ‘read’ && value2 === true)

{ 

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


}

Thanks!

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,<b>value1</b>);&nbsp;

Matt,

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

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;

if (field.mode == ‘read’ && value2 === true)

{ 

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


}

Anything else I could be missing?

you could try

((field.mode == 'read') &amp;&amp; (value2 === true))

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

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; 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!

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; 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!

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…

That worked thanks! I didn’t assign the snippet to a separate field.

No problem! Glad to help!

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

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;

}

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') &amp;&amp; (value2 === true))


to

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

Thanks. Just tried it but still didn’t work unfortunately. 

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; if (field.mode == ‘read’ && value === true) { field.item.element.addClass(“LeadTab_highlighted-row”); }

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. 

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!

I want to do this but is there a new way or where can I find the sample page that was created. Link is dead