Cannot get any community card running in lovelace

Hi guys,

I’m desperate on this. I’m using Home Assistant 0.115.2 on a raspi and try to use some custom cards from the community within my lovelace dashboard, but they didn’t appear there.

What have I done so far?

An example for a card I want to use is the select list card (https://github.com/mattieha/select-list-card).

I’ve installed the card via hacs. It is located in the following folder:

➜  select-list-card pwd
/config/www/community/select-list-card
➜  select-list-card ls -l
total 68
-rw-r--r--    1 root     root         50919 Oct  3 11:50 select-list-card.js
-rw-r--r--    1 root     root         14520 Oct  3 11:50 select-list-card.js.gz
➜  select-list-card 

I’ve also added the following lines to the top of my lovelace dashboard by using the three dots and choosing raw configuration editor.

resources:
  - url: /local/community/select-list-card/select-list-card.js
    type: module

The documentation says, UI editor is supported, so I press the ±Symbol and search for the card, but it isn’t available.

I’ve restarted the system, but it doesn’t help. No log errors in the home assistant.log (btw: is there a separate lovelace log anywhere?). What I’m doing wrong?

Delete it.

That goes under lovelace in your configuration file now.

https://www.home-assistant.io/lovelace/dashboards-and-views/#adding-more-dashboards-with-yaml

Mmh… I’ve read about that. But the documentation says “Include external resources only add when mode is yaml, otherwise manage in the resources in the lovelace configuration panel.”.

For my understanding, like I did it now I’ve done the otherwise-way mentioned above. How to use custom cards with UI support??

Add the resource in the configuration / Lovelace dashboards / resources menu.

The documentation is incorrect.
As far as I know, if you try to add it in the yaml file you get an error message?

It’s a shame the documentations sometimes lag behind but I can honestly understand that such a small thing can go unnoticed

Edited to add: I see that it’s available in HACS do you have that installed?
That is probably the best way to install.

I’d say 'incomplete" rather than incorrect. What is there is right, it’s just not very comprehensive.

Ok…
I see your point.

But most will assume the installation procedure is to the latest or latest-ish installs.

Adding it in the UI in the resources section (just have overseen it until now :slight_smile:) perfectly helped!!

1 Like

Is there anywhere in the docs that explains how to use custom cards? Differences between yaml & GUI mode? Where the resources config goes in each mode?

Urged by this thread I’ve looked and I can’t find it anywhere in the docs.

I assumed it was there and thought I had seen it there at some point as well but now I’m wondering if it’s just “common knowledge” from the release threads and forum posts.

I haven’t seen / found such a documentation so far, it would have been helpful.

What I understood:
YAML:
Resources can be added in the configuration.yaml in the lovelace: section. Does only apply to YAML-maintained dashboards. For the UI the resources menu should be used.

In general custom cards get copied somewhere to the www-folder and then needs to be referenced as resources.

Mmh…I’m still struggeling with that… I’ve added multiple cards via hacs and added the urls via the setting->lovelace-resources menu.

For two cards (bar card and select-list-card) it works, all other cards are not availabel in the lovelace add card menu.

/config/www
➜  www tree
.
├── community
│   ├── bar-card
│   │   ├── bar-card.js
│   │   └── bar-card.js.gz
│   ├── hass-shutter-card
│   │   ├── hass-shutter-card.js
│   │   └── hass-shutter-card.js.gz
│   ├── lovelace-html-card
│   │   ├── html-card.js
│   │   └── html-card.js.gz
│   ├── lovelace-vertical-slider-cover-card
│   │   ├── vertical-slider-cover-card.js
│   │   └── vertical-slider-cover-card.js.gz
│   ├── select-list-card
│   │   ├── select-list-card.js
│   │   └── select-list-card.js.gz
│   ├── simple-thermostat
│   │   ├── simple-thermostat.js
│   │   └── simple-thermostat.js.gz
│   └── text-divider-row
│       ├── text-divider-row.js
│       └── text-divider-row.js.gz