Oh, that is neat. Good work!
I’m slowly working my way through these. Similarly in this example there is a stray “-” after the “OFFLINE” in the screenshot. I’ve got rid of that using the trick you mentioned (space in the Pattern of the State Description), and by adding item: =props.item into the config, so the YAML now looks like:
uid: service_status_list
tags:
- list
- status
props:
parameters:
- description: Human friendly service name
label: Service Name
name: service
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Apr 6, 2021, 7:51:41 PM
component: oh-label-item
config:
title: =props.service
item: =props.item
icon: '=(items[props.item].state == "ON") ? "f7:wifi" : "f7:wifi_slash"'
badgeColor: '=(items[props.item].state === "ON") ? "green" : "red"'
badge: '=(items[props.item].state === "ON") ? "ONLINE" : "OFFLINE"'
iconColor: '=(items[props.item].state == "ON") ? "green" : "red"'
visible: =items[props.item].state != "ON"
Accompanying screengrab:
I’ve found that the empty string does not produce the desired effect (get rid of the ON/OFF), at least not when configured via .items files. The following:
Switch sSpareRoomSensorReachable { stateDescription=""[pattern=""], listWidget="widget:service_status_list"[service="Spare room sensor"]}
produces this:
Whilst using a space does work:
Switch sSpareRoomSensorReachable { stateDescription=""[pattern=" "], listWidget="widget:service_status_list"[service="Spare room sensor"]}
2 Likes
Thanks for the great list of custom widgets.
I am at a point where I also start playing around with the visuals of OH and began with putting in the presence widget.
Noticed though that the “trick” with State Description pattern set to " " (space) did not work for me while editing an existing State Description. I had to remove/delete the “old” State Description and add a new one (even though the code was the same). Not sure if just me or something to note for others if they face this issue.
–edit
Also to note, if you add, say “options” to the new state description, it will appear again and discard the " "
–edit2
Question: When using badges and the State Description “[space]” variant, is there any way to still format the value shown? Example below which shows for temperature 28.66 C instead of just showing i.e. 28 C or 28.6 C:
When the State Description pattern is defined, items.MyItemName will have a .state and a .displayState. The .displayState is the state of the Item with the State Description pattern applied.
Thanks for your reply. Understood on the two different states.
The problem though is that if I use badge: =items[props.item].state it will display the actual state of the item, hence the 2 decimal places; when I use badge: =items[props.item].displayState it will just display an empty badge (as the pattern is a space). I was looking for a way to display the state though as before, with one decimal (or none) places (which before I had in the pattern).
Note that the oh-label-item component is only a oh-list-item displaying the item’s state in the after slot (to the right) - nothing more:
So if you don’t need this only additional feature (or don’t want it at all, because you’re using badges instead), there is no reason to use a oh-label-item over a generic oh-list-item.
2 Likes
Hi,
This thread has been a big help to me. Thanks to all who have contributed. I’m still working through a problem with using badges and suppressing the item state. Here is my motion alarm item (if there is a better way of showing an item config, please let me know):
I’m using a list widget for this item, following Rich’s example:
uid: trisensor_motion_list_widget
tags:
- list
- trisensor
- motion
props:
parameters:
- description: The label for the widget
label: Title
name: title
required: false
type: TEXT
- context: item
description: The motion sensor Item
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: May 8, 2021, 11:46:48 AM
component: oh-label-item
config:
icon: f7:person_circle
iconColor: '=(items[props.item].state == "ON") ? "red" : "gray"'
color: '=(items[props.item].state == "ON") ? "red" : "gray"'
title: =props.title
item: =props.item
badgeColor: '=(items[props.item].state == "ON") ? "red" : "gray"'
badge: '=(items[props.item].state == "ON") ? "TRIGGERED" : "Untriggered"'
To suppress the item state alongside the badge, I followed the tip mentioned here and put a space in the pattern in the item configuration:
value: " "
config:
pattern: " "
Here is the output I get. The space doesn’t seem to be working for me, since “Alarm” (the item displayState) is still being shown.
However, if I change the widget YAML to use item: =items[props.item].displayState instead, I get this with a trailing dash:
So that’s better, but I still have a trailing dash. Any suggestions would be most appreciated. All in all, a trailing dash is a small annoyance but I would like to attempt to understand what’s going on anyway. Thank you.
See the post just above (Example Custom List Widgets - #55 by ysc) - if you don’t want to display the state because you’re putting it in a badge use a oh-list-item not a oh-label-item.
1 Like
Yannick, thank you for explaining that! Yes indeed that does work. 
Thanks Chris, I did read your comment with interest. It didn’t work for me, but fortunately Yannick’s solution did.
That’s great, I will also switch to Yannick’s solution once I got more time to work on the UI.
Had to do it several times and at the end, with my approach, it somehow only worked when I added it via GUI, not via the code itself.
just wanted to shout out to @rlkoshak for this, had almost given up on pages and was about to start in cometvisu, then i saw this
one quick question though is how/if can i change the colour of a .state based on its value, effectively the font colour ?
answered my own Q
how do i add badgeColor to the state of the item?
i try to add badge color to number item but I’m not succeeding, can anyone help?
uid: temperature_list
tags:
- list
- temperature
props:
parameters:
- description: Widget title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Item to display
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: May 31, 2021, 7:24:22 PM
component: oh-label-item
config:
icon: f7:thermometer
iconColor: '=(Number.parseFloat(items[props.item].state) > 32) ? "red" : (Number.parseFloat(items[props.item].state) > 26) ? "orange" : (Number.parsFloat(items[props.item.state]) > 10) ? "blue" : "purple"'
title: =props.title
item: =props.item
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: =[props.item]
badgeColor: '=(Number.parseFloat(items[props.item].state) > 32) ? "red" : "green"'
badge: '=(Number.parseFloat(items[props.item].state.displayState)) ? " "'
The syntax for the badge is wrong. I ternary operator requires the folllowing
(condition) ? <true value> : <false value>
The badge is missing the : <false value>.
It’s very helpful to use the expression tester in the Developers Sidebar to test expressions like these.
I slightly adapted this temperature list widget but I stumble across a problem.
I can’t find why the following is not working. The icon color and badge color are rendered as red but the item state should match orange. Also the badge text is wrong:
uid: temperature_list
tags:
- list
- temperature
props:
parameters:
- description: Widget title
label: Title
name: title
required: false
type: TEXT
- context: item
description: Temperature item to display
label: Item
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: 'Jun 2, 2021, 10:46:16 AM'
component: oh-label-item
config:
icon: 'f7:thermometer'
iconColor: >-
=(!isFinite(Number.parseFloat(items[props.item].state))) ? "grey" :
(Number.parseFloat(items[props.item].state) > 30) ? "red" :
(Number.parseFloat(items[props.item].state) > 25) ? "orange" :
(Number.parseFloat(items[props.item].state) > 20) ? "green" :
(Number.parseFloat(items[props.item].state) > 0) ? "blue" : "purple"
title: =props.title
item: =props.item
action: analyzer
actionAnalyzerCoordSystem: time
actionAnalyzerItems: '=[props.item]'
badgeColor: >-
=(!isFinite(Number.parseFloat(items[props.item].state))) ? "grey" :
(Number.parseFloat(items[props.item].state) > 30) ? "red" :
(Number.parseFloat(items[props.item].state) > 25) ? "orange" :
(Number.parseFloat(items[props.item].state) > 20) ? "green" :
(Number.parseFloat(items[props.item].state) > 0) ? "blue" : "purple"
badge: >-
=(!isFinite(Number.parseFloat(items[props.item].state))) ? "error" :
(Number.parseFloat(items[props.item].state) > 30) ? "hot" :
(Number.parseFloat(items[props.item].state) > 25) ? "warm" :
(Number.parseFloat(items[props.item].state) > 20) ? "normal" :
(Number.parseFloat(items[props.item].state) > 10) ? "cool" :
(Number.parseFloat(items[props.item].state) > 0) ? "cold" : "freezing"
!isFinite should be !Number.isFinite otherwise it will always be true (since isFinite alone is not defined).
And the orange color is due to the fact that grey isn’t a valid color (Color Themes | Framework7 Documentation) - it’s gray - so it falls back to the theme’s primary color.
1 Like
Thanks! It now works!
1 Like