A tip for splitting up your Lovelace config

Are some of you using Compact Custom Header?

I couldn’t get it to split lovelace configuration, I believe because of this resource.

Already know that it is possible. I will check my CCH config.

I splitted my lovelace configuration using !include and I have the same problem as you. Changes in included files are not noticed by lovelace, even when the page is refreshed (also using CTRL), different from what @finity said. I need to do any cosmetic change in ui-lovelace.yaml in order to the change be loaded. That’s a bit annoying.

can you post your ui-lovelace.yaml file so we can see if there might be some kind of issue there.

i almost never touch my ui-lovelace file to make changes unless i am adding resources for a custom card.

I don’t think it would help. No error is reported. We are talking about how the changes to take effect. And for this to happen, some minor change must be done in lovelace.yaml.

can outsource even that:

resources: !include /config/lovelace/resources/resources.yaml
1 Like

Yes, I switched back to !include, and it detected changes for a while, but that seems to have stopped on recent versions.

At some point I’ll dig into the code and work out why… or switch back to !include_dir_list !

It seems HA can only check for changes in ui-lovelace.yaml. It can not detect any changes in included files.
However you can use the refresh option from the three dot menu in the top right to update any included files.

No. that isn’t correct.

There is nothing special about my installation. I use !include (NOT !include_dir_list) and i never touch ui-lovelace.yaml and it picks up every change I make by just clicking on 'refresh" in the three-dot menu in the top right of the front end.

Maybe it won’t. But maybe it will. How do you know if you don’t try?

I’m not sure why you are saying those two phrases like you are. As if there is some kind of bug inherent in those ideas.

Of course you have to click on the “refresh” button every time you make a change to ui-lovelace.yaml or any !include files.

That’s exactly the way it’s supposed to work.

@FunkyBoT, have you not been doing that? If not then I can see why you are confused.

Well, there are two slightly distinct ideas here - there’s the refresh button on your browser, which goes back to the web server and asks for the page again without the server necessarily re-reading it from disk, but there’s also the refresh button provided in the three-dot menu, which I think tells the web server it really needs to re-read all its files again.

In the past, when you made a change to ui-lovelace.yaml and just used the browser reload (or loaded the page for the first time), the system would detect that the file on the disk had changed and always serve up the latest one. It used to do that for !include files too, but it didn’t do it for !include_dir_list . Recently, it seems to have changed so that it caches !include as well, hence the comments above.

Exactly this, however I’ve never had it working for lovelace with includes. I’ve always had to use the refresh option from the three dot menu.

I’ve been using Lovelace like this for a few months now. Before I always used it with everything in the ui-lovelace.yaml file. As far as I can remember in either case I was never able to just hit the refresh button on the browser. I always had to use the three dot refresh button. However, that might just be my imperfect memory.

One more thing that might be another data point might be that if you right click on the refresh button in the chrome browser it brings up other options. From there you can do a “hard reload” which basically does the same thing for HA as the “refresh” does in the three dot menu…it forces a refresh of the cache which reloads Lovelace from the server not from the cached files on your computer or other device.

This is something like hitting CTRL while pressing the reload in the browser. When you said refresh, I thought about the page reload in the browser, sorry my bad. In the "include files this does not work, but the refresh in the sandwitch/3dot button (that in my language is translated as equivalent to UPDATE, so the confusion).
Selecting the refresh, I canfirm that it works, and then it’s ok for me.

1 Like

Very helpful. I’ve been trying to debug a problem and frustrated by inconsistant results. Hard reload on my browser wasn’t working, but the three buttons do.

Cheers, Richard

I was thrown back by this strange behaviour also. And i’m still wondering cause i also have to wait some time (also with using the refresh button in the header). Do you also have to wait some time until the changes happen?

Hello Gluwc
I’m using includes with success in my ui.lovelace.yaml, but have the need to include a “menu-line” in every view. I’ve looked at your example from april 16th, but cant seem to get the indents right in the include files, whitch starts with

  • type : horizontal-stack.

What is your indentation ?

/Michael

main view file:

#---------------HEADER-------------------------------------------------------------------------------------
title: Køkken
id: kokken
path: kokken
background: center / cover no-repeat url("/local/lovelace/dark_ripple.png") fixed
panel: true
cards:
  - type: vertical-stack
    cards:
      - !include lovelace_views/header.yaml
#----------------------------------------------------------------------------------------------------------
        - type: horizontal-stack
          cards:
            - type: custom:card-modder
              style:
                --paper-card-background-color: rgba(0, 0, 0, 0.5)
                --paper-item-icon-color: white

Header file

    - type: horizontal-stack
      cards:
        - type: custom:card-modder
          style:
            --paper-card-background-color: rgba(0, 0, 0, 0.5)
            --paper-item-icon-color: white
            border-radius: 5px
            height: 100px
            color: rgb(255, 255, 255)
            report_size: 5
          card:
            type: "custom:clock-card"
        - type: "custom:button-card"
          icon: mdi:food-variant
          show_label: false
          size: 50%
          color: auto
          tap_action:
            action: navigate
            navigation_path: /lovelace/kokken
          styles:
            card:
              - height: 100px
              - width: 100px
              - background-color: rgba(0, 0, 0, 0.5)

Have a look at https://github.com/Gluwc/homeassistant/blob/e5a49b837e08b10b0c9c279c8a1901e3ab87d48e/lovelace/views/home/climate.yaml and https://github.com/Gluwc/homeassistant/blob/e5a49b837e08b10b0c9c279c8a1901e3ab87d48e/ui-lovelace.yaml for indentation.

1 Like

And… as a magic touch !

It turned out that it was not so much the identation, but that I started my “- type: horizontal-stack” in the include file with a “-”. Removed it, after having reviewed your files and changed the identation accordingly.

Thanks a lot Lucas ! :slight_smile:

/Michael

Trying to split my lovelace but receives

mapping values are not allowed here in “/config/ui-lovelace.yaml”, line 51, column 11

when adding views: !include_dir_list ui-lovelace/

Any ideas?