Toggle between oh-label-item and oh-list-item by clicking

Add-ons UIs
1

I have a use case where I want to render an Item’s state as a badge, but I want to switch between the badge and the actual state by tapping the badge, the icon or even the entire list item.

Anyone already tried this in a custom MainUI widget?

2

I’m fairly certain you can’t dynamically change the type of component. So if you really wanted to switch back and forth between the two different types you would have to define each one and then set a visible property for each that toggled back and forth. But I think you wouldn’t be please with the rendering result. However, you don’t have to have the two item types, you can accomplish this with a single oh-list-item. If you put a badge and a label in an f7-row in the after slot of the list item, then the list item action can toggle a variable that will control just the visibility of those two sub-components. Something like this:

component: oh-list-card
config: {}
slots:
  default:
    - component: oh-list-item
      config:
        title: Test item
        action: variable
        actionVariable: badgeToggle
        actionVariableValue: =!vars.badgeToggle
        noChevron: true
      slots:
        after:
          - component: f7-row
            slots:
              default:
              - component: Label
                config:
                  visible: =vars.badgeToggle
                  text: label
              - component: f7-badge
                config:
                  visible: =!vars.badgeToggle
                slots:
                  default:
                    - component: Label
                      config:
                        text: Badge
1 Like
3

Thanks!

To avoid an initialisation issue when the widget first renders (the variable is then undefined / null), I think the following line:

visible: =vars.badgeToggle

should be replaced with:

visible: =!!vars.badgeToggle

Elsewhere I see explicit checking against null value but I’m unsure whether that is really required when using ‘!’ and ‘!!’.

4

That is one method of intelligently handling the initial null value. I also often recommend something along the lines of the following as it allows you to explicitly set the initial value if that much control is required.

visible: '=(vars.badgeToggle == "null") ? INITIAL_VALUE : vars.badgeToggle'
1 Like