How can I manage the dashboards using YAML files?

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?

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

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:

this is what I see under Settings > Dashboards:

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?

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

1 Like

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


However, I see all of them under <home-assistant>/www

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

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]

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

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

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

yes, my bad - it should be a module.

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

1 Like

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: