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.
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).
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:
On the other hand, if the value inside the parseFloat is null or nonsense, you will always get the false results:
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.
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:
You should just have a number.
And if you put this into the developer thing:
=Number.parseFloat(items.Energy_FromGrid.state) <= 0? 'red' : 'green'
What do you get?
Example:
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 
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:
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:
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.
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 truecolor evaluates to "green"When items.Energy_FromGrid.state is negative:
on evaluates to falsecolor evaluates to "red"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.
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 