Setting this item property just tells that one card to use that item for it’s actions. It does not set a any general property variable. The props object is defined at the top of the widget and populated from values sent to the widget by the initial configuration that creates the widget. If you want to use one variable for both item and footer properties then you need to set item to:
And have an item parameter defined for the widget and then set that config property wherever you use that widget.
An example of the correct parameter configuration is provided in the default widget code when you load a new widget in the editor and you can see it in use in the Getting Started tutorial:
The items object, of course, only contains limited information about items. The vars object gives you access to custom variables, but these can only be set by component actions (there is no assignment available in the widget expressions) and they are undefined until the first time a widget action sets them. So the only way to get initial information that is not already an item state is via the props object.
I thought you were already adding a rollershutter card to a custom widget. If you are just adding the card to a page, then you do have another option, but it’s really no different than just hard coding the item name.
Pages can also have variables that are accessible to every widget on the page. In the page config section you can add a defineVars object with the variable names as keys and the default value as the value. So, you could define a rollerItem page variable with the name of your item as the value, and then use vars.rollerItem in both of the card’s expressions, but you haven’t really gained anything.
Yeah. OH has done a lot to push into more beginning user friendly territory in the last two versions which has added a ton of complexity under the hood. The results, however, have been, in my opinion, awesome.
There’s no user access to the vue js built-in to the MainUI. There are some ways to add your own scripts to widgets that are pretty hacky and not officially supported, so they, obviously, don’t have docs or tutorials.
If you are willing to contribute, of course, then you can work with vue in the repo and add some PRs that will included whatever functionality you want to see.
If you’re really just interested in have more low-level scripting control for your UI then you might want to look at HABPanel, which is based around AngularJS and is a much more code intensive UI option.