Ui-lovelace.yaml and custom resources

I’m trying to switch to using ui-lovelace.yaml and am getting lots of “red block” errors due to missing resources, such as auto-entities, which were installed via HACS.

I’ve tried adding this block (and variations with different paths) to the beginning ui-lovelace.yaml, with no success. I assume this is a simple issue, what do I need to do?


resources:
  - type: module
    url: /www/community/battery-entity-row.js?v=1.0.0
  - type: module
    url: /www/community/lovelace-card-tools/card-tools.js
  - type: module
    url: /www/community/weather-card/weather-card.js
  - type: module
    url: /www/community/simple-thermostat/simple-thermostat.js
  - type: module
    url: /www/community/lovelace-card-mod/card-mod.js
  - type: module
    url: /www/community/lovelace-fold-entity-row/fold-entity-row.js
  - type: module
    url: /www/community/lovelace-auto-entities/auto-entities.js
  - type: js
    url: /www/community/iCloud3/icloud3-event-log-card.js?v=1.000
  - type: module
    url: /www/community/lovelace-gui-sandbox/gui-sandbox.js

The resources no longer go in ui-lovelace.yaml.

they now go under the “lovelace:” section of configuration.yaml:

lovelace:
  mode: yaml
  resources:
    - type: module
      url: /www/community/battery-entity-row.js?v=1.0.0
    - type: module
      url: /www/community/lovelace-card-tools/card-tools.js
    - type: module
      url: /www/community/weather-card/weather-card.js
    ...
2 Likes

This is what I used:


lovelace:
  mode: yaml
  resources:
    - type: module
      url: /www/community/lovelace-battery-entity-row/battery-entity-row.js?v=1.0.0
    - type: module
      url: /www/community/lovelace-card-tools/card-tools.js
    - type: module
      url: /www/community/weather-card/weather-card.js
    - type: module
      url: /www/community/simple-thermostat/simple-thermostat.js
    - type: module
      url: /www/community/lovelace-card-mod/card-mod.js
    - type: module
      url: /www/community/lovelace-fold-entity-row/fold-entity-row.js
    - type: module
      url: /www/community/lovelace-auto-entities/auto-entities.js

And I’m getting these errors

And this is what my file structure looks like.

I assume HACS installed these folders in /www/community. Am I using the correct paths in my resources sections? Do I need to grant permissions somewhere?

I went and reinstalled one of the integrations and the install gave me some advice. Here is what I ended up with


lovelace:
  mode: yaml
  resources:
    - type: module
      url: /hacsfiles/lovelace-fold-entity-row/fold-entity-row.js 
    - type: module
      url: /hacsfiles/lovelace-auto-entities/auto-entities.js
    - type: module
      url: /hacsfiles/lovelace-battery-entity-row/battery-entity-row.js
    - type: module
      url: /hacsfiles/lovelace-card-tools/card-tools.js 
    - type: module
      url: /hacsfiles/lovelace-card-mod/card-mod.js
    - type: module
      url: /hacsfiles/simple-thermostat/simple-thermostat.js
    - type: module
      url: /hacsfiles/weather-card/weather-card.js
    - type: module
      url: /hacsfiles/lovelace-layout-card/layout-card.js

Thanks!

Yeah, sorry. I should have caught that “www/” in the path.

that would never have worked. The “simlink” (or whatever it’s called in this case) for the “www” folder is “local”.

So in your example even if you didn’t use HACS the entry should have been like “url: /local/community/weather-card/weather-card.js”.

Do you know how !includes work for ui-lovelace.yaml?

I have an integration which generates a lovelace “view” file in the package/myintegration/foobar.txt

I want to include that into ui-lovelace.yaml. I know I can copy it into /config/lovelace/foobar.txt, but my aim is to not have to, so when my integration options change the view changes appear automatically. Any advice?

the includes work just like they do in the main config.

I believe you can put them anywhere you want as long they are referenced correctly in ui-lovelace.yaml.

I have all of my views located in, for example, “/config/lovelace_views/my_view.yaml”

then I reference it in ui-lovelace.yaml like:

title: Home Assistant
views:
  - !include '/config/lovelace_views/my_view.yaml'
  - !include '/config/lovelace_views/my_other_view.yaml'
  ...

so you should be able to add it:

views:
  - !include '/config/package/myintegration/foobar.yaml

I’m assuming it’s referenced somewhere as a yaml file?

And you need to make sure to whitelist the directory location.

in mine it’s like:

homeassistant:
  allowlist_external_dirs:
    - '/config/lovelace_views'
1 Like