Example Custom List Widgets

Tags: #<Tag:0x00007fc8fafe80d8> #<Tag:0x00007fc8fb06ff88>

I thought adding it to a list (card) would be the intended purpose of e.g. the battery widget, or did you mean that you only use textual configuration? Can you confirm the issue I observed in visual editing mode?

So far all I’ve done is configure these as the default list widgets on my Items. I’ve not added them to a custom widget on any other type of page. I can only confirm that they work when used in that way. I’ve not worked with creating a page of my own.

I understand, I can confirm that:

  • if you add the custom widget as the “default list item widget” in the metadata of the Item,
    the correct properties of the custom widget appear and can be edited
  • if you then and add the Item (Add from model…) to a list on a page, the output of the page is showing the item title, icon, state properly properly and does not disappear from the page in visual editing mode.

However, there is still major caveats (which are not the “fault” of the widget of course, but due to current OH3 general architecture flaws (IMHO):

  1. Once it has been added to the page, the custom widget cannot be (visually) edited anymore (you cannot edit the widget properties, but only the settings of the underlying oh-list-item (same as above)
  2. If you edit the Metadata of the item and change some of the widget properties (e.g. the battery name), this does not get updated on the page.

This means that basically, you can’t change the widget configuration, the only way is to remove it from the page and add it again (very annoying). The same is neccessary of course if you e.g. add another property to the widget later on. Only changes within the widget are propagated to all instances where it is being used.

1 Like

I’ve filed 2 bugs for this:

Hi all, the custom widgets here looks great! Thank you.

I have a question though, about some syntax and weird behavior from OH.
I tried to import the list widget for light…

I created a new widget in the developer section, copied the code to the editor and saved.
I created my model and items through files so I added this line to the metadata:
listWidget="light_list_widget"
so my item is defined as follow:

Switch LR_Light_Power "Living Room Light Power" <light> (gLivingRoomLight) ["Switch","Light"] {channel="shelly:xxxx", listWidget="light_list_widget"}

(instead of xxx there’s the appropriate channel string)

Now checked in the “Living Room” card- It didn’t work. The widget didn’t render at all.

I narrowed it down to the last two lines of the code:

  title: =props.title
  item: =props.item

Added a ‘tick’ to he expression (not sure what’s the correct name for this symbol in English):

  title: '=props.title'
  item: '=props.item'

Now it kind of works. I managed to render the widget correctly but, here comes the weird part, the widget kept reverting back to the original form without the ‘ticks’ I added.
I tried to remove the widget entirely and create it again, but when I saved it the ‘ticks’ were gone.
Thought maybe it’s a weird cache thing so I tried to create a new widget with a changed uid- again after hitting save those exact same ‘ticks’ were gone.

First question- what is the correct syntax?
Second- what could the reason for this weird behavior?

Many thanks…

That widget defines two properties, title and item. In order for the widget to work you need to define those two properties on the Item. I don’t know how to do that with .items files (and I’m particularly interested in finding out). You probably need to define them as configuration parameters on the listWidget metadata.

Without setting the title and item properties, the widget doesn’t have anything to work with or display. They are undefined.

The single quotes and no quotes are irrelevant and not related to anything going on here.

I don’t know but the weird behavior isn’t what you think it is. The fact that it works at all without setting the properties is the weird behavior. It shouldn’t work at all.

Hi Rich,
Thank you for your clarifications.

Just found this post, which apperantly answer this exact question:

While it seems it’s not possible through .items files, it says that I can define the metadata through the UI and it should work. So this is my next “to do”.

Thanks!

EDIT:
On the other hand…

I noticed that the item property get populated correctly when set through the .items file. I wonder if it would be possible to define the widget to take to label value of the item as a title.
That way it might work because nothing needs to be defined in the .items except the uid of the widget, which apparently work.
I’d glad to hear your thoughts on the idea and how could be defined.
Thanks.

Just want to make you aware of Yannicks remark in case you haven’t seen it yet:

(taken from [semantic,ui] Using enriched semantic to ease UI creation - #2 by ysc):

The discussion was based on some Rich’s proposal.
This will mitigate the pain with custom metadata notably I guess :wink:

1 Like

I don’t believe the widget is even getting the item from the file definition. The widget defines the item property with the context: item which, as I understand it, means that when this property is undefined (as it is in this case because it can’t get the definition from the .items file) the UI is capable of pulling a sensible property value from the usage, which is easy in the case of a widget that has been set as a default widget for an item.

Also, last I saw, there is no simple way of getting the label of an item from the item name in a custom widget. Right now the widget items object only defines state and displayState properties.

It absolutely is possible to do this through .items files. I just don’t know how. It’s probably something like listWidget="light_list_widget"[item="ItemName", title="Label for the widget"] (since this is Item metadata like any other Item metadata). But I don’t know if I have the properties labeled right or if there is something else that needs to be in there.

You can define the widget how ever you want. The above are just examples and I fully expect them to be customized. In fact, you could forego the use of a custom widget entirely if you wanted to and define everything on the Item’s metadata itself.

But, as JustinG indicates, you don’t really have access to all that an Item offers in a widget. You mainly have it’s state and displayState and you only get the latter if you defined State Description metadata. When using an oh-repeater widget you get a little more in that you can access an Item’s tags and group membership in creating the list of Items to create the widgets for. But that’s it.

Therefore, in a case like this you’ll need to hard code in the label for each individual widget, which is what the title property is there for.

Thank you all for your thoghts. I’ll have a lot of experimenting to do with the system to get to the right looks and feels for me.

I too use some of the widgets you published here (thanks for that). When trying them out I was wondering about how to define the properties, but it seems that it just works :grinning:

My item definition is as following:

Group         gSemArbeitenEGDecke       "Licht Arbeiten EG"         <lightbulb>                             (gSemArbeiten_EG)                                       ["Lightbulb"]       { widgetOrder="16" }  
Switch        Licht_ArbeitenEG_Schalten  "Licht Arbeiten EG"  (gArbeiten_EG, gLicht_EG, gSemArbeitenEGDecke)     ["Light"]           { channel="knx:device:bridge:knx-1_1_102:Licht_ArbeitenEG_Schalten",  homekit="Lighting", widgetOrder="16", listWidget="widget:Licht - List widget" [] }

Beside that no other metadata is defined for that item and it uses the widget (which is just the renamed widget from Rich). I just double checked, when removing the widget from the item definition the default widget is shown.

As JustinG mentioned, I would guess that if the property is not defined then it defaults to some reasonable value. But that won’t always be the case. For example, the door lock widget uses more than one Item in the widget. If you don’t define the properties the widget won’t have a reasonable default to fall back to.

Your are right, I forgot about this as I am currently not using these widgets, but I will adapt them later.

I did a quick test and I could set e.g. the sensor item like this:

Switch Lock_test_control_item   "Lock Control"  (gSemTest)   ["Lock"] {listWidget="widget:lock_list" [sensor_item ="Lock_test_sensor_item"] }

I am not sure, if the control item has to be set too, if this item uses your lock widget, but this could be done accordingly with “control_item”. My assumption is, that you can use the name of the property, as defined in the widget, when tagging the metadata.

What is nor working is, that the badge in the widget changes when toggling the status item. But this behavior is the same whether I set the items in the items file or in the UI (tested this with a second test item). This is probably just me not using your widget correctly.

Am I correct that these widgets are used on the items itselves? I’ve setup a widget on an item (Default List Item widget). In the screen were I select the correct widget and properties, I see the widget how it should be, but when I save everything and go back to the item, I only see the state at the top of the screen, no widget. When I select a default widget, the same happens.

You copy the code above to the Widgets under Developer Tools. Then at the Item you will find that custom widget in the list to select from.

Correct, but nothing changes. I keep seeing my custom state description. Also removed my state description metadata, but the widgets doesn’t appear.

What you described that you did is not what the instructions say you need to do.

  1. Open Widgets under Developer Tools.

  2. Click the + button to create a new Widget.

  3. Copy the YAML from one of the examples above.

  4. Save.

  5. Go to your Item (Point Item, not Location or Equipment) either in the Items settings or the Model.

  6. Select “Add Metadata” and select “Default List Item Widget”

  7. Select the custom widget from the list under “Personal Widgets”

  1. Fill out the properties defined by the custom widget.

  1. Refresh the page and navigate to your Overview page and look at the widget in one of the cards.

Note: these widgets only appear when the Item is presented in a list (hence the name “list widget”). It’s not going to change the widget you see at the top of the Item’s configuration page. That’s a standalone widget.

Thanks for this clarification! I was looking to the result on the wrong place. In my overview Page it’s working fine!

Thank you for this sharing, I have trouble understanding how to use the “.prefix” with my “items” on files, do we have to create a “prefix” item? could I have some clarification on this? thank you a thousand times