Lovelace - use !include for Tiles in more than 1 view?

Using the !include to make the ui-lovelace.yaml more manageable than the 1 enormous file, has made a huge difference in ease and error-prevention when editing the files.

I now want to create several ‘modules’ for my Tiles configurations, so I can show these easily on more than 1 View, without having to copy the full configuration each time. Thought Id do that with !include also:

    # view_Lights.yaml
    title: Light Panel
    id: lights
    icon: mdi:light-switch
    cards:
      - !include: /config/lovelace/resources/light_panel.yaml

      - type: custom:tiles-card
        legacy_config:
          columns: 6
    #        column_width: 50px #minmax(75px, 75px)
    #        icon_size: 50px
          row_height: 50px
          entities:
            - entity: script.lighting_opstaan
              style_template: >
                if (entities['input_select.activity_lighting'].state === 'Opstaan') return 'background-size: contain;background-color: #F0C209';
                return 'background-size: contain; background-color: #555B65;filter:grayscale(75%)';
              image: /local/activities/opstaan.png
              etc etc etc........

Main question here of course the first
- !include: /config/lovelace/resources/light_panel.yaml

I don’t get an error, but the View won’t load.

my path is:

03

and the light_panel is a working set of tiles copied out of my view_Lights.yaml:

##############################################################################################################
## Module Light_panel in /config/lovelace/resources/light_panel.yaml
##############################################################################################################

type: custom:tiles-card
legacy_config:
  row_height: 25px
  text_uppercase: false
  text_size: 1em
  text_color_on: '#555B65'
  text_color_off: '#F0C209'
  color_on: '#F0C209'
  color_off: '#555B65'
  entities:
    - entity: group.all_lights_only
      label_template: >
        if (entities['sensor.lights_badge'].state !== 0) return 'Total lights on: ' + entities['sensor.lights_badge'].state;
        return 'No lights on';
      icon_template: >
        if (state === 'on') return 'mdi:power-plug';
        return 'mdi:power-plug-off';
      style_template: >
        return 'min-height: 25px';
      color_on: '#5daf35'
      text_color_off: '#5daf35'
      column: 1
      column_span: 3
      row: 1
      row_span: 1
      etc etc etc etc
      etc etc etc etc

Please have a look what I am missing?

My ui-lovelace.yaml is below and working flawlessly:

resources:
  - url: /local/lovelace/tracker-card.js?v=0.1.5
    type: js
  - url: /local/lovelace/tiles-card.js?v=0.1
    type: js
  - url: /local/lovelace/useful-markdown-card.js?v=bac550
    type: js
  - url: /local/lovelace/monster-card.js?v=0.2.3
    type: js
  - url: /local/lovelace/bignumber-card.js?v=0.0.1
    type: js
  - url: /local/lovelace/entity-attributes-card.js?v=0.1.1
    type: js
  - url: /local/lovelace/gauge-card.js?v=0.2.0
    type: js
  - url: /local/lovelace/mini-media-player-bundle.js?v=0.9.5
    type: js
  - url: /local/lovelace/weather-card.js
    type: js
  - url: /local/lovelace/fold-entity-row.js?v=0636ee
    type: js
  - url: /local/lovelace/vertical-stack-in-card.js?v=0.0.8
    type: js
  - url: /local/lovelace/power-wheel-card.js?v=1.1
    type: module

title: Main Lovelace
views:
  - !include /config/lovelace/view_Home.yaml
  - !include /config/lovelace/view_Lights.yaml
  - !include /config/lovelace/view_Ikea_tradfri.yaml
  - !include /config/lovelace/view_Philips_hue.yaml
  - !include /config/lovelace/view_Floorplan.yaml
  - !include /config/lovelace/view_Settings.yaml
  - !include /config/lovelace/view_Home_climate.yaml
  - !include /config/lovelace/view_Home_summary.yaml
  - !include /config/lovelace/view_Summary_groups.yaml
  - !include /config/lovelace/view_Home_assistant.yaml
  - !include /config/lovelace/view_Home_energy.yaml
  - !include /config/lovelace/view_Home_solar_energy.yaml
  - !include /config/lovelace/view_Phones_tablets.yaml
  - !include /config/lovelace/view_Travel.yaml
  - !include /config/lovelace/view_Weer_klimaat.yaml
  - !include /config/lovelace/view_Tijd_agenda.yaml
  - !include /config/lovelace/view_Computer_netwerk.yaml
  - !include /config/lovelace/view_Audio_video_gaming.yaml
  - !include /config/lovelace/view_Media_players.yaml
  - !include /config/lovelace/view_Health.yaml
  - !include /config/lovelace/view_Home_automation.yaml
  - !include /config/lovelace/view_Weblinks.yaml
  - !include /config/lovelace/view_Leftovers.yaml
  - !include /config/lovelace/view_Developer.yaml

At least for me… I discovered I have to comment out my include refresh and the remove the the comment and refresh again. or restart hass altogether to see my changes

answering myself here…

including Tiles via !include, to prevent necessity of configuring Tiles in the view files, and allow for easy includes in other places without duplicating code:

my current homepage in Lovelace:

title: default_view
icon: mdi:home
path: home
badges:
  - sensor.espresso_water_level
cards:
  - !include /config/lovelace/tiles/tiles_family.yaml
  - !include /config/lovelace/tiles/tiles_activities.yaml
  - !include /config/lovelace/tiles/tiles_switches.yaml
  - !include /config/lovelace/tiles/tiles_uit_thuis.yaml
  - !include /config/lovelace/tiles/tiles_home_modes.yaml
  - !include /config/lovelace/tiles/tiles_audio_system.yaml

a single Tiles file:

##############################################################################################################
# Tiles: Home modes /config/lovelace/tiles/tiles_home_modes.yaml
##############################################################################################################

type: custom:tiles-card
legacy_config:
  columns: 4
  color_on: '#F0C209'
  color_off: '#555B65'
  icon_size: 75px
  row_height: 100px
  entities:
    - entity: input_boolean.home_mode_locked
      image: /local/modes/locked.png
      style_template: >
        if (state === 'on') return 'background-color: #F0C209';
        return 'background-color: #555B65;filter:grayscale(75%)';
    - entity: input_boolean.home_mode_dogs_free
      style_template: >
        if (state === 'on') return 'background-size: contain; background-image: url(\"/local/modes/spike_' + state + '.png\")';
        return 'filter:grayscale(75%);background-size: contain; background-image: url(\"/local/modes/spike_' + state + '.png\")';
    - entity: input_boolean.home_mode_vacation
      image: /local/modes/vacation.png
      style_template: >
        if (state === 'on') return 'background-color: #F0C209';
        return 'background-color: #555B65;filter:grayscale(75%)';
    - entity: input_boolean.home_mode_party
      image: /local/modes/party.png
      style_template: >
        if (state === 'on') return 'background-color: #F0C209';
        return 'background-color: #555B65;filter:grayscale(75%)';
1 Like