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

Configuration Frontend
1

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
2

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

3

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