Hi,
Somedays ago i saw a really nice UI example here in the forum with dropwons.
Unfortunately the shown dropdown widegts were static and i had do rewrite them to use them in my setup.
After i created a version for my batteries, i added some new devices with batteries and had to modify the widget again.
Yesterday i saw an post about oh-repeater components and tought i can use them in the dropdown widgets.
An now im sharing my new “mostly” dynamic dropdown widget with you 
YAML Code
uid: DropdownDynamic
tags: []
props:
parameters:
- description: Headline text for Dropdown
label: Headline text for Dropdown
name: headline
required: true
type: TEXT
- context: item
description: Item which store the count of desired state
label: Item which store the count of desired state
name: groupCountItem
required: true
type: TEXT
- description: Minimum threshold to change icon and badge text/color
label: Minimum threshold to change icon and badge text/color
name: minThreshold
required: true
- description: Maximum threshold to change icon and badge text/color
label: Maximum threshold to change icon and badge text/color
name: maxThreshold
required: true
- description: Icon name for group count above minimum threshold
label: Icon name for group count above minimum threshold
name: minIcon
required: true
type: TEXT
- description: Badge color for group count above minimum threshold
label: Badge color for group count above minimum threshold
name: minColor
required: true
type: TEXT
- description: Icon name for group count above maximum threshold
label: Icon name for group count above maximumthreshold
name: maxIcon
required: true
type: TEXT
- description: Badge color for group count above maximum threshold
label: Badge color for group count above maximum threshold
name: maxColor
required: true
type: TEXT
- description: Icon name for group count below minimum threshold
label: Icon name for group count below minimum threshold
name: defaultIcon
required: true
type: TEXT
- description: Badge color for group count below minimum threshold
label: Badge color for group count below minimum threshold
name: defaultColor
required: true
type: TEXT
- description: State to compare if not counted
label: State to compare if not counted (CLOSED for windows or OFF for lowBattery)
name: compareState
required: true
type: TEXT
- description: Text for state not equal compareState (OFF,CLOSED....)
label: Text for state not equal compareState (OFF,CLOSED....)
name: offStateText
required: true
type: TEXT
- description: Text for state equal compareState (ON,OPEN.....)
label: Text for state equal compareState (ON,OPEN.....)
name: onStateText
required: true
type: TEXT
- description: Tags to identify items
label: Tags to identify items (comma seperated list possible)
name: itemTags
required: true
type: TEXT
timestamp: Feb 3, 2021, 2:23:15 PM
component: oh-grid-col
config:
width: "100"
small: "50"
medium: "33"
slots:
default:
- component: oh-list-card
config:
accordionList: true
simpleList: false
outline: true
slots:
default:
- component: oh-list-item
config:
title: =props.headline
icon: =(items[props.groupCountItem].state>props.minThreshold)?items[props.groupCountItem].state>props.maxThreshold?props.maxIcon:props.minIcon:props.defaultIcon
iconUseState: true
badge: '=props.offStateText + ": " + (items[props.groupCountItem].state)'
badgeColor: =(items[props.groupCountItem].state>props.minThreshold)?items[props.groupCountItem].state>props.maxThreshold?props.maxColor:props.minColor:props.defaultColor
slots:
accordion:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: oh-list-card
config:
accordionList: true
noBorder: true
noShadow: true
outline: true
slots:
default:
- component: oh-repeater
config:
for: item
sourceType: itemsWithTags
itemTags: =props.itemTags
fetchMetadata: semantics,widgetOrder
slots:
default:
- component: oh-list-item
config:
title: =loop.item.name.split('_')[0]
icon: =(items[loop.item.name].state == props.compareState)?props.defaultIcon:props.maxIcon
badge: =(items[loop.item.name].state == props.compareState)?props.onStateText:props.offStateText
badgeColor: =(items[loop.item.name].state == props.compareState)?props.defaultColor:props.maxColor
Closed:
Open:
You can configure 3 state for the headline.
In my case i will show an orange badge when more then 0 batteries are empty and when more then 5 batteries are empty it will show an red badge, otherwise green.
The badge-text/color are configurable. Also the Icons for the different states (count off items in specific state) are configurable.
To show the count of empty batteries, which are empty, i created an number item and change the count by an rule.
empty battery count rule
triggers:
- id: "1"
configuration:
groupName: BatterienStatus
type: core.GroupStateChangeTrigger
conditions: []
actions:
- inputs: {}
id: "2"
configuration:
type: application/javascript
script: >-
var log = Java.type('org.slf4j.LoggerFactory').getLogger('org.openhab.rule.' + ctx.ruleUID);
var countItem = itemRegistry.getItem("BatterienAnzahlLeer");
var batteryCount = 0;
var allBatteries = itemRegistry.getItemsByTag("LowBattery");
for (var i in allBatteries) {
if (allBatteries[i].state == "ON") {
batteryCount++;
}
}
events.postUpdate(countItem, batteryCount);
type: script.ScriptAction