Skip to main content
Nintex Community Menu Bar
Question

Changing text color with a Javascript snippet

  • Jul 10, 2024 12:02 PM UTC
  • 9 replies
  • 121 views
  • Translate All

Forum|alt.badge.img+1

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.fieldRenderers[field.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.

9 replies

Forum|alt.badge.img+5

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

Translate

Forum|alt.badge.img+1

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.

Translate

Forum|alt.badge.img+5

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.

Translate

Forum|alt.badge.img+1

How would I reference child elements?

Translate

Forum|alt.badge.img+5

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.

Translate

Forum|alt.badge.img+1

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

Translate

Forum|alt.badge.img+5
  • Nintex Partner
  • Jul 10, 2024 1:01 PM UTC

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/

Translate

Forum|alt.badge.img+1

Tried it - the page won’t load.

Translate

annajosephine
Nintex Employee
Forum|alt.badge.img+18
  • Nintex Employee
  • Jul 10, 2024 1:01 PM UTC

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?

Translate