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
thanks but i found the solution here:
badge: =items[props.item].displayState || items[props.item].state
Would it be possible to create a list widget that has both a toggle action and a group action? Specifically, I’d like to be able to toggle a light on and off, but when I press the gear icon, open a group where sliders for brightness, color temperature, etc, are displayed.
That’s probably possible, but you’ll need to construct the widget from base widgets. You’ll need to add a toggle widget as a subwidget to a container widget and that subwidget will have its own action.
But you’ll need to look for some of the more advanced example widgets posted to the forum. Anything that isn’t included in the widgets posted above I don’t know how to do.
Hi Rich,
thank you for your super documentation and tutorials!
I was wondering, how you showed the status of one of your openHAB’s in a widget. Do you run a rule to check the status and update accordingly an item?
I would like to do such an overview for my setup. I have one openHAB V3 as my main entry point and two openHAB V2 instances connected via the remote openHAB binding. These two are modeled as two Things in the oH V3 instance. My goal would be to show on my home screen of the oH V3 the status of these two remote openHAB V2 instances.
I would be very happy if you could point me in the right direction 
It depends on the device. In that particular case I use the Network binding to ping port 8080. In other cases I use the MQTT LWT messages or heartbeat messages or what ever may be appropriate for the device.
If using the Remote openHAB binding, you can trigger a rule when the Thing goes offline and command a Switch Item to OFF.
Note that I really only use this to track the online status of home automated things and then only for cases where I have rules that might do something different when such a device is offline (e.g. send an alert if the garage door was triggered but the garage door controller is offline). OH makes a pretty poor IT infrastructure monitoring solution so I don’t recommend using it for that.
Thank you for your feedback! 
Okay, then I will try your recommendation with the triggering rule. It is just for giving me a litte bit of feedback about my system.
For monitoring my IT infrastructure I was thinking of using the open source tool https://www.zabbix.com/ . I know, it has a hard learning curve, but I would like to look into it.
That’s what I use. It is about as hard to learn as openHAB but it can give you lots of insight about your servers.
2 Likes
Use a oh-label-item component for rendering the item’s state, with or without badge.
Use a oh-list-item component for rendering only the item’s badge (not the state).
In other words: all you have to do, is replace 1 line in your YAML file:
component: oh-label-item
Replace it with:
component: oh-list-item
Why do I have to do that? I have it showing exactly what I want?
That’s a bummer. For me, it could mean that I return to a file-based Item definition. I don’t see how I can consistently keep the titles up to date through the UI.
Either you use the displayState non-rendering hack (using a single space as pattern), but then you must perform 2 edits for all Items that use the same custom widget.
Or you use a widget type which does exactly what you want (in your case, oh-list-item), so you don’t have to use an extra ‘hack’ (which you may end up forgetting to apply to some Items). Should you change your mind later on, then you will have to remove this ‘hack’ from all affected Items.
I prefer the former to the latter as it is easier to maintain. And it requires less work.
1 Like