How can I manage the dashboards using YAML files?

Configuration Frontend
1

I have been reading the documentation in order to manage my dashboard through YAML files directly and skip the need to go to the raw editor and copy over the entire YAML but for some reason, I am unable to get it working. This is how my configuration.yaml file looks like:

default_config:
frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/card-mod.js

lovelace:
  mode: yaml
  resources:
    - url: /local/bootstrap-grid-card.js
      type: module
    - url: /local/stack-in-card.js
      type: module
    - url: /local/battery-entity-row.js?v=1.3.1
      type: module
    - url: /hacsfiles/weather-card/weather-card.js
      type: module
    - url: /hacsfiles/battery-state-card/battery-state-card.js
      type: module
    - url: /hacsfiles/simple-thermostat/simple-thermostat.js
      type: module
    - url: /local/vertical-stack-in-card.js?v=0.4.4
      type: js
    - url: /local/community/home-assistant-sun-card.js
      type: js
    - url: /local/mini-graph-card-bundle.js?v=0.11.0
      type: module
    - url: /local/mushroom.js
      type: module

then I created a file named ui-lovelace.yaml which contains basically the entire YAML for my dashboard configuration (below is just a snippet so you get an idea):

title: Home
views:
  - theme: Backend-selected
    title: Home
    path: default_view
    type: panel
    icon: mdi:home
    badges: []
    ...

but even after restarting HA several times and continue applying changes to the ui-lovelace.yaml file I need to click on the three dots, go to edit dashboard > raw edit configuration, and paste the YAML once again to be able to see the changes, why? what I am doing wrong?

2

you’re missing the part in your configuration.yaml where you specify where your dashboards are.

In your case it will look something like this

lovelace:
  mode: yaml
  dashboards:
    home-dashboard:
      mode: yaml
      title: <title>
      icon: mdi:<icon>
      show_in_sidebar: true
      filename: ui-lovelace.yaml
  resources:
    [...]

Note, you can have multiple dashboards split over multiple yaml files.

2 Likes
3

hmm I did what you suggested and now I have two home icons but the result remains the same I need to add the YAML through the UI to be able to see the changes:

image
image1840×942 109 KB

this is what I see under Settings > Dashboards:

image
image1840×680 44 KB

4

well, the new dashboard is the one with the black home icon which is a copycat of the one I had before managed through the UI … how do I remove the one managed through the UI and make the YAML on my default dashboard?

5

To set default, click on your user icon (bottom left corner) and select which dash board to be default.

1 Like
6

One more thing … resources are not being loaded properly since I keep getting this:

image
image740×318 12.4 KB

However, I see all of them under <home-assistant>/www
image
image588×650 41.8 KB

what else I am missing? How do I find the correct path to add under the resources section? So far I have been following what the docs say like for example this

7

Is it because you have it as a module and not js?

lovelace:
  mode: yaml
  resources:
    - url: /local/bootstrap-grid-card.js
      type: module

[/quote]

8

…also might be because you are using /local/ not /hacsfiles/ - sorry, I don’t use bootstrap-grid-card

9

I am following the docs from the card author and there it says it should be loaded as a module however I am getting the same error with all the cards I have through HACS

10

tried this too and reloaded the dashboard, it did not work

11

yes, my bad - it should be a module.

12

dumb question. Have you cleared the cache in your browser (reload page from source/origin)?

1 Like
13

Something has changed with HA and Lovelace and the cards developer did not notice this yet … so this is what the docs said for this card:

lovelace:
  ...
  resources:
    ...
    - url: /local/bootstrap-grid-card.js
      type: module

this is what I have tried:

    - url: /local/bootstrap-grid-card.js
      type: module

    - url: /hacsfiles/bootstrap-grid-card.js
      type: module

and finally, this one was the one doing the trick:

    - url: /hacsfiles/bootstrap-grid-card/bootstrap-grid-card.js
      type: module

I will open a PR to this card repo to fix this docs part however I am not sure the reason for this change :thinking: