Auto-entities with todo-list, can you set the title without hardcoding

Configuration Frontend
1

I am trying to build a dashboard for my ToDo Lists. I am using Local ToDo as it is the only one that allows full control locally and exposes the data for some sumariztion.

TaskPanel
TaskPanel1720×838 81.9 KB

The problem I am hitting is when using auto-entities to grab all of the todo.X lists and populate to a todo-list card, I can not find a way to set the title. I have tried using a sensor, decluttering card, and even bolting on markdown card as a separate header. Just can figure it out.

Below is the working code to auto generate how ever many todo list exist. Works perfectly. I commented out the part that isn’t. No matter what I try to put in for code it either gives me the

  • Literal code I type in as a title.
  • A competely blank card.
  • A todo list card with no title.
type: custom:auto-entities
view_layout:
  grid-area: tasks
card:
  type: grid
  columns: 4
  square: false
card_param: cards
filter:
  include:
    - domain: todo
      options:
        type: todo-list
#        title: |
#          [[[ 
#           const name = entity.entity_id.split('.')[1]
#              .replace('_local', '')
#              .replace(/_/g, ' ');
#            return name.charAt(0).toUpperCase() + name.slice(1);
#          ]]]
  exclude: []

I have tried everything I can think of, by entity_id

            title: >
              {% set name = entity.entity_id.split('.')[1] | replace('_local', '') | replace('_', ' ') %}
              {{ name | capitalize }}  # Generate the title dynamically from entity_id

By sensor value

sensor:
  - platform: template
    sensors:
      todo_entity_list:
        friendly_name: "Todo Entity List"
        value_template: >
          {% set task_list = states('sensor.todo_entity_list').split(',') %}
          {% set task_list_clean = task_list | map('trim') %}
          {{ task_list_clean | join(', ') }}

I’ve tried lots of other but there is no sense posting more non-working code.

Does anyone know how to pass a variable/name/state to the title of todo_list inside and auto-entities card?

I imagine this happens with other cards as well but I haven’t seen it yet.

It’s impossible to tell which card is which until I make the first task in each a title and never delete it, which is just to much a hack for me.

Thanks.

2

Have a look at the large post on auto-entities

type: custom:auto-entities
view_layout:
  grid-area: tasks
card:
  type: grid
  columns: 4
  square: false
card_param: cards
filter:
  template: >-
    [{%- for x in states.todo %}
      {{ { 
        'entity': x.entity_id,
        'type': 'todo-list',
        'title': x.entity_id.split('.')[1] | replace('_local', '') | replace('_', ' ') 
      } }},
      {%- endfor %}
    ]
3

Thank you, vingerha

The put this in and it works. It makes perfect sense to make the todo-list part of the template.

I will post this in the card-mod forum as well but thought since you’ve played todo-list have you ever tried to override colors in the todo-list. It appears to be pretty deep Shadow DOM, but I’ve tried everything I can think of…

Here’s the code you assited with adding card-mod. Inspection shows me it should be the ::part(header) but that nor my other attempts made any change at all.

type: custom:auto-entities
view_layout:
  grid-area: tasks
card:
  type: grid
  columns: 4
  square: false
card_param: cards
filter:
  template: |-
    [{%- for x in states.todo %}
      {{ { 
        'entity': x.entity_id,
        'type': 'todo-list',
        'title': (x.entity_id.split('.')[1] | replace('_local', '') | replace('_', ' ') | capitalize)
      } }},
      {%- endfor %}
    ]
card-mod:
  style: |
    custom:todo-list::part(header) {
      color: blue !important;  # Change title color to blue
      font-weight: bold !important;  # Bold the title
    }

None of these worked either. I know this stuff is always a pain, but worth asking.

card-mod:
  style: |
    custom:todo-list::part(header) {
      color: blue !important;   # Change title color to blue inside shadow DOM
    }

card-mod:
  style: |
    custom:todo-list {
      --ha-card-header-color: blue !important;   # Override the header title color
      --primary-text-color: blue !important;     # Ensure text color is also blue
    }

card-mod:
  style: |
    custom:todo-list::part(header) {
      color: blue !important;   # Change title color to blue inside shadow DOM
    }


card-mod:
  style: |
    custom:todo-list::part(header) h1 {
      color: blue !important;  # Change the title color to blue
      font-weight: bold !important;  # Optional: Make the title bold for visibility
    }


card-mod:
  style: |
    custom:todo-list::part(header) h2 {
      color: blue !important;  # Change title color to blue
      font-weight: bold !important;  # Bold the title
    }```

Thank you for your help.
4

As mentioned/suggested earlier, do post in the main one… you can embed the card-mod section too

1 Like
5

I’m a bit new to actually posting in HA. Would you mind offering advice on which main forum to post in for this one since they are all tied in together?

Auto-entities (not likely)
todo-list
card-mod

6

This is indeed an auto-entities thing, lots of people have a tag there so you likely get more attention.

1 Like