Example Custom List Widgets

Just worked out you can use the component slots to add any components not supported by the standard properties. Most of the alignment / justification challenges are solved using this. See OH flex alignment - #7 by AndyMB

That example is functionally not complete (the question was about control alignment/formatting), but I’m just about to code a ‘radio button’ based example for my own use. I’ll post the code when complete. Andy

1 Like

Tis works like a charm. Would it be possible to get rid of [title=“Front Room Lamp”] and have it use the item name instead.

You’d have to modify the widget code to use props.item instead of props.title. Though you probably really want the Item’s label, not it’s name. I don’t know for sure but you could try =items[props.item].label.

If you remove the title property from the widget then you wouldn’t need anything between the [] in the Item metadata.

Thanks but i tried

title: =items[props.item].label

but then the title is blank.

Then I guess you can’t get the label that way.

Luckily I can restore some of the posts from my email that were lost during the failed upgrade this weekend. I did lose some examples in the OP so I’ll need to restore those as well.


@c_r posted:

Great examples! Thats how far I got with custom List items as well.

Whats strange is that when you add such a custom widget to a page, you can’t edit the widget properties anymore (in visual edit mode), but instead you can only edit the settings of the (underlying) standard oh-list-item (with the configs set in the widget).

Any idea how this you be changed? I can only get it to work in textual configuration.

Widet Properties:

image|autoxauto

Properties when putting the widget on a page:

image|autoxauto


My reply:

I don’t know what you mean specifically about adding them to a page. If you are just adding these to a page as is, that’s probably the problem. These are List Item Widgets. They are not stand alone widgets. They have to be contained by some other widget, such as a Card or a Cell widget. They do not work on their own and that is why they do not render a preview on the custom widget page.


@alfista2600 posted

Thanks for these, Rich. I’ve implemented a few already.

Follow up question: Is there any way to put the Equipment name in the footer of these widgets? Or some type of custom metadata?

When I look at a list of items, they are all named, as example ‘Battery Level’, for when I look at the list of points associated with the equipment. It is ugly to see ‘Equipment Name - Battery Level’ in that view.


My response:

You can customize these how ever you want. But you’ll probably want to add a property to set the Item that represents the equipment and then reference that property.

Personally, I always make sure to give my Items unique labels in addition to Item names so that no matter where the Item is listed (in the model, in the Items settings, etc.) you can always tell what the Item refers to. In other words, the problem is bigger than just the Properties tab of the overview page so I recommend adding the equipment name to the Item’s label instead.


@Malti1812 posted

Hello, I am unfortunately not receiving any data from
action: analyzer. No data analysis is opened.
Data comes from Influxdb


My reply:
Open a new thread to ask for help on that one. There are a number of things that can be wrong and figuring out what is off topic for this thread. All I’ll say on the topic is to make sure all the Items are being saved and make sure InfluxDB is set as the default.


@stefan13

Hello @rlkoshak,
I use

color: '=(Number.parseInt(items[props.Rooms_1 + "_CO2Gehalt"].state) > 800) ? "red" : "gray"'

to get a conditional text color in my widget.
However, for unknown reason the expression is always “false”, hence the text is in gray color.

The state is usually with a Unit “ppm” but due to Number.parseInt the unit is stripped.
I double checked this with Widget Expression Tester and it works fine.

However the condition doesn’t work as expected. Any idea what I did wrong?

Thanks a lot

Stefan


My reply:

There is not enough information to begin to help. All I can recommend is to make sure the props.Rooms_1 is set properly. Double check the state of the Item. Experiment.


@Andrew_Pawelski posted

@c_r I have the same - doesnt seem to allow changes to any variables - oddly, even adding them in the config YAML they actually disappear after saving and going to the run mode.

Ive also noticed the widget not being refreshed - this might be related. When I noticed there were no variables, I hard coded where =props.title would have been and it will not show the updated widget.


My response, see above. The List Widget must be in the slot of some parent container widget. It cannot stand on it’s own.

1 Like

Hi Rick, I have added the widget as a list-item to a list-card. I simply clicked on the “+” sign in the list card and then selected the widget instead of e.g. a regular label item. You may be able to see it in the background in the second screenshot.

I have made the same observation that the widget/list items often disappears from the list and does not keep e.g. the item which was selected in the widget/list item configuration after saving and reloading the page.

I’ve not tried to use these widgets in this way nor have I see similar behavior with the list. All I can recommend is to file an issue.

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.