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

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?

Peter Bender, Champion

6,296 Points

Posted 6 years ago

6 years ago

Ben Hubbard, Employee

12,550 Points

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.

Comment

1 person likes this

2018-06-26T06:14:45+00:00

Jack Sanford, Champion

9,714 Points

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

6 years ago

Peter Bender, Champion

6,296 Points

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.

Comment

6 years ago

Ben Hubbard, Employee

12,550 Points

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'});

Comment

6 years ago

Peter Bender, Champion

6,296 Points

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.

Comment

6 years ago

Ben Hubbard, Employee

12,550 Points

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

Comment

6 years ago

Peter Bender, Champion

6,296 Points

Thanks to Ben spotting a spelling error on my page, now this is working for me - yea!

Comment

6 years ago

Peter Bender, Champion

6,296 Points

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'});


}

Comment

6 years ago

Peter Bender, Champion

6,296 Points

...And for checkboxes, use the logic: value == 'true'

Comment

6 years ago

Ben Hubbard, Employee

12,550 Points

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'

Comment

6 years ago

Peter Bender, Champion

6,296 Points

That's what I tried first, but it didn't work; it never highlights. It does work when I do value == 'true', though, strangely.

Comment

6 years ago

Ben Hubbard, Employee

12,550 Points

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.

Comment

6 years ago

Ben Hubbard, Employee

12,550 Points

Ok, this should be fixed now. value === true is the right way to do this.

Comment

2013-05-12T22:58:13+00:00

Peter Bender, Champion

6,296 Points

Confirmed on my page. Thanks for the quick fixing - it does make more sense this way.

5 years ago

Moshe Karmel, Champion

8,686 Points

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?

Comment

5 years ago

Sean Phillips

248 Points

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.

Comment

2014-03-23T19:50:39+00:00

Peter Bender, Champion

6,296 Points

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)

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

Related Categories

Themes / CSS Customization