Lovelace - !include files

Continuing the discussion from My Lovelace Plugins:

I now see why I couldn’t get the includes to work. My lovelace machine is still on .81.6… !include functionality was only restored in .82.0.

to be sure:
According to I can also create a resources.yaml in /config/lovelace, and in main.yaml set !resource resource.yaml ? With this content?

- url: /local/custom_ui/lovelace/tracker-card.js?v=0.1.5
  type: js
- url: /local/custom_ui/lovelace/tiles-card.js?v=0.1
  type: js
- url: /local/custom_ui/lovelace/useful-markdown-card.js?v=bac550
  type: js
1 Like

Read a few more lines and look at the example code.

finally: got it working:

title: Main Lovelace
  - !include /config/lovelace/view_Home.yaml
  - !include /config/lovelace/view_Lights.yaml

cool, and so much easier to edit the files…


about the resource template: cant we also use set path = ‘/config/lovelace/’ and use that in the template creating the resource url’s? I was wondering how this would work, and, secondly, if the version control could be added?


{% set resources = [
] %}
{% set path = '/config/lovelace/'%}

  {% for res in resources %}
  - url: {{path}}!resource {{res}}
    type: js
  {% endfor %}

obviously I tried that, but it didnt work…

It seems that changes in the !include views are not updated unless I do a hassio ha restart, is that the way it is supposed to work?

no, changes are applied without restart.
Must confess I have several cards that require a manual clear cache/reload. Other than that, I can report correct functionality, even with nested includes.

Hm, that’s odd. I have the following in my ui-lovelace.yaml:

  - !include /config/lovelace/lovelace-main-view.yaml
  - !include /config/lovelace/lovelace-main-view-tablet.yaml
  - !include /config/lovelace/lovelace-lamps.yaml
  - !include /config/lovelace/lovelace-plants.yaml
  - !include /config/lovelace/lovelace-weather.yaml
  - !include /config/lovelace/lovelace-bilen.yaml
  - !include /config/lovelace/lovelace-wakeup.yaml
  - !include /config/lovelace/lovelace-system.yaml
  - !include /config/lovelace/lovelace-sensors.yaml

and not nested !includes. Still, I notice that my UI is not always updated even after a Ctrl-Shift-R in the browser (Vivaldi, by the way).

well, can’t say. Works here. most of the time … You say

not always

so take it it does work now and then? it should. Maybe you can deduct in with card it doesn’t work as expected?
Example: I have the custom card for Dark_sky, and that uses an enormous amount of config settings in yaml. I have that custom card configured via an extra !include, on an !included View_weather.yaml. All changes I make in that config are immediately taken into effect, sometimes need a manual refresh alright, but no restart necessary. And it is a heavy card.
Same goes for my included Tiles cards, that are in the view via an extra include, like this:

title: Light Panel
path: lights
icon: mdi:light-switch
  - sensor.lamps_badge
  - sensor.spots_badge
  - !include /config/lovelace/tiles/tiles_lights_panel.yaml
  - !include /config/lovelace/tiles/tiles_lights_living_ceiling.yaml
  - !include /config/lovelace/tiles/tiles_lighting_activity.yaml

  - type: custom:monster-card
    show_empty: false
      type: glance
      title: Lights On
        - domain: light
          state: 'on'

no issues whatsoever. Id suggest identifying the difficult views and cards in that view, and inspect those individual cards for possible conflicts.

1 Like

I realize that “not always” was an understatement. What I meant was “virtually never”.
I really don’t have that many views with complicated config, so I don’t see why this should be a problem. If I were to check for possible conflicts as you mention, where would I start? What possible conflicts could there be that are not reported in the log?

Could this have anything to do with running HA over DuckDNS?

No, that’s what I do too.
Using includes is nothing special really. It simply replaces the !include with what you declare it to do. Has nothing to do with internet connection.

I have to make a change in the ui-lovelace file and save to make the changes in the includes come across. Usually just make an extra row below everything and next time I take the same row away again.


Click on the three dots top right and choose Refresh :slight_smile:


Wow, who could have believed it was that simple! Thanks!

most of the time, yes. Doesn’t always though, especially when reloading configs for some custom-cards. dark_sky is among those. To be really sure it refreshes, I always need to click Develop: clear cache in the browser menu, and hit reload.

I tend to use a combination of both F5 and the Refresh button near the 3 dots :slight_smile:

Hey, so this is a long shot, but I reuse the same entities or horizonal stacks within different vertical stacks, is it possible to do something like use the include feature within a vertical or horizontal stack? I’ve tried it a few ways with no luck, so I’m assuming not, but thought I’d check

suppose to should be possible, !include is simple replaced with what you tell it to replace, in the place you put the !include.
Have cards, tiles, images, resources included in my setup.

why don’t you show what you try to do and we can see how we can help? Or !conclude it isn’t possible after all…

Hm, Thanks.

So for example, I use this in a custom:popup-card, along with 2 of my views to track which lock codes are active on my Z-Wave Lock. They’re all in different vertical-stacks.

  • type: horizontal-stack
    • type: ‘custom:button-card’
      action: toggle
      color: var(–primary-color)
      entity: input_boolean.temp_lock_code_set
      icon: attribute
      name: Temp Code
    • type: ‘custom:button-card’
      action: toggle
      color: var(–primary-color)
      entity: input_boolean.parents_lock_code
      icon: attribute
      name: Fam Code

I call both those cards in that exact configuration a couple times too, so wanted to see if I could split it out and just use it as

- !include buttons/temp_lock_code.yaml
- !include buttons/parents_lock_code.yaml


- !include horizontal_stacks/lock_codes.yaml

well, I use this for an include

#  - !include /config/lovelace/includes/dark_sky_custom_card.yaml
# Required
type: 'custom:dark-sky-weather-card'
entity_current_conditions: sensor.dark_sky_icon
entity_temperature: sensor.dark_sky_temperature
entity_forecast_high_temp_1: sensor.dark_sky_forecast_daytime_high_temperature_1
entity_forecast_high_temp_2: sensor.dark_sky_forecast_daytime_high_temperature_2
entity_forecast_high_temp_3: sensor.dark_sky_forecast_daytime_high_temperature_3
entity_forecast_high_temp_4: sensor.dark_sky_forecast_daytime_high_temperature_4
entity_forecast_high_temp_5: sensor.dark_sky_forecast_daytime_high_temperature_5
entity_forecast_icon_1: sensor.dark_sky_forecast_icon_1
entity_forecast_icon_2: sensor.dark_sky_forecast_icon_2
entity_forecast_icon_3: sensor.dark_sky_forecast_icon_3
entity_forecast_icon_4: sensor.dark_sky_forecast_icon_4
entity_forecast_icon_5: sensor.dark_sky_forecast_icon_5
entity_forecast_low_temp_1: sensor.dark_sky_forecast_overnight_low_temperature_1
entity_forecast_low_temp_2: sensor.dark_sky_forecast_overnight_low_temperature_2
entity_forecast_low_temp_3: sensor.dark_sky_forecast_overnight_low_temperature_3
entity_forecast_low_temp_4: sensor.dark_sky_forecast_overnight_low_temperature_4
entity_forecast_low_temp_5: sensor.dark_sky_forecast_overnight_low_temperature_5
entity_summary_1: sensor.dark_sky_forecast_summary_1
entity_summary_2: sensor.dark_sky_forecast_summary_2
entity_summary_3: sensor.dark_sky_forecast_summary_3
entity_summary_4: sensor.dark_sky_forecast_summary_4
entity_summary_5: sensor.dark_sky_forecast_summary_5

(it is actually a bit longer, but you get the idea)
it is saved in this location: /config/lovelace/includes/dark_sky_custom_card.yaml

and inserted in the view card with this line

- !include /config/lovelace/includes/dark_sky_custom_card.yaml

like this:

title: Weer & Klimaat
path: weer_klimaat
icon: mdi:weather-partlycloudy
  - sensor.weather_rsd_icon
  - sensor.wind_compass
  - sensor.wind_bft
  - sensor.moon_phases
  - sensor.season_name
  - type: custom:useful-markdown-card
    content: >
      **Weersverwachting:** <font color=var(--secondary-text-color)>[[ sensor.vandaag.state ]]</font> 
                [[ sensor.dark_sky_daily_summary.state ]]

#  - type: custom:card-modder
#    style:
#      background-image: url("/local/lovelace/images/weather-background-[[ sun.sun.state ]].png")
#      background-size: 100% 400px
#      --primary-text-color: var(--primary-text-color)
#      --secondary-text-color: var(--secondary-text-color)
#      --paper-item-icon-color: var(--primary-text-color) #small variation icons
#    card:
  - type: 'custom:weather-card'
    entity_weather: weather.woensdrecht
    entity_sun: sun.sun
    entity_apparent_temperature: sensor.jagti_windchill
    entity_wind_force: sensor.br_wind_force

  - type: weather-forecast
    entity: weather.woensdrecht

  - type: weather-forecast
    entity: weather.home_darksky

  - !include /config/lovelace/includes/dark_sky_custom_card.yaml

does this help?

You just made me realize you can really go crazy with node anchors in lovelace!
Thank you!

  mycard: &card1
  type: entities
    - light.bed_light
    - light.ceiling_lights
    - light.bed_light
  - title: Node anchors
      - *card1
      - type: horizontal-stack
          - *card1
          - *card1
      - type: glance
        <<: *card1

… and two days later, I realize I forgot to click send…