Concatenate YAML expression from props

Setup, Configuration and Use Widgets
1

I’m in the process of making a widget that displays the status of multiple items where the first part of the item name is common. Is it possible to use one prop as a variable for part of the item name?

Can’t really find any documentation on how the

component: Label
text:

works, and I don’t know if this at all is possible.

The following line seems to build the correct expression, but it is printed and not run as an expression:

                    text: ="items."+[props.roomName]+"_Humidity.state"

Complete code:
First F7-row displays correctly, but the second F7-row is how I’m hoping it can be done with the right YAML-know-how :slight_smile:

uid: widget_klimadata
tags: []
props:
  parameters:
    - context: item
      label: Temperatur
      name: temp
      required: false
      type: TEXT
      default: 25
    - context: text
      label: Roomname
      name: roomName
      required: false
      type: TEXT
      default: Hobby   
    - context: text
      label: Text color
      name: textColor
      required: false
      type: TEXT   
      default: lightgreen
    - context: text
      label: Text size
      name: textSize
      required: false
      type: TEXT  
      default: 12px
  parameterGroups: [] 
timestamp: Dec 6, 2024, 5:53:39 AM
component: f7-card
config: {}
slots:
  content:
    - component: f7-row
      config:
        color-theme: red
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: =props.textSize
                      color: =props.textColor
                    text: '= "Rh: " + items.Hobby_Humidity.displayState'
    - component: f7-row
      config:
        color-theme: red
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: =props.textSize
                      color: =props.textColor
                    text: ="items."+[props.roomName]+"_Humidity.displayState"

oh_test

2

Try:

text: "=items[props.roomName+'_Humidity'].displayState"

You need to add the property to the item name. And usually the whole expression needs to be put in quotes.

This part at least is not YAML. it’s a subset of JavaScript called “expressions”. You can find more details in the docs.

1 Like
3

The whole expression only needs to be enclosed in quotes if (as in the common ternary statement) there is a : followed by a space somewhere in the expression. In that special case, the yaml parser thinks the expression is actually an attempt to set a new key: value in the middle of another value and breaks. If you put the whole expression in quotes the parser knows to just treat it as a string :[space] and all.

In this case you can use the shorthand notation:

text: =@(props.roomName + '_Humidity')

This defaults to the same result as the longer form but has one extra benefit which is that it will fallback to the state value if the displayState is undefined (which happens under certain circumstances).

1 Like
4

Thank you both of you!

oh_test2
oh_test21037×673 48.1 KB

uid: widget_klimadata
tags: []
props:
  parameters:
    - context: text
      default: Hobby
      label: Roomname
      name: roomName
      required: false
      type: TEXT
    - context: text
      default: lightgreen
      label: Text color
      name: textColor
      required: false
      type: TEXT
    - context: text
      default: 12px
      label: Text size
      name: textSize
      required: false
      type: TEXT
  parameterGroups: []
timestamp: Dec 7, 2024, 6:00:48 AM
component: f7-card
config: {}
slots:
  content:
    - component: f7-row
      config:
        color-theme: red
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: =props.textSize
                      color: =props.textColor
                    text: =@(props.roomName + '_Temperature')
    - component: f7-row
      config:
        color-theme: red
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: =props.textSize
                      color: =props.textColor
                    text: =@(props.roomName + '_Humidity')
    - component: f7-row
      config:
        color-theme: red
      slots:
        default:
          - component: f7-col
            slots:
              default:
                - component: Label
                  config:
                    style:
                      font-size: =props.textSize
                      color: =props.textColor
                    text: =@(props.roomName + '_Pressure')