Canonical way to show a "More info" dialog from a custom card?

Share your Projects! Custom Integrations
1

First question post in this forum, thank y’all for all the awesome info and work on HA!

I’m following the docs to write a custom card, and wondering if there is an API to open a “More info” dialog?

I’m aware that there is state / entity info available to custom cards, but I didn’t see anything in the hass.callService or hass.callWS APIs that seem to do what I want: I’m trying to create a custom floorplan UI and hoping to find a way to show the “More info” dialog for specific entities from event-handling code in my custom card.

I found showMoreInfoDialog while poking around in the source for the frontend repo, but it’s not clear to me if it’s possible to access the same method from custom card code.

2

For posterity, in case it helps anyone in the future: the way that native views get the “More info” dialog to present is by firing a custom DOM event from the custom component.

This sample code would show the dialog for the entity ID light.some_light:

// `bubbles` because HA listens at the root for this event, `composed`
// because we need this event to pierce the Shadow DOM to bubble
const event = new Event("hass-more-info", {
  bubbles: true,
  composed: true,
});

event.detail = {
  entityId: 'light.some_light',
  // See https://github.com/home-assistant/frontend/blob/099ea61a944966f416e4fd4a711c3ebb11141c21/src/dialogs/more-info/ha-more-info-dialog.ts#L62
  view: 'info',
};

this.base.dispatchEvent(event);
1 Like