GUI Dashboards and card templates

Configuration Frontend
1

Hi Home Assistant Community :slight_smile:

I have been using HA for quite a number of years, not having made any significant changes over the last 2 years or so. For the interface I have been using on different devices, I have developed quite a number of card-templates, e.g. a slider template, a header template, etc.

After having read through the documentation of the new dashboard apporach and looking at some videos, I decided the re-design my dashboards I am using for various devices. Of course, I want to use the UI editor, as it seems to be quite fast and comfortable to work with that.
Having said that, I would like to continue using some of the card-templates and also developing new card-templates for the new dashboards. Here is my problem, I cannot get these templates integrated into my new dashboards.

I have a folder of templates (button-card-templates), e.g. a file called slider-light.yaml, within the file, I have a card-template defined (copied from the mushroom interface discussion, I would be nowhere without this community, thanks to everybody!) as follows:

slider_light:
  variables:
    var_entity:     'var_entity'
    var_name:       'var_name'

  name: '[[[ return variables.var_name ]]]'
  custom_fields:
    slider:
      card:
        type: vertical-stack
        cards:
          - type: custom:my-slider-v2
            entity: '[[[ return variables.var_entity ]]]'
            colorMode: brightness
            styles:
              container:
                - border-radius: 100px
                - overflow: visible
                - background: none
              card:
                - height: 40px
                - padding: 0 20px
                - background: var(--brightness)
              track:
                - overflow: visible
                - background: none
              progress:
                - background: none
              thumb:
                - background: var(--black)
                - top: 2px
                - right: '-18px'
                - height: 36px
                - width: 36px
                - border-radius: 100px

          - type: custom:my-slider-v2
            entity: '[[[ return variables.var_entity ]]]'
            colorMode: temperature
            styles:
              container:
                - border-radius: 100px
                - overflow: visible
                - background: none
              card:
                - height: 40px
                - padding: 0 20px
                - background: var(--temperature)
              track:
                - overflow: visible
                - background: none
              progress:
                - background: none
              thumb:
                - background: var(--black)
                - top: 2px
                - right: '-18px'
                - height: 36px
                - width: 36px
                - border-radius: 100px
  styles:
    grid:
      - grid-template-areas: '"n" "slider"'
      - grid-template-columns: 1fr
      - grid-template-rows: 1fr min-content min-content
    card:
      - font-family: Metropolis-Regular.otf;
      - background: var(--brightness-tint)
      - padding: 16px
      - '--mdc-ripple-press-opacity': 0
    name:
      - justify-self: start
      - font-size: 14px
      - margin: 4px 0 12px 0
      - color: var(--contrast20)

Within the UI editor, I opened the main yaml file (Raw Configuration Editor) and tried two things:

  • integrate the folder at the very top of the yaml file and later referred to it:
button_card_templates: !include_dir_merge_named integrations/common/button-card-templates/

views:
  - title: Office
    path: office
    icon: mdi:desk
    cards:
      - type: custom:button-card
        template: slider_light
        variables:
          var_entity: light.az_fenster_links
          var_name: fensterlampe

which did not work

  • I included the template definition itself in the yaml file at the very top and then referred to it later
button-card-templates:
  - slider_light: null
    variables: null
    var_entity: var_entity
    var_name: var_name
    name: '[[[ return variables.var_name ]]]'
    custom_fields:
      slider:
        card:
          type: vertical-stack
          cards:
            - type: custom:my-slider-v2

.........
views:
  - title: Office
    path: office
    icon: mdi:desk
    cards:
      - type: custom:button-card
        template: slider_light
        variables:
          var_entity: light.az_fenster_links
          var_name: fensterlampe

I also tried to integrate the folder via the configuration.yaml, as well as the lovelace,yaml, and frontend.yaml

None of that worked. I am sure we can use somehow the -card-templates in the UI setup, but I am just not finding a way to do so.

I am thankful for every hint, leading me to the solution :slight_smile:

Thanks for helping!