Re-using existing frontend components in Lovelace card editor

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

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

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

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.

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

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

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>