I’m sharing my latest creation: Todo Swipe Card - a specialized card for todo lists with built-in styling and swipe functionality.
The Story Behind This Card
I wanted a way to organize multiple shopping lists on my dashboard, each representing a different store with its own background image with the colors and logo from the store. This was already partially possible with the native shopping-list card, but because I wanted to use multiple shopping-list cards and swipe them, I developed my own custom card that fits my needs.
Now I can swipe between my store-specific lists, each with customized styling that makes it instantly recognizable.
Features
Swipe between multiple todo lists
Built-in styling with customizable background images
Pagination dots for quick reference
Options to show/hide completed items
Delete completed items button with optional confirmation dialog
Full visual editor support
Important: This card requires card-mod to be installed!
The card includes an easy-to-use visual editor for easy configuration from the dashboard without the need to edit any yaml. Please see the Github repository for a screenshot.
My Use-Case
My personal setup has a todo list for each grocery store with their logo and brand colors as the background, as seen in the example .gif. When I drive near Albert Heijn, Jumbo, Ikea, or any other store, Home Assistant sends me the appropriate list via a notification. It’s been a huge help for remembering those little items we always forget!
If you’re interested I can send you the automation.
Installation & More Information
For installation instructions and complete documentation:
The card looks lovely! I’ll hopefully get about playing with it soon, as it seems very useful for me.
I had a question regarding this. Does it trigger only for specific stores (i.e. ones you gave a distinct zone in Home Assistant), or does it work in general? I’ve been looking into ways to get location bound reminders for myself, for exactly this, but usually they only support a single location. I’d love one that triggers whenever I’m close to any Action, for example. (Hopefully it is not too off topic)
But I think the following would be possible if you add multiple zones for specific stores. For example zone.albert_heijn_1, zone.albert_heijn_2, zone.albert_heijn_3, etc, you can have the folllowing automations which triggers when entering every zone, but filters for albert_heijn_* zones:
alias: shopping lists
description: ""
mode: single
triggers:
# Generic trigger: when person.[name_1] enters ANY zone
- platform: zone
entity_id: person.[name_1]
event: enter
# No specific zone here, so it triggers for ANY zone entry by person.[name_1]
conditions: []
actions:
- choose:
- conditions:
# Check if the entered zone's entity_id starts with 'zone.albert_heijn_'
- condition: template
value_template: "{{ trigger.zone.entity_id.startswith('zone.albert_heijn_') }}"
- condition: numeric_state
entity_id: todo.albert_heijn
above: "0"
sequence:
- response_variable: albert_heijn_items
data:
status:
- needs_action
target:
entity_id:
- todo.albert_heijn
action: todo.get_items
- metadata: {}
data:
title: Boodschappen Albert Heijn
message: >
{%- for item in albert_heijn_items['todo.albert_heijn']['items'] %}
{{ item.summary }}
{%- endfor %}
data:
image: /media/local/ah.png
action: notify.mobile_app
I think this would be the best solution if you want to have multiple zones of specific stores and not want to have a super large automation.
This version introduces a new entity-centric configuration format that’s much more intuitive and organized. While your existing v1.x configuration will probably partially work, you’ll see a migration warning in the visual editor encouraging you to upgrade. The easiest way to migrate is through the visual editor - simply click the “Auto-Migrate Configuration” button to instantly convert your configuration to the new format while preserving all your existing settings. Please refer to the README file if you want to manually convert your configuration.
New Features
Entity-Centric YAML Configuration: Each todo list can now be configured individually with its own settings, creating a much cleaner, more intuitive and future proof YAML structure where background images, sorting, and titles are grouped with their respective entities.
Individual Todo List Titles: Add custom titles that appear above each todo list with highly customizable styling through 13+ new CSS variables for complete visual control of the title text and wrapper.
Advanced Color Control: New CSS variables specifically for controlling description text and due date colors, including separate styling for overdue items. (closes #3)
Improvements
Redesigned Visual Editor: Features an accordion-style interface where you can click the arrow next to each todo list to expand and configure it individually, making setup much more organized and user-friendly.
Smart Visual Feedback: Due date icons now automatically scale with text size, entity restrictions prevent adding duplicate todo lists, and the visual editor provides better button state feedback.
Bug Fixes
Fixed Visual Editor Issues: Resolved entity picker loading problems after cache clearing and eliminated the double-click requirement for the ‘+ ADD TODO LIST’ button.
Fixed Color Inheritance: Due dates and descriptions now properly display colors matching the native todo list card behavior. (closes #3)
Is there a way to limit the number of items showing on the list. I have some todo’s that are long and they blow out the dashboards look bad. Would like to be able to show like “show 10” and have ill choose the sort order from the existing list. so it would only show the first 10 sorted by due date ect.
There’s currently no way to limit the number of items on the list. Basically the list is exctly the same list as the original list since it is using the same entity.
It is also possible to set the sort order to duedate_desc or duedate_asc.
Why don’t you just set a lower height of the card? As you using a specific dashboard type other than the Sections dashboard?
@nutteloost Currently using this to help declutter my dashboard, great job! One enhancement I think that is needed, allow for more spacing between the pagination and last item in list. It can be cumbersome as they are too close and a lot of times difficult to not click the last item while navigating to another list.
Important: This card requires card-mod to be installed!
