Can I highlight the background of a cell in a table?

  • 2
  • Question
  • Updated 5 months ago
  • Answered
Thanks to your sample snippet, I figured out how to do some simple highlighting of a value with a snippet when it is read-only. The below code highlights an integer value when it is greater than zero:


var field = arguments[0],
value = arguments[1],
display;

if (field.mode == 'read') {
if (value > 0) {
display = '<font style="background-color: red; color: white"><b>&nbsp&nbsp&nbsp&nbsp' + value + '&nbsp&nbsp&nbsp&nbsp</b></font>';
} else {
display = value;
}
field.element.append(display);
} else if (field.mode == 'edit') {
skuid.ui.fieldRenderers.INTEGER.edit(field,value);
}


I show this field in a table, and use the snippet as a custom renderer, and it seems to work as expected (yea!):

Now I could probably easily add a reference to an image instead of coloring the text to make it even prettier. However, these approaches only work when the field isn't editable (and I'm not sure if I'm up to building a new editor component). What I'd love is to be able to highlight the entire background of the cell based on the field's value, and especially to be able to do this even when the field is in edit mode. That would improve the look and ensure that it is consistently displayed in either mode.

Is this possible?
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb

Posted 6 years ago

  • 2
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Peter, This should get you a little closer to what you're looking to do.




var field = arguments[0],
value = arguments[1];

skuid.ui.fieldRenderers.INTEGER[field.mode](field,value);
field.element.css({'background-color':'red','min-height':'30px'});



At first I was thinking you could access the actual td element from the snippet through the jQuery.parent() function, but since at this point in the code it hasn't been appended to the dom, I don't think that's possible.
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
That min-height is a great little workaround, glad to find that. 

Since 5 years ago, has anyone discovered a way to access the cell's particular td element? Would be nice not just for blank cells, but also for just expanding the background to the whole cell. Guess I could run a negative margin until it fills..
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Yes! Much better, thanks. So, if I wanted to try this with, say, a picklist field, how would I know what the skuid.ui.fieldRenderers.X value is supposed to be? I tried "PICKLIST" and "SELECT", and it clearly isn't those, and I can't find a reference for this kind of information. Is this just not the level of developer documentation you currently have, or am I missing something? I'll admit, I probably know just enough javascript to be dangerous, but am not an expert.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Peter,

We haven't gotten to documenting that portion of our API yet. But it is definitely on our list of things to do. We absolutely love it that people are going in and just figuring things out.

PICKLIST was actually the correct name for the renderer, so i'm not sure what happened when you tried it. To make things more generic, you can use field.metadata.displaytype to get the display type of the field you're working with. Here's another version that might work better for you.



var field = arguments[0],
value = arguments[1];

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
field.element.css({'background-color':'red','min-height':'30px'});

Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
That still doesn't seem to work for picklists fields. When I try it the field value doesn't render at all in read-only or edit mode.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
This is strange because it's working fine for me when try it on picklist fields. The first time I tried it I forgot to put the snippet name in after I changed the renderer to custom. Could you doublecheck that? If that isn't the issue, I'll have to look at your page definition xml. Can you email that to me? ben@skuidify.com
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Thanks to Ben spotting a spelling error on my page, now this is working for me - yea!
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
BTW, this is what I ended up using to highlight a picklist field based on its value:

var field = arguments[0],
value = arguments[1];
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (value == 'Needs Improvement') {
field.element.css({'background-color':'red','min-height':'30px','color':'white'});
}
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
...And for checkboxes, use the logic: value == 'true'
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Hi Peter,

For checkboxes you should use value === true

Values of type BOOLEAN in skuid models are not stored as strings. Do you actually have a version that is working with checkboxes? Your logic should always return false, since the value will never be the string 'true'
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
That's what I tried first, but it didn't work; it never highlights. It does work when I do value == 'true', though, strangely.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
You're right. This is actually a bug. I would expect this to change in future versions of Skuid. I'll let you know if we push out a release that changes this, because it will break your current code.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,490 Points 10k badge 2x thumb
Ok, this should be fixed now. value === true is the right way to do this.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
Confirmed on my page. Thanks for the quick fixing - it does make more sense this way.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Ben, is there a way to have this functionality inside of a template field? I'm trying to display a child error message on the parent table, and I would like to highlight the Error Message template in red, but only if a child error message actually exists, is this doable?
Photo of Sean Phillips

Sean Phillips

  • 248 Points 100 badge 2x thumb
I'm also trying to work out the code to compare the values between two fields in a record in a table instead of the value of a picklist option. I have 2 currency fields: 1 - Original Payment Due   2 - Payment Amount. I want to compare the value of the Payment Amount to the value of Original Amount Due and if they are not equal, highlight both cells. I'm not sure how to reference the other field in the javascript code I want to do the comparison with.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
The tutorial topics can help with this. Start with the code examples you'll find here: http://help.skuidify.com/s/tutorials/m/11720/l/129014-skuid-model

But the basics are pretty simple:
var myModel = skuid.model.getModel('MyModelName');
var myRow = Model.getFirstRow();
if( myRow.Field_Name__c != myRow.Other_Field_Name__c )
{...}
(Edited)