Save yourself time (and code) with YAML anchors

[13robin37]

This little trick might come in handy for people with lots of views, cards, whatever: YAML anchors!

The concept isn't very hard but a little tricky to implement sometimes. With YAML anchors you can write code for a card one time and use it at other points within your dashboard without copy-pasting the code - you just insert the YAML anchors (kind of like a variable) and Home Assistant does the rest.

Just to give you 1-2 examples: I don't want to copy-paste my chips for every view once I make adjustments (I have more than ten views).

  - title: Bathroom
    icon: bath-icon
    path: bathroom
    cards:
      - type: vertical-stack
        cards:
          - &header-chips
            type: "horizontal-stack"
            cards:
              - type: "custom:button-card"
                template: "chip_back"
              - type: "custom:button-card"
                template: "chip_temperature"
                variables:
                  ulm_chip_temperature_inside: "sensor.inside"
                  ulm_chip_temperature_outside: "sensor.outside"
                  ulm_chip_temperature_weather: "weather.home"

With the help of *header-chips I can now re-use the cards configured here for other views.

  - title: "Guest-Bath"
    icon: "mdi:paper-roll"
    path: "guest-bath"
    cards:
      - type: vertical-stack
        cards:
          - *header-chips

Home assistant will process it like this:

  - title: "Guest-Bath"
    icon: "mdi:paper-roll"
    path: "guest-bath"
    cards:
      - type: vertical-stack
        cards:
              - type: "custom:button-card"
                template: "chip_back"
              - type: "custom:button-card"
                template: "chip_temperature"
                variables:
                  ulm_chip_temperature_inside: "sensor.inside"
                  ulm_chip_temperature_outside: "sensor.outside"
                  ulm_chip_temperature_weather: "weather.home"

You can also configure anchors and change single variables. This is handy to implement cards that should look the same everywhere but have different entities (like a light or script card for example).

            cards:
              - &light-card
                type: "custom:button-card"
                template: "card_light"
                variables:
                  ulm_card_light_enable_slider: true
                  ulm_card_light_enable_collapse: true
                  ulm_card_light_enable_popup: true
                  ulm_card_light_enable_popup_tap: true
                entity: "light.your_light"

To adjust single variables you can't just insert the anchor and write the variable in the following line. Instead you need to use <<: - to make it work it has to look like this:

            cards:
              - <<: *light-card
                entity: "light.other_light"

This results in the following code:

            cards:
              - type: "custom:button-card"
                template: "card_light"
                variables:
                  ulm_card_light_enable_slider: true
                  ulm_card_light_enable_collapse: true
                  ulm_card_light_enable_popup: true
                  ulm_card_light_enable_popup_tap: true
                entity: "light.other_light"

Boom! If you ever want to adjust your light card, you just need to change a variable at one point in your dashboard.

This makes it super easy to maintain your dashboard and implement lots of changes at once. You don't need any extra cards for this. Any questions - feel free to ask. I've cut my dashboard code in half with this.

[scoobydoofus]

Am I right in thinking this won't work if I have my views split up into separate yaml files? I get an error "unidentified alias" when I try, and a quick google search seems to indicate they only work within the individual file... :(