Lovelace and !include

I have seen that using !include is now explicitly mentioned in the docs for (I believe) the first time but can someone explain how it works as I can’t find anything to tell me.

Does it allow the ui-lovelace.yaml to be split?

I’ve experimented but can’t make it work.

Thanks.

2 Likes

Take a look here:
https://github.com/isabellaalstrom/HomeAssistantConfiguration/blob/master/ui-lovelace.yaml

1 Like

yes it does.

that’s how I use lovelace in yaml mode too. You can even use !include for separate entities in a view:

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

called in:

##############################################################################################################
# Main Lovelace configuration file, calling all Views via !include /config/lovelace/view_***
# for ease of editing the separate Views, and prevent errors while doing so to the full setup
##############################################################################################################

resources:
# https://github.com/thomasloven/lovelace-card-tools
  - url: /local/lovelace/resources/card-tools.js?v=6ce5d0
    type: js
# Ha Cards : https://www.home-assistant.io/lovelace/gauge
# https://github.com/ciotlosm/custom-lovelace/tree/master/gauge-card
  - url: /local/lovelace/resources/gauge-card.js?v=0.2.0
    type: js
    
# Custom cards

  - url: /local/lovelace/resources/tracker-card.js?v=0.1.5
    type: js
# https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card
  - url: /local/lovelace/resources/tiles-card.js?v=0.1.1
    type: js
  - url: /local/lovelace/resources/useful-markdown-card.js?v=dfc268
    type: js
# https://github.com/ciotlosm/custom-lovelace/tree/master/monster-card
  - url: /local/lovelace/resources/monster-card.js?v=0.2.3
    type: js
# https://github.com/ciotlosm/custom-lovelace/tree/master/bignumber-card
  - url: /local/lovelace/resources/bignumber-card.js?v=0.0.1
    type: js
# https://github.com/ciotlosm/custom-lovelace/tree/master/entity-attributes-card
  - url: /local/lovelace/resources/entity-attributes-card.js?v=0.1.1
    type: js
  - url: /local/lovelace/resources/group-card.js?v=0.0.2
    type: js

  - url: /local/lovelace/resources/mini-media-player-bundle.js?v=0.9.8
    type: js
# https://github.com/kalkih/mini-graph-card
  - url: /local/lovelace/resources/mini-graph-card-bundle.js?v=0.1.0
    type: module
  - url: /local/lovelace/resources/weather-card.js
    type: js
# https://github.com/iammexx/home-assistant-config/tree/master/ui/darksky
  - url: /local/lovelace/resources/dark-sky-weather-card.js?v=7.1.2
    type: module
  - url: /local/lovelace/resources/fold-entity-row.js?v=5ab35c
    type: js
# https://github.com/custom-cards/vertical-stack-in-card
  - url: /local/lovelace/resources/vertical-stack-in-card.js?v=v0.1.0
    type: js
# https://github.com/thomasloven/lovelace-card-modder
  - url: /local/lovelace/resources/card-modder.js?v=fadc03
    type: js
  - url: /local/lovelace/resources/slider-entity-row.js?v=d6da75
    type: js
  - url: /local/lovelace/resources/layout-card.js?v=bd7e5a
    type: js
# https://github.com/gurbyz/custom-cards-lovelace/tree/master/power-wheel-card
  - url: /local/lovelace/resources/power-wheel-card.js?v=0.0.6
    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
  - !include /config/lovelace/view_Test.yaml
4 Likes

I hope someone can give me a hand with this…

I’m trying to split my config with !includes using the examples above and I just can’t seem to get it to work.

I initially broke everything up into sections based on my views (duh!) so I copied my first section (“main” view) to a lovelace_main_view.yaml file, renamed my original “main” view to “main 2” and wrote the include statement.

Here is the pertinent section of my ui-lovelace.yaml file:

resources:
  ## https://github.com/thomasloven/lovelace-card-tools
  - url: /local/card-tools.js?v=090958
    type: js
  ## https://github.com/thomasloven/lovelace-slider-entity-row  ##
  - url: /local/lovelace/slider-entity-row.js
    type: js
  ## https://github.com/bundito/radar-forecast
  - url: /local/lovelace/radar-forecast.js?v=1
    type: js
          
title: Docker - Lovelace
views:
  #- !include /config/lovelace/lovelace_main_view.yaml
######################################################################################################
  - title: Main 2
    badges:
      - binary_sensor.ha_update_avail_template
      - binary_sensor.ha_api_mqtt_test
    cards:
      - type: entity-filter
        show_header_toggle: false
        show_empty: false
      - etc.

If I uncomment the !include line then this is what I get - a blank screen with an “unnamed view” at the top:

I’ve made sure to whitelist the lovelace directory just in case that was causing issues.

there is nothing in the logs relating to this issue.

and for completeness here is the beginning of the lovelace_main_view.yaml file:

##############################################################################
  - title: Main
    #icon:
    badges:
      - binary_sensor.ha_update_avail_template
      - binary_sensor.ha_api_mqtt_test
    cards:
      - type: entity-filter
        show_header_toggle: false
        show_empty: false
        card: 
          type: glance
      - etc.

I can’t see where I’m going wrong.

have a look 1 post above and check the large file, which is the full ui-lovelace.yaml. (compare that to the files of over 3000 lines…)

It consists only of 2 lists: the resources (top part), and the views part (title: Main Lovelace)

your include files shouldn’t have dashes and indents in front of the title, but should start left aligned:

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

as always, be ware for spacing and indents…:slight_smile: path: home is the page name used instead of the number you get when not defining a path (was id before)

2 Likes

Make sure you’re using the right path. I was having issues and couldn’t figure it out until I realized that I had a leading ‘/’ in my path name. Since the lovelace folder is in the same directory as my ui-lovelace.yaml file, I just use

views:
  - !include lovelace/view_home.yaml

Yeah, sorry. I should have come back on here and mentioned I got it working.

It was because I had everything moved over 2 spaces to the right as @Mariusthvdb said. As soon as I moved everything back to the left margin and removed the - from in front of “title”, it’s worked since then.

Thanks for the help tho.

I am trying to use the !include files into my ui-lovelace.yaml, but i am having problems with one view including the custom layout-card.

I have this at the beginning of the!include file:

icon: mdi:lamp
panel: true
title: Luci
path: Luci
background: border-box red
cards:
  - type: custom:layout-card
    layout: auto
    cards:
      - type: vertical-stack
        cards:
          - type: "custom:button-card"
            color_type: label-card
            color: rgb(44, 109, 214)
            name: Salotto Yeelight
            styles:
              name:
                - font-size: 14px
                - font-weight: bold
                - color: white
      - type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: light.yeelight_1
            template: light_button
            icon: 'bha:floor-lamp'
            name: Luce 1
          - type: "custom:button-card"
            entity: light.yeelight_2
            template: light_button
            icon: 'bha:floor-lamp'
            name: Luce 2
          - type: "custom:button-card"
            entity: light.yeelight_6
            template: light_button
            icon: mdi:lamp
            name: Luce 6

and the ui-lovelace:

views:
  - !include lovelace_views/view_Home.yaml
  - !include lovelace_views/view_Luci.yaml

Using the include file i get the following:

If i don’t use include i get:

Why this different behaviour using include ?

Where am i wrong?

after the HA and HACS Update. this part dont work:

- !include
  - ../includes/graphs.yaml

Example:

- type: horizontal-stack
        cards:
          - !include
            - ../includes/graphs.yaml
            - entity: sensor.net_download_cur_filtered
              name: Download
              align_icon: left
              hours_to_show: 12
              points_per_hour: 4

What is the new Way ?