0

I am trying to create a custom Lovelace card with a visual editor, but the visual editor is not showing up as expected. The card is named "HANFC Card" and is designed to control DLNA devices with NFC tags. I've added the necessary code to define the card and the visual editor, but still, the visual editor is not displayed.

Here's the code for my hanfc-card.js file:

class HanfcCard extends HTMLElement {


// ...
}

customElements.define('hanfc-card', HanfcCard);

class HanfcCardEditor extends HTMLElement {
  // ...
}

customElements.define('hanfc-card-editor', HanfcCardEditor);

const fireEvent = (node, type, detail, options) => {
  // ...
};

window.customCards = window.customCards || [];
window.customCards.push({
  type: 'hanfc-card',
  name: 'HANFC Card',
  preview: false,
  description: 'A custom card to control DLNA devices with NFC tags',
  editor: 'hanfc-card-editor',
});

The front side of the card shows as expected but the edit only works in yaml mode. The visual editor is not showing up, and I receive the following message: "No visual editor available for type "custom:hanfc-card"." I have also cleared my browser cache and reloaded the Home Assistant UI multiple times, but the issue persists.

Could anyone help me understand what I might be missing or what could be causing this issue? Thanks in advance for your assistance!

A sample snippet to expain what I need for a visual editor would be nice or a pointer to the documentation. I found nothing so far but maybe I missed something.

pauel
  • 908
  • 10
  • 26

1 Answers1

0

The solution is described here: enter link description here

It seems one needs to define:

static getConfigElement() {
    return document.createElement("hanfc-card-editor");
  }
pauel
  • 908
  • 10
  • 26