Is it possible to replace strings on YAML templates?

Configuration Frontend
1

I have a custom card YAML configuration that look like this (but more long)

type: vertical-stack
title: My ESP DEVICE 
  - type: horizontal-stack
    cards:
      - type: entities
        entities:
          - entity: switch.esp_my_presence_detector_engineering_mode
            name: engineering mode
          - entity: switch.esp_my_presence_detector_control_bluetooth
            name: bluetooth
  - type: horizontal-stack
    cards:
      - type: entity
        entity: sensor.esp_my_presence_detector_move_energy
        name: move energy
      - type: entity
        entity: sensor.esp_my_presence_detector_still_energy
        name: still energy

... more here...

Where “esp_my_presence_detector” is the name of an esphome device.

I want to share that exact configuration with other devices, Is there a way to convert that into a reusable template or similar, where I can replace esp_my_presence_detector for another thing? Similar to ESPHOME sustitutions?

2

There do not appear to be any custom cards in the config you have shown. They are all core dashboard cards that do not support templates (v-stack, h-stack, entities and entity cards).

3

Yeah sorry. Until now I just have used the existent cards and i do not know exactly how to make reusable ones.

4

ESPHome 's substitution feature hasn’t been implemented in Home Assistant.

So you’ll need to copy-paste the card’s YAML and do a search and replace on the entity value.

NOTE

You may want to investigate this custom integration:

It’s like a YAML pre-processor for the front-end.

5
  1. Use a custom decluttering card.
    Create a decluttering template like
my_super_template:
  card:
    type: horizontal-stack
    cards:
      - type: entities
        entities:
          - entity: switch.esp_my_presence_detector_[[SWITCH_TYPE_1]]
            name: '[[SWITCH_NAME_1]]'
          - entity: switch.esp_my_presence_detector_[[SWITCH_TYPE_2]]
            name: '[[SWITCH_NAME_2]]'

and call it like

type: vertical-stack
title: My ESP DEVICE 
  - type: custom:decluttering-card
    template: my_super_template
    variables:
      - SWITCH_TYPE_1: engineering_mode
      - SWITCH_NAME_1: engineering mode
      - SWITCH_TYPE_2: control_bluetooth
      - SWITCH_NAME_2: bluetooth
  - type: custom:decluttering-card
    template: my_super_template
    variables:
      - SWITCH_TYPE_1: move_energy
      - SWITCH_NAME_1: move energy
      - SWITCH_TYPE_2: still_energy
      - SWITCH_NAME_2: still energy
...
  1. Also, you can call this “my_super_template” in auto-entities in a loop for every required device, but suggest you to start with just a simple call of the template (step 1).
2 Likes
6

Hi thanks for this! It sounds like exaclty what I was searching for.

I can not make it work though. I checked and the The library js file it correctly loaded.

I created this simple template at the top of my dashboard yaml:

esp_home_ld2410_template:
  card:
    type: vertical-stack
    title: '[[TITLE]]'
    cards:
      - type: horizontal-stack
        cards:
          - type: entities
            entities:
              - entity: 'switch.[[ESPHOME_DEVICE_NAME]]_engineering_mode'
                name: engineering mode
              - entity: 'switch.[[ESPHOME_DEVICE_NAME]]_control_bluetooth'
                name: bluetooth

and a manual card with:

type: custom:decluttering-card
template: esp_home_ld2410_template
variables:
  - TITLE: Technickraum
  - ESPHOME_DEVICE_NAME: esp_technikraum

But on the preview (and after save) I get the error: Cannot read properties of undefined (reading 'esp_home_ld2410_template')

7

Probably you have not defined decluttering templates properly.
Check docs on github.
Should be kind of
image

8

Yes! I also saw that I totally oversaw that. Thanks a lot!