Oh-label-cell Condition based label and color

Documentation is hard to find. The expressions in widgets are parsed using jsep but should pretty much follow javascript expressions. If you are having trouble with a particular expression, you can use the developer sidebar’s expression tester to work through the issues.
image

Use the same expression as your highlight color, but replace your "green" and "red" strings with the label text that you want (check out the example in the image above with arbitrary text in the ternary results).

1 Like

Works great for the footer status and also changing to green when its a positive value, but it fails changing to red when the ItemValue goes under 0

Am I missing something?

component: oh-label-cell
config:
  on: =Number.parseFloat(items.Energy_FromGrid.state) >= 0
  color: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'From Grid' : 'To
    Grid'"
  item: Energy_FromGrid
slots: null

There is something about your items.Energy_FromGrid.state that is not what you are expecting.

The expression will always evaluate to false (meaning you get green and To Grid results) if the value inside parseFloat cannot be parsed to a number. The parser starts at the beginning of the string and collects everything that is a number or numerical symbol and stops when it gets to a space or non-numerical character.

Using the developer sidebar, you can see that the expression works as expected if you replace the items call with a string that looks like the state of an energy type item and can be parsed:
image

On the other hand, if the value inside the parseFloat is null or nonsense, you will always get the false results:
imageimage

You can use the api explorer to see what the state of the item looks like to the widget editor or just temporarily put =items.Energy_FromGrid.state into one of the text display configs such as Header to see what you are actually working with.

1 Like

Ah! I’m thinking perhaps its got UoM and thats why it’s failing? I added that item into the title and I see this when its positive

And this when its negative

Not sure, but that looks OK to me? Removing the UoM from the item definition doesnt change anything though

Developer side bar showing me this when positive and when its negative, it just adds in the -. All looks OK

What do you see in the developer side bar for

=items.Energy_FromGrid.state

Example:
image

You should just have a number.

And when I set the value to -5, I see -5 kW

And if you put this into the developer thing:

=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'

What do you get?

Example:
image

image

Green

What about:

=Number.parseFloat(items.Energy_FromGrid.state) >= 0? 'red' : 'green'

Red

Then it should work.

Its showing red though when its sending to the grid, so no :rofl: and when I set it to negative -5, From the grid, its showing no color

Must be a bug?

component: oh-label-cell
config:
  on: =Number.parseFloat(items.Energy_FromGrid.state) >= 0
  color: "=Number.parseFloat(items.Energy_FromGrid.state) >= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'From Grid' : 'To
    Grid'"
  item: Energy_FromGrid
  title: =items.Energy_FromGrid.state
slots: null

component: oh-label-cell
config:
  on: =Number.parseFloat(items.Power_Watts.state) >= 0
  color: "=Number.parseFloat(items.Power_Watts.state) >= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Power_Watts.state) <= 0? 'From Grid' : 'To Grid'"
  item: Energy_FromGrid
  title: =items.Power_Watts.state
slots: null

Gives me this:
image

component: oh-label-cell
config:
  on: =Number.parseFloat(items.Power_Watts.state) >= 0
  color: "=Number.parseFloat(items.Power_Watts.state) <= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Power_Watts.state) <= 0? 'From Grid' : 'To Grid'"
  item: Energy_FromGrid
  title: =items.Power_Watts.state
slots: null

Gives me this:
image

The only difference is I changed the > on the color: line of code from > to < just to test it .

I’m confused, set your Power_Watts though to -500 and it should go red.

Is there a way to check two seperate items in the one color statement? I can populate and Item Energy_ToGrid (when its negative) and populate another item Energy_FromGrid (when its positive)

If you want it to be red then change the red green to green red or change the > to <

That doesnt change anything, it just reverses the issue

Nope. Because the UoM come after the numerical part of the string, the parser collects the numerals and parses those then just ignores the remaining characters.
WET

OK, that’s good. I agree the state output looks like it is correct.

It is showing you no color in this instance because you also have the on property set to an expression. The on property when true sets the card to whatever color you have used in the color property. But when on is false then the card will always just be whatever the default color is based on the app theme settings (dark/light/auto). So if you only ever want the card to be red or green then you don’t need an expression in on, you just want it to be:

on: true

It looks like the question has become, “What is the output of Number.parseFloat when that energy item’s state is negative?” Using the developer sidebar, the state looks correct but the full expression fails. That leaves this piece in between. When you just put

=Number.parseFloat(items.Energy_FromGrid.state)

into the expression tester what do you get for positive and negative values of the state?

Right! re: on: true, so if i just put on:true, where does the rest of the expression go?

Setting the item to negative value

When its a positive value

Both look OK!

OK, everything is, in fact, working as it should, and the expression you had before

  color: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'"

is correct and functional.

Sorry I missed this earlier, but when you said that the card fails to turn color when the state was less than 0 I thought you meant it stayed the same color, so I was looking in the wrong place. The entire problem is with your on property. The code you posted:

component: oh-label-cell
config:
  on: =Number.parseFloat(items.Energy_FromGrid.state) >= 0
  color: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'From Grid' : 'To
    Grid'"
  item: Energy_FromGrid
slots: null

Is working exactly as it should. Let’s work through it:

When items.Energy_FromGrid.state is positive:

  • on evaluates to true
  • color evaluates to "green"
  • Final result: the card will show a background color and that color will be green

When items.Energy_FromGrid.state is negative:

  • on evaluates to false
  • color evaluates to "red"
  • Final result: the card will not be highlighted with a background color so it doesn’t matter what the color property is set to; it’s just ignored.

Nowhere. If you always want the card to be highlighted with a background color then you don’t want an expression that is going to change, you just want on to be always true. You only want an expression in on if there is some situation where you do not want the card to render with a different background color. Then you want on to have an expression that can be either true or false. As I understand it your card should only ever be green or red, so there’s no reason for on to ever change; just leave it at true.

The final code:

component: oh-label-cell
config:
  on: true
  color: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'"
  header: Energy Status
  footer: "=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'From Grid' : 'To
    Grid'"
  item: Energy_FromGrid
slots: null

should give you the function you are looking for.

2 Likes

HORAH! That’s got it Justin. I understand now what you mean about the on:true etc

This is a great result! thank you so very much. What a great feature - the wife will be happy now :wink: