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.
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.
Perfect,
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 :
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".
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
tags:
- list
- status
props:
parameters:
- 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
config:
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:
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:
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.
–edit
Also to note, if you add, say “options” to the new state description, it will appear again and discard the " "
–edit2
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
tags:
- list
- trisensor
- motion
props:
parameters:
- 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
config:
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: " "
config:
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.
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.
