Home Assistant Notifications in Dashboard

A better, more complete (with dashboard + mobile automation sync) is available in a new article: Home Assistant Notifications (with Sync in Dashboard and Mobile)

The original article is preserved below. I encourage you to use the new one, though.

I recently wanted to add Notifications to Home Assistant. Like anything in HA, there are multple methods to accomplish any task. Here’s how I used persistent notifications to accomplish this.

Home Assistant has multiple methods of notifications, each with their own Pros and Cons:

  • Device Notifications - Works great for a phone, but on a wall-mounted tablet, you don’t see or check those notifications. They’re also not visible in HA dashboards.

  • Discord/etc - Mostly the same as above, except you get them on more than your phone.

  • Persistent Notifications - This is a notification channel built-in to HA. Unfortunately, it’s not the most visible in either HA Dashboards (buried in the sidebar) or on your phone (no system notification).

If you use HACS in HA, you open the world to hundreds or thousands of additional cards for HA Dashboards. Unfortunately, there is only one to display persistent notifications: Home Feed Card. This doesn’t fit the eye-catching aesthetic I desire for a wall-mounted tablet.

However, I did end up coming up with some basic widgets that require no addons (and some, below, with some minor, helpful addons):

Manual Entities

If you have a pre-determined list of notification IDs, you can add them to an Entity List. This causes ugly errors if a notification doesn’t exist at the current time, however:

Screenshot of Manual Entities

- type: entities
  title: Manual Entities
  entities:
    - persistent_notification.abc
    - persistent_notification.xyz
    - persistent_notification.zzz

If we instead switch to the built-in entity-filter card, you can have those errors obfuscated. Additionally, we’ll set ‘secondary_info’ and use the attribute, so we can get more information about the notification:

Screenshot of Filtered Entities

- type: entity-filter
  entities:
    - entity: persistent_notification.abc
      secondary_info: last-changed
      type: attribute
      attribute: message
    - entity: persistent_notification.xyz
      secondary_info: last-changed
      type: attribute
      attribute: message
    - entity: persistent_notification.zzz
      secondary_info: last-changed
      type: last-changed
      attribute: message
  state_filter:
    - operator: regex
      value: .
  card:
    type: entities
    title: Manual Filter Entities w/ Secondary

That already looks a ton better. However, there are two issues still present:

  1. You need to have a pre-determined list of notification IDs that will be displayed. Which means you need to update this card if you add new notifications.

  2. It might not fit in with your card layout.

Auto-Entities

That’s where Auto-Entities comes in to play. It lets you do a few nice things. First, it lets us filter on entity_id as well as use wildcards, so we can match persistent_notification.*.

The first thing you should note here is the presence of my Washing Machine notification. It wasn’t listed in the previous examples, because I hadn’t hard-coded it. No need, here:

Screenshot of Auto-Entities

- type: custom:auto-entities
  card:
    type: entities
    title: Notifications using Attribute & Date
  filter:
    include:
      - entity_id: persistent_notification.*
        options:
          type: attribute
          attribute: message
          secondary_info: last-changed

The real magic is that you’re no longer bound to an entities card. You can use any container card (grid, vertical-stack, etc) as a container, and any card as content. Which lets us use more generic entity cards in a vertical stack. (Also note, they’re sorted by last_triggered):

Screenshot of Auto-Entities in a stack

- type: custom:auto-entities
  card:
    type: vertical-stack
    title: Notifications in Vertical Stack of Cards
  card_param: cards
  filter:
    include:
      - entity_id: persistent_notification.*
        options:
          type: entity
          attribute: message
  sort:
    method: last_triggered

Putting into use in a dashboard

There’s one last trick I wanted to use them in a dashboard: show_empty: false, so the card is only visible when there are notifications.

I’m additionally using two other addons from HACS:

  • layout-card to gridify my dashboard (the view_layout belongs to that).
  • Canary, allowing some basic css styles (canary_style)

This gives me very visible notifications when present:

Screenshot of Dashboard with Notifications

But which disappear entirely when not set:

Screenshot of Dashboard without Notifications

- type: custom:auto-entities
  card:
    type: horizontal-stack
    view_layout:
      grid-area: h1
  card_param: cards
  show_empty: false
  filter:
    include:
      - entity_id: persistent_notification.*
        options:
          type: entity
          attribute: message
          canary_style:
            border-color: lightcoral
            background-image: >-
              linear-gradient(rgba(255,0,0,0), rgba(240,128,128,0.3),
              rgba(240,128,128,0.8));              
  sort:
    method: last_triggered

As for dismissing notifications, that wasn’t a goal. These notifications are cleared by automations when their status is corrected (i.e., opening the door for the Laundy, Locking the Front Door, etc).

Still to come: I’m forwarding these notifications to my Android Phone as well, but still doing this with a pre-defined list of IDs. I’m still working on a generic forward Automation, and will post a follow-up with more when I’ve solved that.