I’m trying to create a list type widget that allows for 2 buttons to do Volume control for my amps. I would like them to match the standard ones. As you can see I am almost there but I think I am probably going about this the wrong way. Can someone please have a look at see what I am doing wrong? I can’t see where OH3 stores the built in widget formatting - I assume I can use that.
Thanks
I don’t think it likes having buttons in the oh-list-item slots
I took your exact code and added in mine and we get the icon which is good but the buttons disappear!
uid: Volume_control_2
tags: []
props:
parameters:
- description: Volume to control
label: Description
name: buttonname
required: false
type: TEXT
- context: item
description: Item choice
label: Volume Item
name: item1
required: true
type: TEXT
timestamp: Feb 3, 2021, 10:06:57 PM
component: f7-card
config:
title: ="Abfuhrtermine:"
slots:
default:
- component: f7-card-content
slots:
default:
- component: f7-list
config:
mediaList: true
slots:
default:
- component: oh-list-item
config:
title: =props.buttonname
icon: f7:speaker
iconColor: black
slots:
default:
- component: oh-button
config:
text: Down
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: OFF
- component: oh-button
config:
text: Up
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: ON
Hm… The only thing that is different now compared to my own example with the ‘after-start’ approach is that I used an f7-list-item. Maybe that is the problem. However you would loose the ability to add the f7-icon property if you change this…
I don’t understand the architecture enough but it would seem logical if we could just get to the existing code of a list item then it might be easier to see what is happening. This really should be a standard object for multiple buttons for one item.
Thanks - I’ve been through the forums and there does not seem to be a solution.
Its quite possible to have a single action on a simple list widget but once you start getting into slots and columns it seems the headache starts. Rich has some good examples here but nothing we can use AFAIK.
I’ve just been fiddling about with this for an hour or two. If you want custom stuff on the left use the default (which is really inner) slot, for custom components on the right, use the slot after. You can still use the properties e.g. title and icon in the example, if you don’t need anything fancy
I’m creating a widget that will have 4 ‘radio’ buttons for an item that can have one of these 4 statuses. I’ll post when I’m done.
Well done Andy - great detective work! I was so close using F7-Col but for some reason F7 works for part of the problem and OH works for others…very frustrating. What is also strange is that the widget builder does not render this at all. @DrRSatzteil Thomas was also very close with the slot definition.
If I was being very picky I’d like to get the buttons a bit further over to the right in-line with the other items but I think this is pretty close. Have a virtual beer on me!!
EDIT: its a bit of a hack but you can add to the f7-block style right-margin = -25px and that lines up fine.
IMHO once this is done it should be part of the standard setup. It was very easy to do this in OH2.5 and the current OH3 setup of variables gives you an ugly list box which is uneccessary for a small number of options.
Here is my code for the above
uid: threebutttons
tags: []
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 4, 2021, 5:00:59 PM
component: oh-list-item
config:
icon: oh:soundvolume
title: =props.prop1
slots:
after:
- component: f7-block
config:
style:
display: inline-flex
flex-direction: row
justify-content: flex-end
padding: none
slots:
default:
- component: oh-button
config:
text: Down
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: OFF
style:
width: 150px
- component: oh-button
config:
text: Up
outline: true
text-color: red
action: command
actionItem: =props.item1
actionCommand: ON
style:
width: 150px
I can’t get an icon to diplay and the button need to right align.
