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.
Take a look here:
https://github.com/isabellaalstrom/HomeAssistantConfiguration/blob/master/ui-lovelace.yaml
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
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…
path: home is the page name used instead of the number you get when not defining a path (was id before)
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.yamlYeah, 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 ?
Have you solved this issue?
I would like to repeat several same cards with different variables. For me, it also does not work.
I have in my lovelace.yaml
- !include
pump.yaml
entity: automation.outside_pump_master_control_switch
The pump.yaml has this:
type: entities
entities:
- {{ entity }}
The error mesage:
mapping values are not allowed here in “lovelace.yaml”, line 16, column 13
Line 16 is this: entity: automation.outside_pump_master_control_switch
How to solve this? Thanks in advance!
Is there a way of using !include without switching completely over to yaml mode? Even if it could be done per-dashboard that’d be great
This is what I want to know as well, but I don’t think it will work…
No, you have to use 100% yaml mode to use !include (for that specific dashboard).
there is still no way to reuse a card across multiple dashboards in UI mode?
no