🔹 Auto-entities - Automatically fill cards with entities

[Ildar_Gabdullin]

@Shestak

shorten the automation names

Use this as a starting point.

How to mass rename friendly name in Frontend (auto-entity card)?

try this (untested): filter: template: >- {% for state in states.sensor -%} {%- if state.entity_id | regex_match("sensor.battery_", ignorecase=False) -%} {{ { 'entity': state.entity_id, 'name': state.attributes.friendly_name.split(' battery')[0] } }}, {%- endif -%} {%- endfor %}

[Shestak (Michael)]

Thanks. Code for my example:

type: custom:auto-entities
card:
  type: entities
  show_header_toggle: false
filter:
  template: |-
    {% for state in states.automation -%}
      {%- if state.name and state.name | regex_search('[Кк]ор') -%}
        {%- set matches = state.name | regex_findall('\\((.*?)\\)') -%}
        {%- if matches|length > 0 -%}
          {{
            {
              'entity': state.entity_id,
              'name': matches[0] | capitalize,
              'secondary_info': 'last-changed'
            }
          }},
        {%- endif -%}
      {%- endif -%}
    {%- endfor %}
sort:
  method: name

[Mariusthvdb (Marius)]

@Shestak

Is it possible to shorten the automation names so that instead of “Hallway Lighting (description 1)”, it’s “description 1”? That is, display the text in brackets. All automation names will be named “Room (description)”.

this is exactly what you might be looking for

Auto-entities - Automatically fill cards with entities

You can use the undocumented experimental option eval_js to process filter options as JavaScript. See this comment for an example. Search the repo code for eval_js to see what is available as variables.

eval_js is an advanced and undocumented option in auto-entities

direct link Filter template in version 1.16.1 breaks history-graph in 2025.6 · Issue #555 · thomasloven/lovelace-auto-entities · GitHub

I use:

        - type: custom:auto-entities
          card:
            title: Eval_js test
            type: history-graph
            hours_to_show: 24
          filter:
            include:
              - options:
                  eval_js: true
                  name: "${ state.attributes.friendly_name.replace(/:? actueel$/, '').trim() }"
                entity_id: "*_actueel"
                integration: zwave_js

no need for complex for loops with that

[Shestak (Michael)]

Thanks. My code:

type: custom:auto-entities
card:
  type: entities
  show_header_toggle: false
filter:
  include:
    - entity_id: "automation.hallway_*"
      options:
        eval_js: true
        name: "${ ((state.attributes.friendly_name||'').split('(')[1]?.split(')')[0] || state.attributes.friendly_name).trim().replace(/^./, c => c.toUpperCase()) }"
        secondary_info: last-changed
  exclude:
    - entity_id: "automation.hallway_manual_mode"
sort:
  method: name

[Mariusthvdb (Marius)]

great you got that working.
always best to stay within the component as much as possible.

[andrea.magnani01 (Andrea)]

Hi guys.

If anyone wants to see the same result achieved above by many other users, below I’m sharing my examples.

The card is visually almost identical to others already created (I mostly copied the beautiful gradient from you guys above), but it differs in the use of custom-button-card.

The difference is that:

• instead of using auto-entities with entities inside it — a solution that necessarily requires card-mod
• I used auto-entities with custom-button-card inside — a solution that does not require card-mod and opens up the extensive configuration possibilities offered by custom-button-card

(the maximum value of the bars is 6000 because that’s the capacity of my electrical meter.)

Example 1 (auto-entities + entities + custom-button-card)

Code:

type: custom:auto-entities
card:
  type: entities
  title: Picchi di potenza nelle ultime 24 h
  card_mod:
    style:
      hui-sensor-entity-row: null
      .: |
        .card-header {
          font-size: 16px;
          padding-bottom: 12px;
        }
sort:
  method: state
  numeric: true
  reverse: true
filter:
  template: |-
    [
      {% for e in states %}
        {% if "sensor.teatrino_1_blu" in e.entity_id and "picco" in e.entity_id %}
          {# nome e icona #}
          {% set dizionario = 
            {'nome':'boiler','icona':'mdi:water-boiler'} if 'boiler' in e.entity_id else
            {'nome':'fan coil','icona':'mdi:fan'} if 'fan_coil' in e.entity_id else
            {'nome':'forno','icona':'mdi:stove'} if 'forno' in e.entity_id else
            {'nome':'induzione','icona':'mdi:food'} if 'induzione' in e.entity_id else
            {'nome':'lavatrice','icona':'mdi:washing-machine'} if 'lavatrice' in e.entity_id else
            {'nome':'luci','icona':'mdi:lightbulb-group'} if 'luci' in e.entity_id else
            {'nome':'scaldasalviette','icona':'mdi:heating-coil'} if 'scaldasalviette' in e.entity_id else
            {'nome':'altre fonti','icona':'mdi:dots-hexagon'} if 'altre_fonti' in e.entity_id else
            {'nome':'totale','icona':'mdi:home'}
          %}
          {# valore #} 
          {% set valore = states(e.entity_id) %}
          {% set valore = valore | int if is_number(valore) else 0 %}
          {# sfondo #} 
          {% set val = states(e.entity_id) %}
          {% set val = val | float if is_number(val) else 0 %}
          {% set perc = (val/6000*100) | round(1) %}
          {% set perc = 0 if perc < 0 else perc %}
          {% set perc = 100 if perc > 100 else perc %}
          {% set rest = 100 - perc %}
          {% if perc <= 10 %}{% set bar = '51, 255, 0' %}
          {% elif perc <= 20 %}{% set bar = '102, 255, 0' %}
          {% elif perc <= 30 %}{% set bar = '153, 255, 0' %}
          {% elif perc <= 40 %}{% set bar = '204, 255, 0' %}
          {% elif perc <= 50 %}{% set bar = '255, 255, 0' %}
          {% elif perc <= 60 %}{% set bar = '255, 204, 0' %}
          {% elif perc <= 70 %}{% set bar = '255, 153, 0' %}
          {% elif perc <= 80 %}{% set bar = '255, 85, 0' %}
          {% elif perc <= 90 %}{% set bar = '255, 51, 0' %}
          {% else %} {% set bar = '255,0,0' %}
          {% endif %}
          {
            "type": "custom:button-card",
            "entity": "{{ e.entity_id }}",
            "icon": "{{ dizionario.icona }}",
            "name": "{{ dizionario.nome }}",
            "label": "{{ valore }} w",
            "show_label": "true",
            "tap_action": "none",
            "hold_action": "none",
            "double_tap_action": "none",
            "styles": {
              "card": [
                {
                  "border": "none",
                  "border-radius": "10px",
                  "padding-top": "3px",
                  "padding-bottom": "3px",
                  "padding-left": "10px",
                  "padding-right": "10px",
                  "font-size": "14px",
                  "background": "linear-gradient(to right, rgba({{bar}},0.8) 0%, rgba({{bar}},0.6) {{perc}}%,rgba({{bar}},0.2){{perc}}%, rgba({{bar}},0.05) 100%)"
                }
              ],
              "grid": [
                {
                  "grid-template-areas": "'i n . l'",
                  "grid-template-columns": "min-content min-content 1fr min-content",
                  "grid-template-rows": "min-content",
                  "column-gap": "10px"
                }
              ],
              "icon": [
                {
                  "width": "20px",
                  "height": "20px",
                  "color": "var(--primary-text-color)",
                  "transform": "translate(0px,0px)"
                }
              ],
            }
          }
          {% if not loop.last %},{% endif %}
        {% endif %}
      {% endfor %}
    ]

Example 2 (auto-entitities + vertical stack custom-button-card)

Code:

type: custom:auto-entities
card:
  type: vertical-stack
card_param: cards
sort:
  method: state
  numeric: true
  reverse: true
filter:
  template: |-
    [
      {% for e in states %}
        {% if "sensor.teatrino_1_blu" in e.entity_id and "picco" in e.entity_id %}
          {# nome e icona #}
          {% set dizionario = 
            {'nome':'boiler','icona':'mdi:water-boiler'} if 'boiler' in e.entity_id else
            {'nome':'fan coil','icona':'mdi:fan'} if 'fan_coil' in e.entity_id else
            {'nome':'forno','icona':'mdi:stove'} if 'forno' in e.entity_id else
            {'nome':'induzione','icona':'mdi:food'} if 'induzione' in e.entity_id else
            {'nome':'lavatrice','icona':'mdi:washing-machine'} if 'lavatrice' in e.entity_id else
            {'nome':'luci','icona':'mdi:lightbulb-group'} if 'luci' in e.entity_id else
            {'nome':'scaldasalviette','icona':'mdi:heating-coil'} if 'scaldasalviette' in e.entity_id else
            {'nome':'altre fonti','icona':'mdi:dots-hexagon'} if 'altre_fonti' in e.entity_id else
            {'nome':'totale','icona':'mdi:home'}
          %}
          {# valore #} 
          {% set valore = states(e.entity_id) %}
          {% set valore = valore | int if is_number(valore) else 0 %}
          {# sfondo #} 
          {% set val = states(e.entity_id) %}
          {% set val = val | float if is_number(val) else 0 %}
          {% set perc = (val/6000*100) | round(1) %}
          {% set perc = 0 if perc < 0 else perc %}
          {% set perc = 100 if perc > 100 else perc %}
          {% set rest = 100 - perc %}
          {% if perc <= 10 %}{% set bar = '51, 255, 0' %}
          {% elif perc <= 20 %}{% set bar = '102, 255, 0' %}
          {% elif perc <= 30 %}{% set bar = '153, 255, 0' %}
          {% elif perc <= 40 %}{% set bar = '204, 255, 0' %}
          {% elif perc <= 50 %}{% set bar = '255, 255, 0' %}
          {% elif perc <= 60 %}{% set bar = '255, 204, 0' %}
          {% elif perc <= 70 %}{% set bar = '255, 153, 0' %}
          {% elif perc <= 80 %}{% set bar = '255, 85, 0' %}
          {% elif perc <= 90 %}{% set bar = '255, 51, 0' %}
          {% else %} {% set bar = '255,0,0' %}
          {% endif %}
          {
            "type": "custom:button-card",
            "entity": "{{ e.entity_id }}",
            "icon": "{{ dizionario.icona }}",
            "name": "{{ dizionario.nome }}",
            "label": "{{ valore }} w",
            "show_label": "true",
            "tap_action": "none",
            "hold_action": "none",
            "double_tap_action": "none",
            "styles": {
              "card": [
                {
                  "border": "none",
                  "border-radius": "10px",
                  "padding-top": "3px",
                  "padding-bottom": "3px",
                  "padding-left": "10px",
                  "padding-right": "10px",
                  "font-size": "14px",
                  "background": "linear-gradient(to right, rgba({{bar}},0.8) 0%, rgba({{bar}},0.6) {{perc}}%,rgba({{bar}},0.2){{perc}}%, rgba({{bar}},0.05) 100%)"
                }
              ],
              "grid": [
                {
                  "grid-template-areas": "'i n . l'",
                  "grid-template-columns": "min-content min-content 1fr min-content",
                  "grid-template-rows": "min-content",
                  "column-gap": "10px"
                }
              ],
              "icon": [
                {
                  "width": "20px",
                  "height": "20px",
                  "color": "var(--primary-text-color)",
                  "transform": "translate(0px,0px)"
                }
              ],
            }
          }
          {% if not loop.last %},{% endif %}
        {% endif %}
      {% endfor %}
    ]

Example 3 (auto-entities + grid + custom-button-card)

Code:

type: custom:auto-entities
card:
  type: grid
  columns: 2
  square: false
card_param: cards
sort:
  method: state
  numeric: true
  reverse: true
filter:
  template: |-
    [
      {% for e in states %}
        {% if "sensor.teatrino_1_blu" in e.entity_id and "picco" in e.entity_id %}
          {# nome e icona #}
          {% set dizionario = 
            {'nome':'boiler','icona':'mdi:water-boiler'} if 'boiler' in e.entity_id else
            {'nome':'fan coil','icona':'mdi:fan'} if 'fan_coil' in e.entity_id else
            {'nome':'forno','icona':'mdi:stove'} if 'forno' in e.entity_id else
            {'nome':'induzione','icona':'mdi:food'} if 'induzione' in e.entity_id else
            {'nome':'lavatrice','icona':'mdi:washing-machine'} if 'lavatrice' in e.entity_id else
            {'nome':'luci','icona':'mdi:lightbulb-group'} if 'luci' in e.entity_id else
            {'nome':'scaldasalviette','icona':'mdi:heating-coil'} if 'scaldasalviette' in e.entity_id else
            {'nome':'altre fonti','icona':'mdi:dots-hexagon'} if 'altre_fonti' in e.entity_id else
            {'nome':'totale','icona':'mdi:home'}
          %}
          {# valore #} 
          {% set valore = states(e.entity_id) %}
          {% set valore = valore | int if is_number(valore) else 0 %}
          {# sfondo #} 
          {% set val = states(e.entity_id) %}
          {% set val = val | float if is_number(val) else 0 %}
          {% set perc = (val/6000*100) | round(1) %}
          {% set perc = 0 if perc < 0 else perc %}
          {% set perc = 100 if perc > 100 else perc %}
          {% set rest = 100 - perc %}
          {% if perc <= 10 %}{% set bar = '51, 255, 0' %}
          {% elif perc <= 20 %}{% set bar = '102, 255, 0' %}
          {% elif perc <= 30 %}{% set bar = '153, 255, 0' %}
          {% elif perc <= 40 %}{% set bar = '204, 255, 0' %}
          {% elif perc <= 50 %}{% set bar = '255, 255, 0' %}
          {% elif perc <= 60 %}{% set bar = '255, 204, 0' %}
          {% elif perc <= 70 %}{% set bar = '255, 153, 0' %}
          {% elif perc <= 80 %}{% set bar = '255, 85, 0' %}
          {% elif perc <= 90 %}{% set bar = '255, 51, 0' %}
          {% else %} {% set bar = '255,0,0' %}
          {% endif %}
          {
            "type": "custom:button-card",
            "entity": "{{ e.entity_id }}",
            "icon": "{{ dizionario.icona }}",
            "name": "{{ dizionario.nome }}",
            "label": "{{ valore }} w",
            "show_label": "true",
            "tap_action": "none",
            "hold_action": "none",
            "double_tap_action": "none",
            "styles": {
              "card": [
                {
                  "border": "none",
                  "border-radius": "10px",
                  "padding-top": "3px",
                  "padding-bottom": "3px",
                  "padding-left": "10px",
                  "padding-right": "10px",
                  "font-size": "14px",
                  "background": "linear-gradient(to right, rgba({{bar}},0.8) 0%, rgba({{bar}},0.6) {{perc}}%,rgba({{bar}},0.2){{perc}}%, rgba({{bar}},0.05) 100%)"
                }
              ],
              "grid": [
                {
                  "grid-template-areas": "'i n . l'",
                  "grid-template-columns": "min-content min-content 1fr min-content",
                  "grid-template-rows": "min-content",
                  "column-gap": "10px"
                }
              ],
              "icon": [
                {
                  "width": "20px",
                  "height": "20px",
                  "color": "var(--primary-text-color)",
                  "transform": "translate(0px,0px)"
                }
              ],
            }
          }
          {% if not loop.last %},{% endif %}
        {% endif %}
      {% endfor %}
    ]

[Mariusthvdb (Marius)]

did you check the post I did on the alternative to bar card?

Home Assistant card (replacing former bar-card config)

Because custom Bar-card has not been maintained for a while, I decided to try and mimic it as much as possible with core HA elements and card_mod, which in my toolset is practically core… I’ve posted about this in the bar-card topic, but since it has become more than a simple replacement, I figured it might be useful and fun for the community to share standalone. It features some nice and a bit more complex card_mods (setting generic mods on entities in an entities card, but overrule that on i…

[andrea.magnani01 (Andrea)]

Hi @Mariusthvdb ! Thanks for your message.

I read your post and you did a great job — it’s very nice and really well documented!

As for my solution, visually there’s nothing new compared to your example and the others.

In particular, before creating my cards I went through several posts in this thread and I widely took inspiration for the graphic part and I copied the gradient used as a background (which I only slightly modified) — I like it a lot! It probably comes from you, since I saw the same gradient in other posts I used as inspiration. So if the gradient and the graphic idea came from you, compliments and thank you!

As I mentioned earlier, the only reason I decided to share my solution is not the visual part (there are several similar examples above), but what’s under the dashboard:

• I used auto-entities + custom-button-card ,
• instead of auto-entities + entities . And I generated multiple custom-button-cards not individually, but through a template.

So I thought my post could be useful — not for the graphic part (which is similar to examples already posted), but for anyone who feels limited by using entities (customizable only via card-mod) and wants to unlock all the possibilities of custom-button-card. After all, sharing is one of Home Assistant’s strengths, and I’ve benefited from it myself!

[Mariusthvdb (Marius)]

sure, please keep sharing
this what were here for after all.

@andrea.magnani01

I used auto-entities + custom-button-card ,

Yes, that was also mentioned before, I believe @VietNgoc even created a button-card configuration template at the point.

it should be around somewhere…

options galore.