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.

9

The components are undefined because they haven’t been loaded. For example, to access ha-entity-picker, you can trigger loading of hui-glance-card-editor which depends on it, by asking the existing Glance card for its config element:

customElements.get('hui-glance-card').getConfigElement();

This will load hui-glance-card-editor and ha-entity-picker, and you can then access them with customElements.get. Unfortunately, this is an async operation, so if you’re doing this as part of your own editor, you need to do something like this in render:

    if (!this._glanceCard) {
      this._glanceCard = customElements.get('hui-glance-card');
      this._glanceCard.getConfigElement().then(() => this.requestUpdate());
      return html`Loading...`;
    }

If you use this code or similar, please comment it appropriately for your future sanity.

And of course if hui-glance-card-editor ever changes to not depend on ha-entity-picker, this will stop working. But you probably need to rework your card at that point anyway.

10

There is the getConfigForm function which allows for custom cards to easily build a UI editor with selectors (like device selector/entity selector).

It was never well documented but there’s an example here:

11

I’m sorry, if this is a newbie question, but why not request ha-entity-picker directly?