Skip to main content

I’m new to Skuid and can’t seem to figure out what I’m doing wrong here. I’d like to conditionally render the text color of a field based on the field’s value. This is what I have so far:


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

skuid.ui.fieldRenderersdfield.metadata.displaytype]field.mode;

if (value < 0) {

field.element.css({

‘color’: ‘rgb(0,128,0)’,

});

} else if (value > 0) {

field.element.css({

‘color’: ‘rgb(255,0,0)’

});

}


If I change ‘color’ to ‘background-color’ the background changes just fine, but I’m trying to change the text color. Any help would be greatly appreciated.

The snippet you posted works fine for me. Maybe try and add an important css statement:

  ‘color’: ‘rgb(255,0,0) !important’ 

Hope this helps


Nope - still not working.  Just to make sure I’m doing this correctly, I have the above code in an inline Javascript snippet and I’m referencing it in a field renderer.


Nope,  your doing it right.
Do you append anything else to field.element (divs or spans)?
The only way why this doesn’t work for you is that your value is not an integer (try parseInt(value) in the if statement) or there are some more child elements that don’t apply the color.


How would I reference child elements?


field.element is a jquery node,  so nothing fancy from there on (maybe field.element.children().css(‘color’: ‘someColor’) already works for you).
Its hard to tell though since I don’t know the exact setup of your child elements.


Thanks for the advice - I’ll give it a try.


Have you tried removing the object-brackets and seperating the parameters by a comma as it says on the jQuery API Documentation?


Like this:


if (value < 0) { 
field.element.css(
'color', 'rgb(0,128,0)');
} else if (value > 0) {
field.element.css(
'color', 'rgb(255,0,0)'); }

See reference here:
http://api.jquery.com/css/


Tried it - the page won’t load.


Good morning, Ellen. Your original snippet is working for me.  What version of Skuid are you running? (not sure if this will help 😉  When the page doesn’t load, are there any errors in the browser’s developer console?


Reply