Adding resources to lovelace

Hello, I have updated my hassio to version 0.107.4. Until this version it was possible to add resources like

resources:

  • type: js
    url: /local/gardena-mower-card.js?v=0.3

to the configuration of the overview. Now, if add the code above, I get the message that resources should be put to lovelace configuration window instead.

I do not know the lovelace configuration window. Where can I find it? Any help is appreciated!

3 Likes

config/lovelace/resources

Screenshot_20200323_145808

its here on ha core.

6 Likes

Or you can edit configuration.yaml and add your resources there. Example:

#
# Enable lovelace User Interface
#
lovelace:
  mode: yaml

#
# Add-On for lovelace
#
  resources:
    - url: /local/auto-entities.js
      type: module
    - url: /hacsfiles/weather-card/weather-card.js
      type: module

6 Likes

I would like to configure my dashboards with the help of ui editor. If i switch to yaml, this is not possible anymore. So, I think I have to put resources using the url config/lovelace/resources. I am a little bit confused since I cannot see the tab resources but dashboards. If I enter the url in the browser I can switch to resources. Does anyone know why the resources tab is not shown in hassio 0.170.4?

Many thanks for your help!

On the underside of the page there are 2 icons. One to select dashboards, one to select resources.

1 Like

I do not see any underside for resources :frowning:

Right one on the underside.

You need to enable ā€œAdvenced modeā€ in your user profile to see the ā€œResourcesā€ tab.

12 Likes

I have the same problem on 0.108.9, but I canā€™t figure out how to enable ā€œAdvanced modeā€ for my user profile. I am the admin user, and I see the tabs like ā€œDeveloper Toolsā€, ā€œConfigurationā€ etc in the menu. I canā€™t find an ā€œadvanced modeā€ setting in Configuration -> Users or anywhere else.

I also have a custom card that I need to add resources for (converting from the ui-lovelace.yml), but the ā€œResourcesā€ tab is missing for me, too.

2 Likes

Ah, thatā€™s where that setting is. Wow, that was difficult to figure outā€¦ :wink: Thanks so much!

Is there any way to reload without restarting editing configuration.yaml?

2 Likes

anyone ever figure out the answer for this ?

Well thereā€™s a post marked as the solution. So Iā€™d say, yes.

1 Like

I am also trying to add a custom card to the resources.
Up until now I have only installed custom cards via HACS. The following weather card however is not available in HACS.

Following the instructions, the easiest way is to add

- url: https://cdn.jsdelivr.net/gh/bramkragten/weather-card/dist/weather-card.min.js
  type: module

to the resources. However I canā€™t seem to find the custom card following, even a restart had no change.

1 Like

Perhaps someone can helpā€¦

Is the right setup for resources in configuration.yaml?

Some work, but some dont and I cant work out why!

The ones that dont work give an error ā€˜custom element doesnt existā€™

resources:

  • url: /hacsfiles/sidebar-card/sidebar-card.js
    type: module
  • url: /hacsfiles/button-card/button-card.js
    type: module
  • url: /hacsfiles/swipe-card/swipe-card.js
    type: module
  • url: /local/card-tools.js
    type: module
  • url: /hacsfiles/stack-in-card/stack-in-card.js
    type: module
  • url: /hacsfiles/mini-media-player-bundle.js?v=1.13.0
    type: module

Iā€™ve only been fighting this for the last 18 hours trying everything I could from file path names to removing all but 1 mod.
I finally figured it out!
It was the indentation!

lovelace:
  mode: yaml

#
# Add-On for lovelace
#
  resources:
    - url: /local/auto-entities.js
      type: module
    - url: /hacsfiles/weather-card/weather-card.js
      type: module

Getting rid of those comments and I saw that the ā€œresourcesā€ aligned with the Lovelace settings.
It should look likeā€¦

lovelace:
  mode: yaml
  resources:
    - url: /local/auto-entities.js
      type: module
    - url: /hacsfiles/weather-card/weather-card.js
      type: module

Hello!

Understanding that this is an older thread, please allow me asking why there is still no Resources tab despite I have the advanced settings enabled. I do see the 3-dots menu in the right top corner. When I click on it, it reads Resources, so thatā€™s ok. Iā€™m just puzzled why other HA users see it as a second tab besides Dashboards or (on mobile view) as 2 separate icons at the bottom. BTW, on my mobile (Android) app, there is no icon at the bottom when I click on Settings => Dashboards, but again that 3-dots menu in the top right corner for the Resources. So has this been changed in HA (and I overlooked that change)?

Yeah, think it has changed. Iā€™m new to HA and also couldnā€™t find it at first. Assuming you have already enabled Advanced Mode (in your profile page). The resources can be found by going to Settings > Dashboards > [3-dots, top right] > Resources. Here you have a blue fab-button bottom right corner with ā€œAdd Resourceā€.

2 Likes

enable Advance mode on your profile ā€” restart HOME ASSISTANT ā€“ go to setting ā€” DASHBOARD ā€” click on the three points

1 Like