Seriously, I cannot get custom-cards working at all; example issue using Feedparser

Configuration Frontend
1

I have spent a gazillion amount of time on trying to get custom-cards working. Primarily I’m trying with ”Feedparser” (RSS/Atom) that uses a custom ”list-card.js” and I’m also trying to get ”Weather card with chart” working that uses ”weather-card-chart.js”.

I’m running on Docker-CE on Mac OSx, not sure if that adds any issues.

This is what I have done and what seems to be working, but not giving a result (something visible in the UI), I’ll focus on only the Feedparser out of my two mentioned:

The resource file ”list-card.js”:

Placed in ”www”-folder
i.e. <config-folder>/www/list-card.js
I can access it using http://localhost:8123/local/list-card.js

In ”configuration.yaml”:

#######################################################
# Lovelace configuration
#######################################################
frontend:
  themes: !include themes.yaml
lovelace:
  mode: yaml

# Feedparser
  - platform: feedparser
    name: Engineering Feed
    feed_url: 'https://www.sciencedaily.com/rss/matter_energy/engineering.xml'
    date_format: '%a, %b %d %I:%M %p'
    inclusions:
      - title
      - link
      - description
      - image
      - language
      - pubDate
    exclusions:
      - language

In ”ui-lovelace.yaml”:

#######################################################
# General UI configuration
#######################################################
title: Heaven in earth

resources:
- url: /local/list-card.js?v=0
  type: js

views:
  - title: Översikt (Overview)
    cards:

#######################################################
# Tab for Feedparser
#######################################################

  - type: custom:list-card
    entity: sensor.engineering_feed
    title: Engineering Feed
    feed_attribute: entries
    columns:
      - title: ''
        type: image
        add_link: link
        field: image
      - title: Title
        field: title
        style:
          - white-space: nowrap
      - title: Description
        field: description

If I look under ”Configuration / Entities” in HA, I can clearly see my sensor called ”sensor.engineering_feed”, and when clicking on it I can see the results from fetching the XML-file. All looks good so far.

I have restarted HA through Docker-CE, reloaded the resources manually in the UI using ”the three dots” and also emptied my browser cache (Firefox and Chrome).

When I visit my tab for Feedparser, I get a clear page - nothing at all, not even a pixel nor a box nor anything…

If I, using Firefox, Inspect what it’s doing, it clearly loads the resource-file ”list-card.js”-file.

It just don’t give me anything visible on the screen, where I would expect a list of items.

And also, this is not the only custom-card not working - nothing is working.

Please if anyone could assist, giving me any hint of what I’m doing wrong or where I should continue looking to resolve my issue.

Thanks

2

I believe you can still define resources in ui-lovelace.yaml but they should be moved to configuration.yaml since the 107 release. That’s not your problem (yet) though.

Not sure why you have a title that doesn’t belong to anything at the top of ui-lovelace.yaml, I’d get rid of that.

In resources type: js is no longer valid, not sure that’s a problem (yet) either but try type: module

The card configuration should be indented further, it’s part of the view and shouldn’t be at the same level. That is a problem.

I’ve never used that card, so I can’t comment on whether it’s configured correctly or not.

A few things have changed in the last couple of releases, so make sure you use up to date documentation. Custom card authors are not always able to keep their docs up to date.


3

Thanks for your reply.

It seems to be very unclear where the definition resources type: js should be located. When I moved it to configuration.yaml, HA gives an error.

THe indentation seems fine, everything else works perfect, it’s just my custom-thingys that does not work.

One reason could be the thing you mentioned, that the " resources type: js.

The title thing is because the main title is for the header in the tabs, so the first title is for that and the other titles is for each tab.

So I’m still struggling, but since the other custom thing I have is resources type: module, which also does not work, I’m anyway on your track that something else than the type-issue for *js - so I will re-engineer my configs and double check the indentation.

4

In the second link it explains where they should go. However, if you’re not in ‘yaml’ mode then you need to add them in Configuration -> Lovelace Dashboards -> Resources tab.

If you can’t see that you need to enable Advanced Mode in your user profile.

5

and they do need to be module rather than js