How to create dismissable notifications/alerts on the dashboard

I thought I would post about the solution I have found for how to post notifications/alerts my HA dashboard.

The problem

I wanted to find an easy way that my automations could pop up some sort of notification on the dashboard. There are lots of guides about how to send notifications to phones etc, but very little about how to put things on a dashboard.

A lot of solutions require you to create an input boolean for each thing you want to be notified about, with a conditional card set to pop up when the boolean is triggered. I wanted something a little more dynamic, so that I could fire a notification to the dashboard as easily as sending one to my phone.

My use cases
The two things I wanted to do were:

  1. Automations can set a notification on the dashboard. The notification can be tapped to dismiss. I use these to do things like remind me that the washing machine is finished and needs emptying.
  2. Calendar events can trigger a notification. I use these for particular reminders for events in my calendar, like putting the bins out. Tapping the notification dismisses it.

I can’t really do YAML, so needed something super easy.

What doesn’t work (for me)

When I first hunted around for a solution, I happened across this article:
https://chrisirwin.ca/posts/homeassistant-notifications-sync-dashboard-mobile/#notifications-in-dashboard

This uses persistent notifications coupled with an auto entities card.
Unfortunately, as I found out from this thread, persistent notifications no longer appear as entities that can just be put in a card.:

In that thread, there are smart people proposing solutions involving a lot of YAML. This was entirely beyond my capabilities, so I kept looking.

I also found this thread:

Which might provide some answers, but is entirely beyond my understanding.

Here is the solution I came up with

To Do Lists as notifications

Home Assistant has built-in to do list support. You can add items to lists, and create separate lists for different things.

In order to display my notifications, I simply add an item to the right list and it pops right up on my dash.

I have set out a few details of what I have done, in case it helps anyone else.

Setting up the lists

I have set up two to-do lists on the ā€˜To do lists’ section of Home Assistant. One is called ā€œDashboard Alertsā€ and one is called ā€œCalendar Remindersā€

Displaying the lists

I use the built-in To Do card, set to hide completed items and hide the ā€˜Add item’ field. The item tap behaviour is set to toggle. I use a separate card for each to do list. The card is set to be hidden when the list is empty (set visibility based on numeric state above 0).

To make it look more like an alert, I have also used a bit of card-mod:

card_mod:
  style: |
    div.header {
      display: none;
    }
    div.mdc-checkbox {
      display: none;
    }
    ha-card {
      background: darkmagenta;
      --mdc-typography-subtitle1-font-size: 1.5em;
    }

The calendar card is set to blue, the automation reminders are purple.

I’m not sure it the code to get rid of the checkboxes works consistently – I’m not very good with code (any help would be welcome).

I can slightly cheat to get icons next to my todo items, by including Unicode emoji in the todo item text. It would be nicer to be able to use proper icons though. There is a handy list of emoji here: Emoji - Unicode Explorer

It would be nicer to have more customisation/flexibility in the built in todo card – or a decent alternative.

Here is an example of the cards:

Notifications from automations

To fire off a notification on the dashboard, I just use the ā€œtodo list add itemā€ action. A YAML code example (generated from the GUI) is:

  - action: todo.add_item
    metadata: {}
    data:
      item: 🩲 Washing Machine is Finished!
    target:
      entity_id: todo.dashboard_alerts

Notifications from calendars

In order to be able to set a calendar event to throw up a notification on my dashboard, I simply include the text ā€œflgā€ (short for flag) in the event description. I then have an automation that triggers on calendar events and adds a todo item if it encounters the magic text.

The code for this is:

alias: Calendar events trigger dashboard notification
description: ""
triggers:
  - trigger: calendar
    entity_id: calendar.main
    event: start
    offset: "0:0:0"
conditions:
  - condition: or
    conditions:
      - condition: template
        value_template: "{{ 'Flg' in trigger.calendar_event.description }}"
      - condition: template
        value_template: "{{ 'flg' in trigger.calendar_event.description }}"
actions:
  - action: todo.add_item
    metadata: {}
    data:
      item: "{{trigger.calendar_event.summary}}"
    target:
      entity_id: todo.calendar_reminders
mode: single

My wife loves this as she controls the family calendar. We have a calendar card on our family dashboard which shows the entire day but it is great to be able to have separate reminders that have to be dismissed (like ā€œPut kids packed lunch in school bagsā€ or ā€œPut the bins outā€).

Triggering events on dismiss

The main aim of this system is to keep everything simple. The todo-based notifications are fairly dumb and just disappear on a tap.

However, sometime you want to trigger something else when the notification is dismissed. For example, I have a smart bulb that changes colour when my washing machine is finished. When I get rid of my washing machine dashboard notification, I want the bulb to change its colour back.

Unfortunately, there is not a simple trigger that tells me that an item has been dismissed.

However, there is a general trigger for todo events, and that can be used to identify when an item is marked as complete. This is the code I found on a thread somewhere. In the example, it just triggers a persistent notification:

alias: Washing Machine notification cleared
triggers:
  - trigger: event
    event_type: call_service
    event_data:
      domain: todo
conditions:
  - condition: template
    value_template: >-
      {{ trigger.event.data.service_data.entity_id == ['todo.dashboard_alerts']
      }}
  - condition: template
    value_template: "{{ trigger.event.data.service == 'update_item' }}"
  - condition: template
    value_template: "{{ trigger.event.data.service_data.status == 'completed' }}"
  - condition: template
    value_template: "{{ 'Washing Machine' in trigger.event.data.service_data.rename }}"
actions:
  - action: notify.persistent_notification
    metadata: {}
    data:
      message: Washing machine notification cleared

I also have a daily automation that runs overnight and clears out any completed items in my lists. The code is:

      - action: todo.remove_completed_items
        metadata: {}
        data: {}
        target:
          entity_id:
            - todo.calendar_reminders
            - todo.dashboard_alerts

Possible improvements

It would be excellent to be able to use the ā€œDescriptionā€ attribute of a to do list item to pass metadata to the card – like having a custom icon or colour for each todo list item.

Someone has come up with a way of doing this, but it uses far more custom YAML than I can cope with. See here:

ā€œhttps://www.youtube.com/watch?v=UBG2rfUvzd0&t=27sā€

If the HA card could support icons for todo list items natively, that would be superb. It would also be great if there were options in the card to clear out the checkboxes and other bits of the card I don’t need.

I hope this is of some use to others trying to do something similar

2 Likes

That was very useful and thank you for sharing. I do something similar where I use the todo list as kind of an additional log; I have my automations add todo list entries to a todo list named "Console’ and then in individual automations, I add a todo list entry with the name and what the automation is doing. Mostly I just have this because I think it’s neat to see my automations fire throughout the day. I also use a call to get rid of any ā€œlogā€ entries that are marked complete at the end of day though I need to write something that iterates through any entries left on this and marks them complete to clear it out for each day.

It’s good to see that other people also ā€œmisuseā€ the todo list functionality!