Oh okay - didn’t tested it with multiple elements but good to know.
Nice - a lot of people (including me) would be gratefull if you’d post this as an example in the UI category when you’re ready.
All other questions are already answered by @ysc. 
1 Like
About that, also keep in mind that framework7 defines a lot of CSS variables, whose value will vary depending on the theme/dark mode: margins, shadows, but mostly colors. So if you want to reuse them it’s possible in your component style like:
style:
backgroundColor: var(--f7-page-bg-color)
color: var(--f7-theme-color-text-color)
etc.
1 Like
How should I defined the drop down values for oh-input-card with type: select
f7-input documentation indicates using <option value="...">...</option>. What should be the equivalent here?
@ysc wow thanks that helps a lot. Is there a overview of the implemented classes available?
@RGroll it will take some time until this is finalized. But i think i can share my sonos widget. It is combined with a new rule and has all features of the sonos controller app to control the players. I need to change some parts against parameter and then this can be reused 
Here my current progress, but not yet finished in terms of features and ui usability
2 Likes
The f7-docs lists usable classes for each component. For me it works best to use the Chrome dev tools and see what classes are used for the components that I want to change.
Nice work - Every widget will suit some users needs and helps digging deeper into the mechanics of the widget-creation.
@candiesdoodle
I tried numerous ways, adding the options as an array in the value config of f7- / oh-input, but sadly wasn’t succesfull. Maybe @ysc has an idea how to do it with the current component.
It might be a missing option (which wonders me a bit tbh, as its documented and I don’t see a reason why f7-components should’ve been stripped down in OH)
1 Like
Hi Rainer,
I get the layout correct now, i just have to tune the styling, other backgroubd color
uid: widget_9ba8e79e82
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: Nov 15, 2020, 11:02:05 AM
component: f7-card
config:
title: '=(props.item) ? "State of " + props.item : "Set props to test!"'
footer: =props.prop1
content: =items[props.item].displayState || items[props.item].state
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: a1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: a2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: a3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: a4
style:
height: 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: b1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: b2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: b3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: b4
style:
height: 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: c1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: c2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: c3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: c4
style:
height: 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: d1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: d2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: d3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: d4
style:
height: 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: e1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: e2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: e3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: e4
style:
height: 25px
- component: f7-row
slots:
default:
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: f1
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: f2
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: f3
style:
height: 25px
- component: f7-col
config:
class:
- button
- button-fill
- button-large
- button-raised
- align-items-center
slots:
default:
- component: oh-button
config:
action: popup
actionModal: widget:YOURWIDGET
style:
--f7-button-bg-color: transparent
--f7-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07)
--f7-button-pressed-bg-color: rgba(0,0,0,.15)
position: absolute
top: 0
left: 0
height: 100%
width: 100%
- component: oh-icon
config:
icon: f4
style:
height: 25px
now i have to figure out how to get the binding to work if there is broadlink binding for 3.x.x
i have creted a separeted topic for this widget
regards
Ronny
2 Likes
Nice work!
You could remove the ‘button-fill’ class on the ‘f7-col’ to remove the background of the buttons (the ‘button-large’ and ‘button-raised’ is also not needed for you case, I think) - but just try out, what you prefer the most.
@RGroll so my Sonos player is done. If you are interested the code is here: Sonos Player widget for OH3 mainUI
6 Likes
hello folks
how can I use props expression with actionItem. I have written the following but it doesn’t work.
props:
parameters:
- context: item
description: An item to control mode
label: Mode control Item
name: Mode_item
required: false
type: TEXT
- component: oh-button
config:
text: favorite
action: command
actionItem: =props.Mode_item
actionCommand: favorite
if i replace props.Mode_item with actual item name, it works perfectly.
edit: nvm, had to include it in single quotes. 
Hey @candiesdoodle,
your syntax seems correct and should work. Have you selected an item in the widget-config?
props:
parameters:
- context: item
description: An item to control mode
label: Mode control Item
name: Mode_item
required: false
type: TEXT
- component: oh-button
config:
text: favorite
action: command
actionItem: =props.Mode_item
actionCommand: favorite
There was an extra space after the first line of your parameters, maybe this is the problem?! But it should be highlighted as an error in the editor then.
Hi @RGroll thanks. The issue was about quotes.
Changing =props.Mode_item to '=props.Mode_item' solved it.
hi folks
How do I used expressions with actionAnalyzerItems:
I tried:
actionAnalyzerItems:
- =props.AQI_item
it results in:
http://192.168.1.XXX:8080/#!/analyzer/?items==props.AQI_item&chartType=&coordSystem=time
Its taking everything after the dash ( - ) literally and not resoving it. doesn’t matter if i include quotes or not, or whether i remove the equal to sign etc.
Note, that this requires a 2 line syntax. pulling the item name back to the previous line doesnt work
Try
actionAnalyzerItems: =props.AQI_item
or maybe =[props.AQI_item] since it expects an array.
1 Like
Actually, a combination of two worked. haha
actionAnalyzerItems: =[props.AQI_item]
1 Like
Hi together,
is there a possibility to set multiple variables in one action?
I tried serval possibilities but was not able to get this working
- component: oh-label-card
config:
title: =vars.myVar1 || "myVar 1 empty"
label: =vars.myVar2 || "myVar2 empty"
content: click me
action: variable
actionVariable: myVar1, myVar2
actionVariableValue: "myVar1 has a value", "myVar2 has a value"
Hello- Is it possible to change the font size in card widget? Example below… where text is over flowing. I couldnt give any CSS property that works with cards for fonts
What card widget are you using? If you use an f7-card you can add the following to change the text size.
- component: f7-card
config:
content: test
style:
fontSize: 10px
1 Like
Yeah actually it’s an oh-label-cell … created in the UI in items screen - default cell widget. The Yaml can be edited but don’t know how to reduce font for it
I was not able to resize the oh-label-cell. I think you should use an f7-cell instead and build the logic inside this. If you share your code I will have a look on it.
1 Like