I am using a custom widget adapted from @kjknauss’s selection widget. I am only using three options. It works just fine for items in my heating control system to set thermostats to Auto Manual or Temp settings.
What I would like is to use the same widget for a group item to be able to set all the items at the same time. I am trying to use this as an Equipment.
My items are as follows
Group:String:EQUALITY House_Test_Group "Test group" <switch> (TestRoom) ["Equipment", "Switch"]
String House_Test_Switch "Test switch" <switch> (House_Test_Group) ["Point", "Switch", "Wind"] {listWidget="widget:ModeSelectionWidget"[title="Test room mode", icon="oh:radiator", commandbutton1="AUTO-MODE", valuebutton1= "Auto", commandbutton2= "MANU-MODE", valuebutton2= "Manual", commandbutton3= "PARTY-MODE", valuebutton3= "Temporary"]}
String House_Test_Switch2 "Test switch2" <switch> (House_Test_Group) ["Point", "Switch", "Wind"] {listWidget="widget:ModeSelectionWidget"[title="Test room mode", icon="oh:radiator", commandbutton1="AUTO-MODE", valuebutton1= "Auto", commandbutton2= "MANU-MODE", valuebutton2= "Manual", commandbutton3= "PARTY-MODE", valuebutton3= "Temporary"]}
If I omit the listWidget parameters for the group item then it displays the underlying items in an accordion in the room card correctly but it just displays the group as a simple on/off switch depending on whether the items are the same or different.
If I omit the type too, then the group just shows the status as Auto/Manual/undef depending on whether they are the same or different.
However if I set it up as shown above it all breaks. Not only is the room card blank but after accessing the Test room card, all other room cards are blank until the web page is re-loaded.
I’m a bit at a loss. The widget code is here. It looks fairly straightforward. Any help would be very gratefully received.
uid: ModeSelectionWidget
tags: []
props:
parameters:
- description: The name to show
label: Title
name: thetitle
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
- description: Icon name only OH supported
label: Icon
name: icon
required: false
type: TEXT
- description: Color of selection widget (blank=default)
label: Color
name: color
required: false
type: TEXT
- description: Color of selection widget fill when button is selected (blank=default)
label: Active Color
name: activecolor
required: false
type: TEXT
- description: Color of text when button is selected (blank=default/white)
label: Active Text Color
name: activetextcolor
required: false
type: TEXT
- description: The Button 1 command
label: Button 1 Command
name: commandbutton1
required: false
type: TEXT
- description: The Button 1 value
label: Button 1 Value
name: valuebutton1
required: false
type: TEXT
- description: The Button 2 command
label: Button 2 Command
name: commandbutton2
required: false
type: TEXT
- description: The Button 2 value
label: Button 2 Value
name: valuebutton2
required: false
type: TEXT
- description: The Button 3 command
label: Button 3 Command
name: commandbutton3
required: false
type: TEXT
- description: The Button 3 value
label: Button 3 Value
name: valuebutton3
required: false
type: TEXT
parameterGroups: []
timestamp: Nov 20, 2023, 11:08:57 PM
component: oh-list-item
config:
icon: =props.icon
iconUseState: true
item: =props.item
title: =props.thetitle
slots:
after:
- component: f7-segmented
config:
color: =props.color
style:
display: inline-flex
flex-direction: row
justify-content: flex-end
slots:
default:
- component: oh-button
config:
action: command
actionCommand: =props.commandbutton1
actionItem: =props.item
active: "=(items[props.item].state === props.commandbutton1) ? true : false"
color: "=(items[props.item].state === props.commandbutton1) ? props.activecolor : ''"
outline: true
style:
height: auto
width: auto
text: =props.valuebutton1
text-color: "=(items[props.item].state === props.commandbutton1) ? props.activetextcolor : ''"
visible: "=props.valuebutton1 ? true : false"
- component: oh-button
config:
action: command
actionCommand: =props.commandbutton2
actionItem: =props.item
active: "=(items[props.item].state === props.commandbutton2) ? true : false"
color: "=(items[props.item].state === props.commandbutton2) ? props.activecolor : ''"
outline: true
style:
height: auto
width: auto
text: =props.valuebutton2
text-color: "=(items[props.item].state === props.commandbutton2) ? props.activetextcolor : ''"
visible: "=props.valuebutton2 ? true : false"
- component: oh-button
config:
action: command
actionCommand: =props.commandbutton3
actionItem: =props.item
active: "=(items[props.item].state === props.commandbutton3) ? true : false"
color: "=(items[props.item].state === props.commandbutton3) ? props.activecolor : ''"
outline: true
style:
height: auto
width: auto
text: =props.valuebutton3
text-color: "=(items[props.item].state === props.commandbutton3) ? props.activetextcolor : ''"
visible: "=props.valuebutton3 ? true : false"