Cannot get any community card running in lovelace

Configuration Frontend
1

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?

2

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

3

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??

4

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

5

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.

6

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

7

Ok…
I see your point.

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

8

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

1 Like
9

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.

10

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.

11

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

lovelace_resources
lovelace_resources1300×539 27.8 KB