Change background color in numeric indicator

Ignition
,
1

Good day,
I am trying to use a case statement that would change the background color of a numeric text field depending on the value of the field. I thought it would look something like this but it doesnt work can anyone help straighten me out?

case({this.props.value}
0,
“rgb(0,217,0)”
1,
“rgb(255,217,0)”
)

2

You’re missing a default return case - the expression might be quietly failing as a result:
https://docs.inductiveautomation.com/display/DOC81/case

1 Like
3

what would the return case be in regards to changing color?

4

I think he meant default return value.

Look at returnDefault on the page PGriffith linked.

5

Exactly - so if you’re putting this binding on backgroundColor, then maybe the default value is just an empty string:

case({this.props.value}
0,
“rgb(0,217,0)”
1,
“rgb(255,217,0)”,
""
)

Or in some cases you may need one of the meta-keywords like inherit, unset, or initial: inherit - CSS: Cascading Style Sheets | MDN

6

Alright, I think I understand. I’ll try it out and hollar back if I need more help. THANKS

7

Commas are missing as well, and those quotes copied from outside of preformatted code won’t work :stuck_out_tongue:
Also, I couldn’t help but reformat how I like to format my case statements

case({this.props.value}
   ,0, "rgb(0,217,0)"
   ,1, "rgb(255,217,0)"
   ,""
)
1 Like
8

@nminchin im surprised you didnt change the rgb values to hsl :stuck_out_tongue:

1 Like
9

Look back at my edit history :wink: then I realised that you can’t use hsl here :frowning:

1 Like
10

Thanks alot guys! syntax is “B”, lol!

11

Hmm? You should be able to use the hsl function just like this code is using the rgb() function.