Is it possible to create multiple cards in a grid card using template loop?

[real lance]

I've been trying to figure out how to make a button card for each zone I have configured within a grid card.

type: grid
cards: >
  {% for zone in states.zone %}
  - show_name: true
    show_icon: true
    type: button
    entity: {{zone.entity_id}}
  {% endfor %}

It seems like this should work but I'm getting the error:

The provided value for 'cards' is not supported by the visual editor. We support (array) but received ("{% for zone in states.zone %} - show_name: true\n show_icon: true\n type: button\n entity: {{zone.entity_id}}\n{% endfor %}\n").
You can still edit your config using YAML.

What am I doing wrong and is there a better way to do this?

[smoky heron]

Frontend core cards do not support templates

[real lance]

Well, that's a relief. At least I wasn't thinking about it completely wrong. Is that documented somewhere?

Is there another way to do this? I know there are built in dashboards that will automatically add areas but I can't figure out how to do something similar for zones

[smoky heron]

Well it's only documented by the fact that there are no templates in the documenation for frontend cards 😁

There are surely custom cards that could do this, probably auto-entities

[real lance]

Yeah, that's the only way I could get it to work 🫤

[real lance]

It took a bit but I finally figured out how to do this with auto-entities

type: custom:auto-entities
card:
  #The container will be a grid
  type: grid 
#Populate the card parameter instead of the entities parameter
card_param: cards 
filter:
  include:
    - domain: zone
      options:
        #The repeated card will be a button card
        type: button  

[versed kraken]

@real lance Here's some more examples that might help you get auto-entities to work the way you want. Here, a layout-card handles the grid and light entities in the Living Room will get its own Mushroom Entity Card. ```yaml
type: custom:auto-entities
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout_options:
width: 100
layout:
grid-template-columns: auto auto
grid-template-rows: auto
card_param: cards
filter:
include:
- domain: light
area: Living Room
options:
type: custom:mushroom-entity-card
entity_id: this.entity_id
layout: horizontal
secondary_info: none
tap_action:
action: toggle
hold_action:
action: more-info
exclude:
- state: unavailable
sort:
method: name
reverse: false
numeric: false
show_empty: true

If you want to work with a template, the options: feature cannot be used. Essentially, you have to work that into the template. ```yaml
type: custom:auto-entities
card:
type: grid
card_param: cards
filter:
template: |
[ {% for light in states.light %}
{% if light.state == "on" %}
{{ dict(entity=light.entity_id, type='button', ) }}
,
{% endif %}
{% endfor %} ]

These next two accomplish basically the same thing but different ways of doing it (options vs template). In these examples, auto-entities is looking for light entities who's friendly name ends with "Lights" which is how I name my light groups. ```yaml
type: custom:auto-entities
card:
type: grid
square: false
columns: 2
card_param: cards
filter:
include:
- entity_id: light.*_lights
state: "on"
options:
type: custom:mushroom-light-card
exclude:
- entity_id: "screen"
- entity_id: light.all_lights
- integration: demo
sort:
method: friendly_name
show_empty: false

This one uses a template, but also changes the friendly name by removing "Lights": ```yaml
type: custom:auto-entities
card:
square: false
columns: 2
type: grid
card_param: cards
filter:
template: |-
{% for x in states.light -%}
{%- if x.state == 'on' and state_attr(x.entity_id, 'friendly_name') | regex_search(" Lights") -%}
{{
{
'type': 'custom:mushroom-light-card',
'entity': x.entity_id,
'name': state_attr(x.entity_id, 'friendly_name')|replace( ' Lights', ''),
'show_brightness_control': false,
'tap_action': 'none',
'double_tap_action': {'action':'more-info'},
'hold_action': {'action':'toggle'},
}
}},
{%- endif -%}
{%- endfor %}
exclude:
- entity_id: "screen"
- entity_id: light.all_lights
- integration: demo
show_empty: false
sort:
method: friendly_name