Re-using existing frontend components in Lovelace card editor

Development
1

I’m trying to build a card editor for my Lovelace card and want to re-use the ha-entity-picker component, but it doesn’t seem to work. Nothing is rendered, but I can see the element if I manually inspect the DOM (so it’s not a cache issue).

I would expect that something like this would work:

  render() {
    if (!this.hass) {
      return html``;
    }
    return html`
      <div class="card-config">
        <div class="side-by-side">
          <ha-entity-picker
            .hass="${this.hass}"
            .value="${this._weather}"
            .configValue=${"weather"}
            domain-filter="weather"
            @change="${this._valueChanged}"
            allow-custom-entity
          ></ha-entity-picker>
        </div>
      </div>
    `;
  }

Do I need to import the component somehow?

2 Likes
2

Does anyone know if there is a way to do this yet? It seems possible to use the paper components but not any of the ha- or hui- ones. Reuse would make it much easier and cleaner to create custom cards

3

Good question. I would love to know how to re-use ha components as well. instead of drawing them…

4

I have seen some developers using customElements.get('ha-entity-picker') to try to reuse these elements, however, at least on my instance, it returns undefined, so that does not seem to work.
But I would also absolutely love this, it would make developing lovelace cards so much easier.

5

Hi @virhonestum, can it be fixed in this PR? https://github.com/home-assistant/frontend/pull/5381

6

Yes, partially. It does seem to expose the multiple entities select config component. However the other components are most likely still unavailable.

7

Hi @virhonestum, I think that I will use just this for picking the entities. Apparently, it works quite well.
I’m not sure how it will behave in different browsers though.

     <paper-input-container >
      <ha-icon icon="mdi:home" slot="prefix"></ha-icon>
        <input type="text" value="${this.topic}" slot="input" list="browsers" autocapitalize="none">
        <paper-icon-button slot="suffix" icon="mdi:plus" title="Add" @click=${this._addEntity}></paper-icon-button>
        <datalist id="browsers">
              ${Object.keys(this.hass.states).sort().map(entId => ct.LitHtml`
                   <option value=${entId}>${this.hass.states[entId].attributes.friendly_name || entId}</option>
                `)}
        </datalist>
    </paper-input-container>
8

I realize this is an old thread, but I’d like to raise the issue again. I am learning to develop lovelace custom cards. There are a varity of ha-* tags that would be useful in custom cards, but that are not available. I understand from the discussion why. That being said, it is desirable to have some additional basic functions, such as an entity picker and a device picker, that are standardized across all cards including custom cards. In any case, I would appreciate suggestions on the best way today to pick devices and entities from a custom card. I’ve struggled with this, getting various things to sort of work, but then the event handling is not reliable. The ha cards work fine and are well designed, just not accessable. Thank you.