Example Custom List Widgets

great examples indeed! Very useful. Thanks Rich.

Hi @rlkoshak can you share the complete widget(s) for your garage door example above - how did you do the header image with text and looks like glimpse badges??

It looks very much like a home made location card!

I think you will find that is the location card. The widget is the list item only.

Ah OK I wasnt even aware that you can add your own widgets TO the location cards - so much to learn!

You can set widgets to be used as a default list item. All items in location cards are list items.
All items in cells, that you manually place on pages, are cell items.

It’s the standard Location card. All I did was configure a background image which you can do by editing the settings. See [Wiki] Building Pages in the OH 3 UI - Automatically Generated Overview Tabs for details.

1 Like

thanks Richard these are very useful I have the same garage setup. Do you have a widget with two buttons. I can’t see how to do it without getting into a mess with f7-cols and formatting. I’ve posted my feeble effort here

Is it possible to bulk add custom list widget to 50 lights.
I now have all my items in files when working and changing the model.

I have only messed with the standard oh list widgets thus far. Anything beyond that is beyond me. But I would expect that you would need to indeed use f7-cols to define the columns first.

The same way you would change anything in .items files. You’ll have to edit each one with the needed metadata to set the widget and properties.

In the .items file the Light widget would look something like:

listWidget="widget:light_list_widget"[title="Front Room Lamp"]
1 Like

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:


Properties when putting the widget on a page:


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.


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


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