OH3 - problems with custom oh-list-item

[stefan13 (Stefan)]

Hello - I need some help
I defined a simple widget to display the window open state, using a switch item.
I have 2 problems which I’m stuck now:

1. I defined a MAP transformation in StateDescription, which is working well with the default Label List item.

The items states ‘ON/OFF’ is properly mapped to ‘Offen/Geschlossen’.

However, with my custom widget only ON/OFF is shown, seems the mapping is not applied, as in below screen shot.

2. The f7-chip should be shown on the right end of the widget.
   However, this not working in run mode. ( see previous screenshot)

In the Widget Designer it looks as expected however:

Any idea what I did wrong?

uid: widget_WindowState
tags: []
props:
  parameters:
    - description: Label of the Item
      label: Label
      name: propLabel
      required: false
      type: TEXT
    - description: 'Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon) or material:iconName (Material icon)'
      label: Icon
      name: propIcon
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item Name
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 6, 2021, 8:57:58 PM
component: oh-list
config:
  style:
    font-size: min(max(14px, 4vw), 15px)
    --f7-list-inset-border-radius: 5px
    box-shadow: 2px 2px 2px grey
    position: relative
slots:
  default:
    - component: oh-list-item
      config:
        title: =props.propLabel
        icon: =props.propIcon
        style:
          margin-top: 0px
          margin-bottom: 0px
          --f7-list-item-border-color: transparent
      slots:
        after:
          - component: f7-chip
            config:
              text: =(items[props.item].state)
              style:
                --f7-chip-bg-color: "=(items[props.item].state === 'ON' ? '#4cd964' : 'red')"  
                --f7-chip-text-color: white

[Vradatta (Eric Zenz-Matzl)]

Hi,

Try items[props.item].displayState

[stefan13 (Stefan)]

Thanks a lot That solved the mapping problem.
Any idea what is causing the alignment issue?

[hubsif (Hubsi)]

Hi Stefan,

I think the issue is, that the “List Item Widget” setting expects a “list item”, but your widget is a “(oh-)list”. Simply removing the base oh-list component and making the oh-list-item the basic component should fix it, I think.

[stefan13 (Stefan)]

Hi Hubsi - I replaced the oh-list by a oh-list-item, but then the widget disappears and I have 2 oh-list-items components cascaded.
I removed the 2nd oh-list-item but this still doen’t work - I don’t see any widget in the Widget Designer anymore.
Seems I’m doing something wrong

[hubsif (Hubsi)]

I shortly tried below and you’re right, it doesn’t show any preview in editmode. But it shows just fine in the list item widget selection screen.

uid: custom_listitem
tags: []
props:
  parameters:
    - description: Label of the Item
      label: Label
      name: propLabel
      required: false
      type: TEXT
    - description: Use oh:iconName (openHAB icon), f7:iconName (Framework7 icon) or material:iconName (Material icon)
      label: Icon
      name: propIcon
      required: false
      type: TEXT
    - context: item
      description: An item to control
      label: Item Name
      name: item
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Mar 7, 2021, 11:10:50 AM
component: oh-list-item
config:
  title: =props.propLabel
  icon: =props.propIcon
  style:
    margin-top: 0px
    margin-bottom: 0px
    --f7-list-item-border-color: transparent
slots:
  after:
    - component: f7-chip
      config:
        text: =(items[props.item].state)
        style:
          --f7-chip-bg-color: "=(items[props.item].state === 'ON' ? '#4cd964' : 'red')"
          --f7-chip-text-color: white

[stefan13 (Stefan)]

I confirm, it works in the selection screen.
Just wondering why the preview in edit mode doesn’t work. Without it its difficult to modify it

[hubsif (Hubsi)]

Even if something would be displayed in the preview, its styling wouldn’t be reliable, since without an actual list component around it, a lot of css stylings would be missing/not applied.
So, I think for modifications you’d have to put it in a list again and remove (or comment) that list afterwards.

Edit:
For reference: Just stumbled across an open bug report about exactly this.