!include templates for button-card

Configuration Frontend
1

I have a number of views in their own files included from ui-lovelace.yaml which works flawless.
I’ve built most of them based on Button-Card
It works great with Templates placed in ui-Lovelace.yaml, but they are getting big and I want to move them to their own file.

Whatever I do, I can’t get it to work.

In ui-lovelace.yaml:

button_card_templates: 
  header:

and so on, works great, but when I change it to

button_card_templates: 
  - !include /settings/button_card_templates.yaml

and put the following in the button_card_templates.yaml

header:
  styles:

There is no indentation before header: (I even tried with) and after that, the code follows the same structure as in ui-lovelace.yaml (cut+paste and changed the indentation so it lines up with the first template).

Whatever I do it seams to ignore everything written in the included file. I’m sure the file itself is found cause if there is an error in the path or filename i get an error that it cant be found.

I also tried to !include it from the included views with the same error

Nothing I do work, and I do not understand what I should do to make it.

2 
button_card_templates: !include /button_card_templates.yaml
2 Likes
3

Damn, that easy? :slight_smile:

It works!

1 Like
4

May I ask another question about include? :slight_smile:

I’m trying to include two files after each other in a view.

- type: custom:layout-card
  layout: vertical
  cards: !include family_tracker.yaml

Works fine, but if I want it to be followed by
!include lightoff.yaml, without any additional yaml code, I can’t understand how.

    cards:
      !include /config/lovelace/family_tracker.yaml
      !include /config/lovelace/lightoff.yaml

Seams to be interpretated as one file.

    cards: 
      - !include /config/lovelace/family_tracker.yaml
      - !include /config/lovelace/lightoff.yaml

Then I get “No card type configured”

5

Found the error myself :slight_smile:

When I used

    cards: !include family_tracker.yaml
``
`I had to use the following in the file
  • type: horizontal-stack
    cards:
But when I used
``
cards: 
  - !include family_tracker.yaml
  - !include lightoff.yaml

I had to the use following in the file

type: horizontal-stack
cards:
1 Like
6

hi im confuse with the buttom template
where should i put this part in order to work i read the docs but English not been my first language did not helped ether thank you in advance

button_summary_picture:
  size: 70%
  show_state: false
  show_label: true
  show_name: false
  show_entity_picture: true
  aspect_ratio: 1/1
  tap_action:
    action: more-info
    haptic: light
  hold_action:
    action: more-info
    haptic: success
  styles:
    card:
      - border-radius: 6px
      - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
      - background-color: ivory
      - color: grey
      - font-family: Helvetica
    grid:
      - position: relative
    custom_fields:
      time:
        - position: absolute
        - left: 30%
        - top: 30%
        - font-size: 14px
        - font-weight: bold
        - color: black
custom_header:
  compact_mode: true
  background: repeat
  shadow: on
  active_tab_color: '#07b379'
  all_tabs_color: "#77807d"Preformatted text
7 
button_card_templates:
  button_summary_picture:
    size: 70%
    show_state: false
    show_label: true
    show_name: false
    show_entity_picture: true
    aspect_ratio: 1/1
    tap_action:
      action: more-info
      haptic: light
    hold_action:
      action: more-info
      haptic: success
    styles:
      card:
        - border-radius: 6px
        - box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
        - background-color: ivory
        - color: grey
        - font-family: Helvetica
      grid:
        - position: relative
      custom_fields:
        time:
          - position: absolute
          - left: 30%
          - top: 30%
          - font-size: 14px
          - font-weight: bold
          - color: black
custom_header:
  compact_mode: true
  background: repeat
  shadow: on
  active_tab_color: '#07b379'
  all_tabs_color: "#77807d"Preformatted text
8

thank you for the reply

9

When adding button_card_templates: !include /button_card_templates.yaml to the Lovelace raw editor it does not work. How do you add the !include directive into the raw editor?

Thanks,
Simon

10

Yes, same problem here! I still found no solution for this. Anyone else maybe? :slight_smile:

YAMLException: unknown tag !<!include>
11

you have to use yaml mode. Raw editor doesn’t have includes from what I can tell.

12

Thats why i can’nt get it working. So if i had a large button_template code i have to paste it in the raw editor?

13

You can’t use the raw editor with !includes. You have to use yaml mode, where your entire UI is generated by Yaml without using the UI at all.

14

exactly, but i do not want use yaml mode. so i can not use !include so i have to paste code in the raw editor itself, right?

15

Right, you can’t use the UI with includes so you have to paste the ‘included’ yaml into the raw editor with the appropriate spacing.

1 Like
16

damn that will be a hell of a job. Cause I copy the code from the wheb but have to add 2 spaces to each line to get correct spacing.

1 Like
17

Sorry for the probably stupid question but where do I find the RAW editor ?

image
image2548×396 46.3 KB

This gives me

Unable to parse YAML: YAMLException: unknown tag !<!include> (1:59) 1 | ... lude button_card_templates.yaml -----------------------------------------^ 2 | ... 3 | ...
18

!include cannot be used in a storage mode of a dashboard.

19

Thx! I didn’t know about the two modes.

Does yaml mode mean I didn’t have any of the ui editing feature anymore?

20

In yaml-mode dashboard you cannot edit views/cards by a mouse))