Custom Widgets available properties and order

Hello,

I have my Model structured as following:

- RoomName
  - DeviceName
    - Switch
    - Temperature
  - DeviceName
    - Voltage
- RoomName

This shows that the Label of an item does not include it’s parent device name.

Now I wish to list all the power switches of my Shelly devices in a Custom Widget. When I use oh-repeater and list all items by loop.item.label I get a list with just “Switch” and not the actual device name.

I’m trying to find a list of all available properties you can use in a Custom Widget but I’m unable to find it. Could I for instance get the thing device name?

My second question is, how can I order the oh-repeater output by its title?

Thanks in advance,
Bastiaan

The label property is the Human readable label that an item has been given. The name property is the unique identifying name for that item.

In this case, the oh-repeater is just making a call to the items API to get the items. It returns the complete JSON object that is the API response. So, if you want to see what the repeater is giving you, then you can just use the API explorer to pull up an example of an item and look at that.

If you want to use a somewhat awkward shortcut, you can take advantage of the fact that the javascript JSON object is available in the widget expressions. This object has a stringify method which will render an input JSON as a text string for easy output. You can use a Label component in an repeater to quickly view the entire item object that is returned.

component: f7-block
config: {}
slots:
  default:
    - component: oh-repeater
      config:
        for: item
        sourceType: itemsInGroup
        groupItem: Switch_KitchenLight
      slots:
        default:
          - component: Label
            config:
              text: =JSON.stringify(loop.item, null, 2)
              style:
                padding-bottom: 10px

This is actually not trivial. There is no built-in sort property for an oh-repeater. You can brute force a sort order by using the map property, creating a custom sort function, and returning the correct element of the newly ordered array with the internal _idx variable. This, however, if it is a long list, can have a noticeable performance impact as the sort isn’t preformed just once but for each element the repeater returns.