So I am not alone!
My present problems:
How to find the correct wording for the needed control/ element ( or whatever wording should be used in this context), for example a list from which an element could be selected.
How to dynamically fill such list (with items).
I was struggling to find this one as well, Yannick to the rescue! You have to do it via an action, specifically the “options” action. I used a label card and linked the label and action to the same item. The options are pulled automatically from commandDescription metadata or can be provided in the widget properties.
Is there any example on how to format an item’s state with an expression?
I’ve searched on github (https://github.com/openhab/openhab-webui/issues/155) and this thread and found none.
I’m having an item with state ‘9999,32 Wh’ and want to output it on a label card to ‘9,99 kWh’ - so converting using units of measurement and formating the number.
I’ve had no success using as expression ‘=format("%,.02f kWh", item.state)’ 
I’m not positive on this but I think there is both a .displayState and a .state on the item. I would expect that you can define displayState either from the item label or the state description metadata. I’ve not played with that though. so I could be easy off.
As for the rest i think I need to suggest and get this out some. But over all your version of the chromecast widget looks exactly like what I was going for. I agree that in the beginners tutorial we want to stick as much as possible to what can be done without editing the code by hand. More to follow after I play with it a bit…
Not much to add besides @RGroll has already said here.
Yes it’s an object but it can have either only state or both state and displayState, depending on whether you have a pattern/transformation applied or not.
To be on the safe side in your expressions you can use this syntax:
=items.MyItem.displayState || items.MyItem.state
It will use displayState and fall back to state if it’s not truthy.
I believe we should also link to useful CSS resources to help developing widgets, notably:
style parameter.You’ll even find nice “play it” interactive examples like these:
- https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content
- https://www.w3schools.com/cssref/playit.asp?filename=playcss_grid
- https://www.w3schools.com/cssref/playit.asp?filename=playcss_grid2
--f7-text-color: red // override
color: var( --f7-text-color) // reference
How can I format the display state format in an item or format the state in a widget?
Item -> Add Metadata -> Set State Pattern
I think in M5 it is
Item -> Add Metadata -> State Description -> Pattern
You are right, sorry…
Hi,
some of the material-icon are not shown correctly (i.e. microwave).
Is it a problem of F7, or some OH library to update?
Regards
Lorenzo
Nice find - also the soup bowl and some other exciting icons are missing 
It seems that other devs also had problems using some of the icons as the library isn’t mantained well by google anymore.
@ysc Any idea how to fix this?! There seems to be an updated library available as a fork, if this could help:
Or http://materialdesignicons.com since that’s the library used by home assistant it gets regular home automation related updates. What would be cool is to be able to reference them in f7-icons. That remains to be seen.
Even better!
I like the fork you linked! It’s a drop-in replacement, no need to bother doing some automated stuff to keep it current, the latest release will go into OH3.0. https://github.com/openhab/openhab-webui/pull/604
And it has the latest icons:
Hi - i am developing a custom widget where i want to pass an expression in the prop value. Is it possible?
Setting this text in the UI:
="Temp: "+items.Hall_Temperature.displayState+" Rh: "+items.Hall_Humidity.displayState
and using it as below in yaml:
text: =props.SecondaryFooter
results in:
any suggestions so that the expression passed in the UI for a prop is actually parsed rather than displayed as text?
Do you mean you want to type in the configuration of the widget such formula?
I don’t think it is possible to use formula outside the yaml.
I don’t know any possible combination of your widget you are planning but a solution could be to include 4 variable in the prop, for instance:
prop:
text1,item1,text2,item2
in the yaml: text = prop.text1 + [prop.item1].state + …
Not sure for the syntax, I have not checked … let’s try
Regards
Lorenzo
Yes, instead of defining items as props, i wanted to ask for the expression itself in the widget config. You’re right its not working. But it works in config of standard widgets like oh-label-cell.
The only alternate is to define seperate items in props and then use those in the yaml
="Temp: "+items[props.temperatureItem].displayState+" Rh: "+items[props.hummidityItem].displayState
Thanks for trying to break it down into smaller chunks to understand, however when I try to recreate it, it fails to work. Here is the code after I paste it all back together, done in the widget editor. Any tips why a simple paste together fails to give a working widget?
uid: testWidget
component: f7-card
config:
title: Chromecast widget example
- component: f7-block
config:
class:
- padding
slots:
default:
- component: f7-row
slots:
default:
- component: oh-image
config:
# item: =props.prefix+"_Image"
url: https://picsum.photos/600/300
style:
width: 100%
height: auto
- component: f7-row
config:
class:
- padding-top
- padding-bottom
slots:
default:
- component: f7-col
slots:
default:
- component: oh-player-controls
config:
item: =props.prefix+"_MediaControl"
artistItem: =props.prefix+"_MediaArtist"
trackItem: =props.prefix+"_MediaTitle"
- component: f7-col
slots:
default:
- component: oh-slider
config:
item: =props.prefix+"_Volume"
min: 0
max: 100
step: 10
unit: %
label: true
- component: oh-button
config:
text: Stop
iconF7: stop
fill: true
color: red
action: command
actionCommand: ON
actionFeedback: Media Stopped
actionItem: =props.prefix+"_Stop"
class:
- margin-top
- component: f7-row
config:
class:
- padding-top
- justify-content-center
style:
border-top: 1px solid lightgray
slots:
default:
- component: Label
config:
text: YouTube Music
# text: =props.prefix+"_App"
style:
font-size: 24px