Use item-property of oh-rollershutter-card

Setup, Configuration and Use Widgets
1

I would like to display the current state of a rollershutter-control item in the footer of an oh-rollershutter-card.

This is a solution but I would like the item prop of the oh-rollershutter-card instead of typing the item every time (multiple uses).

I tried something like:

component: oh-rollershutter-card
config:
  item: Roller_Control_1
  stateInCenter: false
  title: Roller 1
  footer: =items[props.item].state

But it just outputs “-”. However, referencing the item directly with footer: =items.Roller_Control_1.state outputs the desired state.

How can I correctly use the props.item?

2

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:

item: =props.item

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:

3

Thanks, Justin! I am still trying to understand the whole structure of the UI.

From what l understand, there is framework7, then on top the oh-components.
Custom widgets then build on top of that. Correct?

So is there no way to access the properties of the built in oh-components, i.e. item:?

I would like to avoid building a custom widget…

4

Pretty much, yes.

Not through custom widget yaml. If you were interacting directly with the underlying vue javascript then yes, you would have access to all the properties of each element. However, the yaml definitions are really intended to be pretty low code. So, the expressions that you can use for each property of the widget are not direct access to the underlying javascript context; they are parsed by a js-like expression parser with a restricted (mostly isolated) context. The only way to get the same information into different expressions is with one of the available global objects: items, props, or vars.

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.

5

Ok. I understand. Thank you very much for your explanation!
I have to say, it’s really hard to grasp the different layers of parsers and languages/formats in the whole openhab setting.

Suppose I would like to interact more directly with the JS vue bit - can you give me directions where I could start? (Documentation, tutorials…?)

Much appreciated!

6

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.