Showing MQTT devices in a Lovelace dashboard

Configuration Frontend
1

To interact with my many Zigbee devices in a way like I do with other devices I can use the MQTT integration. However, it’s inconvenient to open that pane through Settings → Devices and Services → MQTT. Instead I want to have a sidebar icon from which I directly can reach the MQTT page. It seems, however, that’s not possible, so I went for a custom dashboard, but I cannot find any card that would allow me to display all MQTT devices. What options do I have? Are there custom cards (HACS) that would allow me to accomplish that task?

Note: I’m not asking for entities, but devices (e.g. a switch or a plug).

2

You can use the custom card called auto entities.

So go to the mqtt integration and select all the entities and apply a label called mqtt (or whatever you want)
Then create the auto entities card to only show entities with that label.
I’ve done it with my Automations and it auto updates when you apply that label to things then.

3

Thanks for the suggestion. But with the auto-entities-card I have a list of entities, not devices. I thought my additional note clarifies that this is not what I want.

4

It is possible. Use custom_panel as documented here:
https://www.home-assistant.io/integrations/panel_custom/

And here is an example with MQTT Devices ready to copy and paste:
https://digiblur.com/2020/12/04/how-to-add-custom-panels-in-home-assistant/

1 Like
5

Just label the devices instead then.

6

That code helped me to get what I want (thanks for the quick help!), however I had to change a few things. I took over not only the MQTT device page but also the integrations page:

panel_custom:
  - name: ha_mqtt_dev
    sidebar_title: MQTT Devices
    sidebar_icon: mdi:chip
    js_url: /api/hassio/app/entrypoint.js
    url_path: "config/integrations/integration/mqtt"
    embed_iframe: true
    require_admin: true
    config:
      ingress: core_configurator

  - name: ha_integ
    sidebar_title: Integrations
    sidebar_icon: mdi:checkerboard
    js_url: /api/hassio/app/entrypoint.js
    url_path: "config/integrations/dashboard"
    embed_iframe: true
    require_admin: true
    config:
      ingress: core_configurator

The url_path is significantly different, but easy to understand. The only tiny issue I still have with these custom panels is: their sidebar entry doesn’t get selected when clicking them. Instead the selection moves to the Settings sidebar entry. Not a big deal, but would be cool if that could be solved as well. Any idea?

Also could someone please give an explanation of the js_url field in this context? I have no idea where this points to (since I have no custom JS for these panels). Is this even the correct path?

7

That is normal, Home Assistant tries to match the URLs with the items in the sidebar and as the settings items has config/ as href, then it matches with config/anything, so all those paths that start with config will select the settings items. In custom-sidebar I needed to override that behaviour and there is a custom code to match the exact item even if there are many matches in the sidebar. If that issue bothers you, you can try the plugin.

Just open http://your_ip_or_domain:8123/api/hassio/app/entrypoint.js and you will see :slight_smile: