Hi,
I’ve migrated from OH2 to OH3 and now I’m converting my sitemap to MainUI pages using the semantic model.
In the OH2 sitemap I had this item:
Switch EntradaTVSalon "Entrada" <screen>
And this in the sitemap:
Switch item=EntradaTVSalon mappings=[ON='+']
Which translated to this UI:
When I push the “+” button I get ON as the command sent to the item EntradaTVSalon.
How can I replicate this in OH3 MainUI? Do I have to create a custom widget or is there an easier way?
Thanks.
Hi,
Thank you, but I forgot to mention that I am trying to get it to work in the Overview/Locations tab, so it is a list item widget and there is no action for list item widgets.
Also, I’d like to get a button with “+” inside, like I had in the sitemap.
Regards.
Yes there is. Just add a “Default List Item Wiget” to your item and then choose “List Item”. There you can add a commad option as action.
Hi,
I had already tried that. I added it to have visibility options, and I’m not getting the action option:
Switch EntradaTVSalon "Entrada" <screen> (smSalonTVSalon) ["Setpoint"] {commandDescription="" [options="ON=+"],listWidget="" [visible="=items['TVSalon'].state == 'ON'",action="navigate",actionPage="page:ChartSalonTemperatura"],widgetOrder="2"}
It isn’t reflected in the GUI options but it appears in MainUI and in the YAML code definition of the listWidget item metadata:
value: ""
config:
action: navigate
actionPage: page:ChartSalonTemperatura
visible: =items['TVSalon'].state == 'ON'
But I’d still like to get a “+” button as I had before, instead of a switch and an arrow as I have now.
You have a very specific, non-standard, use case. It may seem like the conversion directly from sitemap to MainUI would be more “standard” but in all honesty, much of the functionality of sitemaps is so limiting that 1) there’s almost always a better way to do it with the MainUI, and 2) you’ve already customized the function in the sitemap as well with your mapping parameter so it’s already non-standard.
So, the bad news is that this is not really supported out of the box. The good news is, that’s where the beauty of the new flexible widget system comes in; you can create very nearly anything you need to fit non-standard use cases.
The getting started tutorial takes you through the basic steps of creating your own custom list widget and using that as the default list widget for an item. This won’t be to complicated a widget so going through that tutorial and looking up a few examples already on this forum and you can have exactly what you want pretty quickly.
There’s a bonus too: when you manage to make exactly what it is you want, you can add it to the marketplace and the next person who comes along and has this special. non-standard use case can benefit too.
I don’t know if I understand you right. But if you just add a list item and not a toggle item you have the command action.
So you habe a “Button” sending your command by just clicking on it. And this is what you want, or not? 
No, I’d like a button with “+” inside, as I had before. I’ll try the custom widget route.
Thank you both, I’ll keep you posted.
Hi,
I’m almost there. Thanks to @kjknauss and his Simple Selection Widget now I have this:
But notice how the “Entrada” button is quite smaller than the stepper buttons in “Volumen”. Too small to be comfortable to use.
I’ve been playing with F7 button’s CSS variables (Button | Framework7 Documentation) but I can’t get it to look like the stepper button.
Anybody knows how to make them look the same?
Thanks.
This is where your browser comes in handy. You can use the developer tools to see all the css that applies to an element. In Chrome that’s just right click on the element and choose inspect from the context menu. Then you will see an area like this:
If you do that for the + part of the stepper you will see exactly what it’s size is, and font-size and all the other things you need. Then, instead of trying to find the correct f7 variables, just use the style property of the Entrada button to set exactly what you need.
The f7 variables are a more advanced solution because that will make it easier to make the button responsive, but this simple solution will get you up and running initially.
Thank you, but I think this goes far beyong my CSS understanding. I can’t find which properties should I change. This is the “Entrada” button:
Hi,
I realized the symbols were different because the stepper uses F7 icons instead of letters. So I made a custom widget like this:
uid: oh-list-increase-decrease-item
tags: []
props:
parameters:
- description: Description to show
label: Description
name: title
required: false
type: TEXT
- description: Icon to show
label: Icon
name: icon
required: false
type: TEXT
- context: item
description: The item to control
label: Item
name: item
required: true
type: TEXT
parameterGroups: []
timestamp: Feb 7, 2023, 7:42:14 PM
component: oh-list-item
config:
icon: =props.icon
iconUseState: true
item: =props.item
title: =props.title
slots:
after:
- component: f7-segmented
config:
style:
display: inline-flex
flex-direction: row
justify-content: flex-end
slots:
default:
- component: oh-button
config:
action: command
actionCommand: DECREASE
actionItem: =props.item
outline: true
style:
height: auto
width: auto
iconF7: minus
- component: oh-button
config:
action: command
actionCommand: INCREASE
actionItem: =props.item
outline: true
style:
height: auto
width: auto
iconF7: plus
It looks better, but still isn’t like the stepper. In iOS it looks bigger but nice:
I dug a little deeper into this and it’s even stranger than that. The plus and minus signs on the stepper button are actually their own pseudo elements, not text or symbols. The minus sign, is made from the after pseudo element of the stepper button div and the plus sign uses both the before (vertical bar) and after (horizontal bar) pseudo elements.
You could go through all the hassle of replicating those pseudo-classes, but the good news is that you don’t have to. All that styling is available already in built-in f7 classess and it greatly simplifies what you need to do. You just need an f7-row with the stepper class and your two buttons with just the actions and the stepper-button-minus or stepper-button-plus classes respectively.
- component: f7-row
config:
class:
- stepper
slots:
default:
- component: oh-button
config:
class: stepper-button-minus
action: command
actionCommand: DECREASE
actionItem: =props.item
- component: oh-button
config:
class: stepper-button-plus
action: command
actionCommand: INCREASE
actionItem: =props.item
Because those built-in classes include the iOS specific styles too this should also work on the iOS devices (but I can’t test it because I use any).
Thank you thank you thank you!!!