Edit: Corrected the way to obtain the Item’s state and misspelling of fragment.
Edit: Changed the status example to use oh-list-item instead of oh-label-item.
I’ve finished customizing the automatically generated parts of my overview page and now I’m building up the Overview page. As part of that page I’ve created a couple of custom widgets that use oh-repeater to dynamically populate a list based on tags and the states of various Items. I thought they might be useful examples so here they are.
This is a widget that shows all my light switches in a list. The tricky part about it is it will only show the Christmas light Items if “Tis the Season” is turned on. This makes the widget smart enough to adjust during the season where I have more lights to control.
NOTE: When it expands it doesn’t really work quite right with dynamic icon colors and such until a refresh.
uid: all_lights tags: - card - lights props: parameters: - description: A text prop label: Prop 1 name: prop1 required: false type: TEXT - context: item description: An item to control label: Item name: item required: false type: TEXT parameterGroups:  timestamp: Feb 11, 2021, 3:03:59 PM component: f7-card config: title: Lights slots: default: - component: oh-list slots: default: - component: oh-repeater config: for: item sourceType: itemsWithTags itemTags: Switch,Light filter: loop.item.label.includes("Christmas") == false || items.TisTheSeason.state == "ON" fragment: true slots: default: - component: oh-toggle-item config: icon: f7:lightbulb iconColor: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"' color: '=(items[loop.item.name].state == "ON") ? "yellow" : "gray"' title: =loop.item.label item: =loop.item.name
I don’t use the properties so probably should remove them at some point. The widget gets all the Items tagged with Switch and Light. It then filters out all those with “Christmas” in the name, unless TisTheSeason is ON. For each one of those it creates an entry in the list.
I’ve a number of Items that monitor for the online status of devices and services that are used as part of my home automation. If any of these relevant services go offline, this widget will show that. At all other times it just has an “all online” message.
NOTE: The title of the card appears not to change until I refresh the page.
uid: all_services tags: - card - services props: parameters:  parameterGroups:  timestamp: Feb 11, 2021, 3:36:18 PM component: f7-card config: title: '="Service Status: " + (items.ServiceStatuses.state == "ON") ? "All Services Online" : "Offline"' slots: default: - component: oh-list slots: default: - component: oh-repeater config: fragement: true for: item sourceType: itemsWithTags itemTags: Status,Power filter: items[loop.item.name].state != "ON" && items[loop.item.name].state != "OL" slots: default: - component: oh-list-item config: icon: f7:wifi_slash iconColor: red title: =loop.item.label item: =loop.item.name badge: OFFLINE badgeColor: red
NUT’s status isn’t an ON/OFF so I had to add expressions to handle NUT’s “OL” online status in addition to Network Binding’s and MQTT LWT Channels ON/OFF.
I don’t do any dynamic changes to the list widgets themselves since the Item will only be shown when it’s offline.
Everyone should be using oh-repeater all the time! This feature is huge when it comes to quickly building widgets that include lots of similar Items. And to make it even better, the widget will dynamically adjust as you add more Items or remove Items from the model.