YAML anchors in button card templates

Configuration Frontend
, ,
1

Hi, I have small problem with YAML anchors in custom button templates: they generate warnings in logs, such as: YAML file /config/a_custom/dashboards/../button_card/section.yaml contains duplicate key "variables". Check lines 5 and 219

In a dashboard yaml file, I have this line:

button_card_templates: !include_dir_merge_named ../button_card

which directs the button card templates to /config/a_custom/button_card/.
Then, there’s a file section.yaml in that folder, containing some YAML anchors:

sectionV: &ref_sectionV
  show_name: false
  show_icon: false
  show_ripple: false
  variables: &ref_sectionV_variables
    UUID: 
    name: No name
    collapsible: false
    collapsed: false
    gridStyle:
      - flex: auto
      - display: flex
      - flex-direction: column
      - align-items: start
      - padding: 0px 4px 8px 2px
      - gap: 8px
    headerStyle:
      - flex: 0 0 var(--my-section-header-height)
      - font-size: 95%
      - width: 100%
      - display: flex
      - align-items: center
      - background: linear-gradient(to right, rgba(65, 50, 0,0.5), rgba(65, 50, 0,0.2), rgba(65, 50, 0,0.5))
    itemStyle:
      - flex: auto
      - width: 100%
      - display: "[[[ return window[variables.UUID]?.Collapsed ? 'none' : 'grid'; ]]]"
    height: auto
    heightCollapsed: var(--my-section-header-height)
    minWidth: auto
    items: []

sectionH:
  <<: *ref_sectionV
  variables:
    <<: *ref_sectionV_variables
    gridStyle:
      - flex: auto
      - display: flex
      - flex-wrap: wrap
      - align-items: start
      - padding: 4px 0px 12px 2px
      - gap: var(--my-section-gap)
    headerStyle:
      - height: var(--my-section-header-height)
      - flex: 1 0 100%
      - display: flex
      - align-items: center
      - font-size: 95%
      - background: linear-gradient(to right, rgba(65, 50, 0,0.6), rgba(65, 50, 0,0.2), rgba(65, 50, 0,0.6))
    itemStyle:
      - flex: auto
      - display: "[[[ return window[variables.UUID]?.Collapsed ? 'none' : 'flex'; ]]]"
      - height: calc(100% - var(--my-section-header-height) - var(--my-section-gap))
      - max-width: "[[[ let c = variables.itemCount; if (!(c > 0)) c = 1; return `calc(100% / ${c} - 7px)`; ]]]"

sectionH should by a copy of sectionV, except for these 3 variables. It works/displays correctly but I get these 4 warinings (for keys variables, gridStyle, headerStyle and itemStyle). Is there a way to fix this?

2

When an anchor is resolved, you got two duplicating “variables” option.
What you should do instead:

sectionV:
  <<: &ref_common_settings
    show_name: false
    …
  variables:
    <<: &ref_common_variables
      UUID: 
      …
    gridStyle: …
    headerStyle: …
    itemStyle: …

sectionH:
  <<: *ref_common_settings
  variables:
    <<: *ref_common_variables
    gridStyle: …
    headerStyle: …
    itemStyle: …
1 Like
3

Great, it works, thanks a lot!

1 Like