Choose displayMode: .displayState/.state dynamically via a parameter in my widget

Setup, Configuration and Use Widgets
,
1

I would like to use my parameter ‘displayMode’ in the following line of my widget to choose if it uses .displayState or .state. How can I do that?

footer: =items[loop.item.name].state

Here is the full code of my widget:

uid: Popup_List_ItemsInGroup
tags: []
props:
  parameters:
    - description: Small title on top of the card
      label: Title
      name: title
      required: true
      type: TEXT
    - context: item
      description: item to control
      label: Item
      name: item
      required: true
      type: TEXT
    - description: Icon which should be shown
      label: Icon
      name: icon
      required: false
      type: TEXT     
timestamp: Apr 11, 2023, 10:31:46 PM
component: f7-card
config:
  title: =props.title
slots:
  default:
    - component: oh-list
      config: {}
      slots:
        default:
          - component: oh-repeater
            config:
              for: item
              fragment: true
              groupItem: =props.item
              sourceType: itemsInGroup
            slots:
              default:
                - component: oh-list-item
                  config:
                    footer: =items[loop.item.name].state
                    icon: =props.icon
                    iconUseState: true
                    item: =loop.item.name
                    title: =loop.item.label

Can someone help me with the correct syntax to do this?

2

A parameter with type BOOLEAN will give you a switch in the property menu to toggle an property true/false. So you probably want to add something like this:

    - description: Display a formatted state value
      label: Display state
      name: displayMode
      required: true
      type: BOOLEAN

Then your footer value tests for both the existence of the displayState value and whether it should be shown before falling back to the regular state:

footer: =(items[loop.item.name].displayState && props.displayMode)?(items[loop.item.name].displayState):(items[loop.item.name].state)
2 Likes
3

Perfect solution and ultra quick. This forum would be nothing without people like you. Thank you so much!