Example Custom List Widgets

First of all, to my knowledge custom widgets cannot be defined in .items files or in any text based config file at this time.

A custom widget is the only way to define a widget with it’s own set of properties.

In the Chromecast widget above I’ve defined a property called prefix. That’s a property defined by me and which only exists in that one widget. There is no generic prefix property that exists for all widgets. In this one widget where I’ve defined it, the prefix is to contain the first part of a set of Item names that are all the same and which represent all the needed Items for that one Chromecast. In this case <prefix>_MediaTitle, <prefix>_MediaArtist, <prefix>_Idling and so on. Those are all separate Items that all start with the same thing. That’s how the widget knows which Items to use without explicitly defining each and every one individually.

I have no idea what the metadata would look like to use a custom widget in a .items file. probably something like { listWidget="chromecast_list[prefix=KitchenDisplay]" } but can’t say for sure. I frankly don’t see much point of doing MainUI related stuff in .items files. You can set metadata for Items that are defined in .items files without doing so in .items files.

Thanks a lot for this explanation ! and of course it work…:slight_smile:

If you are using the Chromecast widget above then yes, you must define the prefix property. If not then there won’t be a prefix property to define, unless you’ve created or downloaded another custom widget that includes a prefix property.

When you add the custom widget as a default list widget the form in the UI will ask for you to enter all the required properties.

you help us a lot on this passage to UI 3, I understood the idea I will test and create widgets in order to understand the props and other parameters, props still remains abstract for me


Here is what i get but , i not easy to hide some element, if i use default list and chose through UI “visible: false” the item is not hide …i don’t know why
i want to show only the widget in the location , not the [Speaker] equipment and keep the icon speaker up wen is playing
here is me file :

Group:Player:OR(PLAY,PAUSE)  Eq_ChromecastBureau        "Bureau Gh "     <gh>    (Bureau)                    ["Speaker"]
Group:Switch:OR(ON,OFF)      Eq_ChromecastBureau_Gstate "Eq Gh State "   <gh>    (Bureau)                    ["Speaker"] 
Switch        ChromecastBureau_State          "Gh State "          <switch>      (Eq_ChromecastBureau_Gstate)["Switch","Power"]  

Player        ChromecastBureau_MediaControl   "Contrôle du média" <mediacontrol> (Eq_ChromecastBureau)       ["GH"]{channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:control"}
Switch        ChromecastBureau_Stop           "Stop"              <switch>                              {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:stop"}
Dimmer        ChromecastBureau_Volume         "Volume"            <SoundVolume>  (Eq_ChromecastBureau)  {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:volume"}
Switch        ChromecastBureau_Mute           "Muet"                                                    {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:mute"}
String        ChromecastBureau_Playuri        "Play uri"          <SoundVolume>  (Eq_ChromecastBureau)  {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:playuri"}
String        ChromecastBureau_App            "App name"          <gh>           (Eq_ChromecastBureau)  {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:appName"}
String        ChromecastBureau_AppId          "App"                                                     {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:appId"}
Switch        ChromecastBureau_Idling         "Idling"            <gh>           (Eq_ChromecastBureau)  {channel="chromecast:chromecast:6d727c2e56323368ffc5f2c2e66c6612:idling"}

Cannot be done. It can be visible in all of the automatically generated tabs (Locations, Equipment, Properties) or none of them. You can’t pick and choose.

Look at the code view. Make sure it says false and not "false".

you right ! in the code panel the false is set to “false” ! how can you know that…? :slight_smile: magic Rick… thanks

Copied the YAML with no modifications, and attached my presence Switch Items. But this is what it looks like for me:


What magic am I missing to get rid of the ON/OFF?

Ah, yes, I thought I mentioned that above. I’ll go back and check.

To suppress the state add State Description metadata and set the Pattern to a space or the empty String (from the code tab or if in .items files).


Oh, that is neat. Good work!

I’m slowly working my way through these. Similarly in this example there is a stray “-” after the “OFFLINE” in the screenshot. I’ve got rid of that using the trick you mentioned (space in the Pattern of the State Description), and by adding item: =props.item into the config, so the YAML now looks like:

uid: service_status_list
  - list
  - status
    - description: Human friendly service name
      label: Service Name
      name: service
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Apr 6, 2021, 7:51:41 PM
component: oh-label-item
  title: =props.service
  item: =props.item
  icon: '=(items[props.item].state == "ON") ? "f7:wifi" : "f7:wifi_slash"'
  badgeColor: '=(items[props.item].state === "ON") ? "green" : "red"'
  badge: '=(items[props.item].state === "ON") ? "ONLINE" : "OFFLINE"'
  iconColor: '=(items[props.item].state == "ON") ? "green" : "red"'
  visible: =items[props.item].state != "ON"

Accompanying screengrab:

Screenshot from 2021-04-07 21-53-13

I’ve found that the empty string does not produce the desired effect (get rid of the ON/OFF), at least not when configured via .items files. The following:

Switch sSpareRoomSensorReachable  {  stateDescription=""[pattern=""], listWidget="widget:service_status_list"[service="Spare room sensor"]}

produces this:


Whilst using a space does work:

Switch sSpareRoomSensorReachable  {  stateDescription=""[pattern=" "], listWidget="widget:service_status_list"[service="Spare room sensor"]}



Thanks for the great list of custom widgets.
I am at a point where I also start playing around with the visuals of OH and began with putting in the presence widget.
Noticed though that the “trick” with State Description pattern set to " " (space) did not work for me while editing an existing State Description. I had to remove/delete the “old” State Description and add a new one (even though the code was the same). Not sure if just me or something to note for others if they face this issue.

Also to note, if you add, say “options” to the new state description, it will appear again and discard the " "

Question: When using badges and the State Description “[space]” variant, is there any way to still format the value shown? Example below which shows for temperature 28.66 C instead of just showing i.e. 28 C or 28.6 C:

When the State Description pattern is defined, items.MyItemName will have a .state and a .displayState. The .displayState is the state of the Item with the State Description pattern applied.

Thanks for your reply. Understood on the two different states.
The problem though is that if I use badge: =items[props.item].state it will display the actual state of the item, hence the 2 decimal places; when I use badge: =items[props.item].displayState it will just display an empty badge (as the pattern is a space). I was looking for a way to display the state though as before, with one decimal (or none) places (which before I had in the pattern).

Note that the oh-label-item component is only a oh-list-item displaying the item’s state in the after slot (to the right) - nothing more:

So if you don’t need this only additional feature (or don’t want it at all, because you’re using badges instead), there is no reason to use a oh-label-item over a generic oh-list-item.



This thread has been a big help to me. Thanks to all who have contributed. I’m still working through a problem with using badges and suppressing the item state. Here is my motion alarm item (if there is a better way of showing an item config, please let me know):

I’m using a list widget for this item, following Rich’s example:

uid: trisensor_motion_list_widget
  - list
  - trisensor
  - motion
    - description: The label for the widget
      label: Title
      name: title
      required: false
      type: TEXT
    - context: item
      description: The motion sensor Item
      label: Item
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: May 8, 2021, 11:46:48 AM
component: oh-label-item
  icon: f7:person_circle
  iconColor: '=(items[props.item].state == "ON") ? "red" : "gray"'
  color: '=(items[props.item].state == "ON") ? "red" : "gray"'
  title: =props.title
  item: =props.item
  badgeColor: '=(items[props.item].state == "ON") ? "red" : "gray"'
  badge: '=(items[props.item].state == "ON") ? "TRIGGERED" : "Untriggered"'

To suppress the item state alongside the badge, I followed the tip mentioned here and put a space in the pattern in the item configuration:

value: " "
  pattern: " "

Here is the output I get. The space doesn’t seem to be working for me, since “Alarm” (the item displayState) is still being shown.


However, if I change the widget YAML to use item: =items[props.item].displayState instead, I get this with a trailing dash:


So that’s better, but I still have a trailing dash. Any suggestions would be most appreciated. All in all, a trailing dash is a small annoyance but I would like to attempt to understand what’s going on anyway. Thank you.

Have a look at my comment, esp the edits above, maybe it’s the same issue?

1 Like

See the post just above (Example Custom List Widgets - #55 by ysc) - if you don’t want to display the state because you’re putting it in a badge use a oh-list-item not a oh-label-item.

1 Like

Yannick, thank you for explaining that! Yes indeed that does work. :slight_smile:

Thanks Chris, I did read your comment with interest. It didn’t work for me, but fortunately Yannick’s solution did. :slight_smile: