Variables don't seem to be working

[reidprichard]

Checklist:

• [X] I updated to the latest version available
• [X] I cleared the cache of my browser

Release with the issue: 1.3.6

Last working release (if known): n/a

Browser and Operating System:

Firefox 91.3.0esr, Edge 96.0.1054.43, Android app version 2021.10.0-full Windows 10 Enterprise 20H2, Oxygen OS 11.0.3.1.GM21AA

Description of problem:

Variables don't seem to be working at all. I've tried a very simple card: an Entity card where the config-template-card simply sets the name. No matter what I try, the card shows nothing at all. If I manually specify the name (so config-template card is nothing but a functionless wrapper around the Entity card), it works perfectly.

I've tried a few different syntaxes demonstrated in the documentation:

• Specifying the variable in list format ("- test")
• Specifying the variable with a name ("NAME: test")
• Referencing the variable by its position ("${vars[0]}")
• Referencing the variable by its name ("${NAME}")

Doesn't work

type: custom:config-template-card
variables:
  - Test
entities:
  - light.wyze_bulb_8
card:
  type: entity
  entity: light.wyze_bulb_8
  name: ${vars[0]}

Works

type: custom:config-template-card
variables:
  - Test
entities:
  - light.wyze_bulb_8
card:
  type: entity
  entity: light.wyze_bulb_8
  name: Test

Javascript errors shown in the web inspector (if applicable):

Uncaught (in promise) ReferenceError: Test is not defined
    <anonymous> config-template-card.js:1
    _evaluateTemplate config-template-card.js:896
    _evaluateConfig config-template-card.js:860
    _evaluateConfig config-template-card.js:849
    render config-template-card.js:807
    update config-template-card.js:265
    performUpdate config-template-card.js:252
    scheduleUpdate config-template-card.js:252
    _$EC config-template-card.js:252
    requestUpdate config-template-card.js:252
    o config-template-card.js:252
    n$4 config-template-card.js:252
    n$2 config-template-card.js:265
    ConfigTemplateCard config-template-card.js:738
    s ha-logbook.ts:28
    d ha-logbook.ts:28
    d ha-logbook.ts:28
    c ha-logbook.ts:28
    b ha-logbook.ts:28
    value hui-masonry-view.ts:44
    _cards hui-masonry-view.ts:44
    value hui-masonry-view.ts:44
    value hui-masonry-view.ts:44
    value hui-masonry-view.ts:44
    performUpdate app.a6e743b8.js:1243
    scheduleUpdate app.a6e743b8.js:1243
    _$EC app.a6e743b8.js:1243
    requestUpdate app.a6e743b8.js:1243
    o app.a6e743b8.js:1243
    m app.a6e743b8.js:1243
    i hui-masonry-view.ts:44
    value 49692db7.js:409
    value 49692db7.js:409
    setTimeout handler*i/< ed7c25f5.js:1
    requestAnimationFrame 5180cdb1.js:1
    requestAnimationFrame 5180cdb1.js:1
    i ed7c25f5.js:1
    value 49692db7.js:409
    _$AE app.a6e743b8.js:1243
    performUpdate app.a6e743b8.js:1243
    scheduleUpdate app.a6e743b8.js:1243
    _$EC app.a6e743b8.js:1243
    requestUpdate app.a6e743b8.js:1243
    set app.a6e743b8.js:1243
    k app.a6e743b8.js:1243
    _$AI app.a6e743b8.js:1243
    m app.a6e743b8.js:1243
    T app.a6e743b8.js:1243
    _$AI app.a6e743b8.js:1243
    S app.a6e743b8.js:1243
    update app.a6e743b8.js:1243
    performUpdate app.a6e743b8.js:1243
    scheduleUpdate app.a6e743b8.js:1243
    _$EC app.a6e743b8.js:1243
    requestUpdate app.a6e743b8.js:1243
config-template-card.js:1:1

Additional information:

[loki-sft]

Have you tried this: ` variables:

• "test" `

What works for me: call variable by name:

`

• type: custom:config-template-card entities:
  • light.wohn_deckenlampe variables: VAL_STATE: states['light.wohn_deckenlampe'].state VAL_BRIGHT: states['light.wohn_deckenlampe'].attributes.brightness element: type: image entity: light.wohn_deckenlampe state_image: "on": /local/images/oben/licht_wohn_decke.png "off": /local/transparent.png style: mix-blend-mode: lighten opacity: '${VAL_STATE === ''on'' ? (VAL_BRIGHT / 254) : ''0''}' `

or call it by index: `

• type: custom:config-template-card entities:
  • light.ambientwohnzimmer variables:
  • states['light.ambientwohnzimmer'].state
  • states['light.ambientwohnzimmer'].attributes.brightness element: type: image entity: light.wohn_strahler state_image: 'on': /local/images/oben/licht_wohn_strahler.png "off": /local/transparent.png style: mix-blend-mode: lighten opacity: '${vars[0] === ''on'' ? (vars[1] / 254) : ''0''}' `

[reidprichard]

Yeah, I tried that, and the quotes are auto-removed when I save the changes. It seems that pure text does not work as a variable.

This works:

type: custom:config-template-card
variables:
  STATE: states['light.bedside_lamp'].state
entities:
  - light.bedside_lamp
card:
  type: entity
  entity: light.bedside_lamp
  name: ${STATE}

but this breaks everything, as the single quotes around the NAME value are removed when I click save:

type: custom:config-template-card
variables:
  STATE: states['light.bedside_lamp'].state
  NAME: 'light.bedside_lamp'
entities:
  - light.bedside_lamp
card:
  type: entity
  entity: light.bedside_lamp
  name: ${STATE}

[reidprichard]

Actually, I figured it out. Strangely it appears that text variables must be entered as a list, as shown below:

type: custom:config-template-card
variables:
  STATE: states['light.bedside_lamp'].state
  NAME:
    - light.bedside_lamp
entities:
  - ${NAME}
card:
  type: entity
  entity: ${NAME}
  name: ${STATE}

Not sure if this is intended behavior, but I didn't see it in the docs.

Edit: Hmm, I'm also seeing weird behavior with templated entities. I'd like to use {{areaentities(Bedroom)}} to get all the entities in my room. However, when I click save, that template string is replaced with '[object Object]': null_.

[ildar170975]

Another working case is (I always use it) - using tripple ':

  - type: custom:config-template-card
    variables:
      - '''test'''
    entities:
      - sun.sun
    card:
      type: entity
      entity: sun.sun
      name: ${vars[0]}

Same with a named variable:

  - type: custom:config-template-card
    variables:
      VAR: '''test'''
    entities:
      - sun.sun
    card:
      type: entity
      entity: sun.sun
      name: ${VAR}

This is a better way than using a list to represent ONE value...

[ildar170975]

I wonder why this issue is still open. It seems to be resolved.