[Solved] How do I use an Item.state (yaml)

Hi,

I try to code my first custom widget…
It is a mediaplayer widget and I want it to dynamically load items according to the selected player.

these are the props I defined

props:
  parameters:
    - description: Item Prefix
      label: Item Prefix
      name: prefix
      required: true
      type: TEXT
    - description: Title for the Widget
      label: Static Title
      name: title
      required: false
    - context: item
      description: Selection Item
      label: State Item
      name: selected
      required: true
      type: TEXT

so the item names are put together of 3 parts:

  • the prefix from props.prefix (Squeeze)
  • the Item state from props.selected (e.g. LivingRoom or something)
  • the suffix (e.g. Cover or Artist etc.)

the prefix and suffix are nobrainers, the prefix is always “Squeeze”, the suffixes are hardcoded…

text: =items[props.prefix+... ...+"Title"].state

but how can I get the item.state (it’s a string-item which stores the selected player name)

I tried to use something like this

text: =items[props.prefix+props.selected.state+"Title"].state

text: =items[props.prefix+(props.selected).state+"Title"].state

text: =items[props.prefix+(props.selected.state)+"Title"].state

but this doesn’t work out :frowning:

so maybe someone could push me in the right direction to get there…

cheers Dan

Ok after playing around with the syntax I got it running :wink:

here’s the solution:

=items[props.prefix+items[props.selected].state+"Title"].state

And here is what I got so far…

uid: Squeeze Control
tags:
  - card
props:
  parameters:
    - description: Prefix for all items
      label: Item prefix
      name: prefix
      required: true
      type: TEXT
    - description: Title for the widget
      label: Static Title
      name: title
      required: false
    - context: item
      description: Item for selection
      label: According Item
      name: selected
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Jun 21, 2021, 2:47:17 AM
component: f7-card
slots:
  default:
    - component: f7-row
      slots:
        default:
          - component: oh-image
            config:
              item: =props.prefix+items[props.selected].state+"Cover"
              style:
                width: 100%
                height: auto
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-right
                    text: =items[props.prefix+items[props.selected].state+"Artist"].state
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-right
                    text: =items[props.prefix+items[props.selected].state+"Title"].state
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-right
                    text: =items[props.prefix+items[props.selected].state+"Album"].state
    - component: f7-row
      config:
        class:
          - justify-content-left
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - text-align-right
                    text: =items[props.prefix+items[props.selected].state+"Duration"].state
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-player-controls
                  config:
                    item: =props.prefix+items[props.selected].state+"Control"
    - component: f7-row
      config:
        class:
          - padding-top
          - padding-bottom
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: oh-slider
                  config:
                    item: =props.prefix+items[props.selected].state+"Volume"
                    min: 0
                    max: 100
                    step: 2
                    unit: "%"
                    label: true
                - component: oh-button
                  config:
                    text: Stop
                    iconF7: stop
                    fill: true
                    color: red
                    action: command
                    actionCommand: ON
                    actionFeedback: Media Stopped
                    actionItem: =props.prefix+items[props.selected].state+"Stop"
                    class:
                      - margin-top

and it looks like this on my phone