you can template card options with custom:config-template-card which embeds your full config you posted here and allows to input a template as you like it to be
Thank you for your answer. I had a look at config-template-card but I fail to see how to do that. The documentation seems a bit sparse. It seems like the entities that are watched must be explicitly stated, but my list needs to come from auto-entities.
I really need just to add another filter to auto-entities.
If you could give some example it would be greatly appreciated.
Thank you.
well, that scenario (auto-entities filling a config-template-card) has just been added as a FR by me in the repo…
other than that, I thought you wanted to template some of the cards options (not the entities), and that is quite possible.
1 Like
would you know of a way to have an auto-entities filled grid card with custom:button-cards with a template filter?
I have made the confg with auto-entities and a fixed filter set, (where the button-card is used in the options: field) but can not make it happen using a filter: template (because that wont accept options…)
I do hope I make a user error. but believe I tried it all…
- type: custom:auto-entities
card:
type: grid
title: Test Icon color Buttons
columns: 4
card_param: cards
filter:
include:
- entity_id: sensor.*_actueel
options:
type: custom:button-card
aspect_ratio: 1/1
show_state: true
template: support_custom_ui
exclude:
- state: '<20'
sort:
method: state
numeric: true
and this wrks too:
- type: custom:auto-entities
card:
type: entities
card_mod: &mod
style: |
ha-card {
box-shadow: none;
margin: -16px -16px 0px -16px;
}
filter:
template: >
{% set threshold = states('input_number.power_threshold')|float(0) %}
{% set ns = namespace(above_threshold=[]) %}
{% for s in states.sensor
|selectattr('entity_id','search','_actueel')
if s.state|float(0) > threshold %}
{% set ns.above_threshold = ns.above_threshold + [s.entity_id] %}
{% endfor %}
{{ns.above_threshold}}
sort:
method: state
numeric: true
works fine, but replacing the
filter:
include:
- entity_id: sensor.*_actueel
with the template from the second example doesnt work, because we can no longer set options in that case…
hope you see what I am missing
why, because i literally have no idea what im doing lol i dont know code, its trial an error for atm
I was hoping that each battery would have its own graph card not all battery devices on the one graph.
type: custom:auto-entities
card:
type: vertical-stack
card_param: cards
filter:
include:
- entity_id: sensor.battery_*
options:
type: custom:mini-graph-card
entities:
- this.entity_id
Thanks for helping 
This is what i have and now this error??
The “entity” option was removed, please use “entities”
type: custom:auto-entities
card:
type: vertical-stack
card_param: cards
filter:
include:
- entity_id: '*battery_level*'
options:
type: custom:mini-graph-card
entities:
- this.entity_id
- type: custom:auto-entities
card:
type: grid
title: Test Icon color Buttons
columns: 4
card_param: cards
filter:
template: >-
{% set threshold = states('input_number.test_number')|float(0) -%} {%-
for s in states.sensor|selectattr('entity_id','search','battery_')
if s.state|float < threshold -%}
{{
{
'type': 'custom:button-card',
'entity': s.entity_id,
'aspect_ratio': '1/1',
'show_state': 'true'
}
}},
{%- endfor %}
sort:
method: state
numeric: true
2 Likes
a yes, I forgot about that.
Ive managed to get it to work (and only did so because of the white stripping , without the {%- and others this wont work… )
next challenge is to build the button-card with its templates:
type: custom:button-card
aspect_ratio: 1/1
template:
- support_custom_ui
- styles_name_left
- styles_card
- styles_cf_notification
- styles_img_cell
- plot
- support_custom_ui_notification_border
styles:
card:
- background-color: var(--card-background-color)
- color: var(--primary-color)
custom_fields:
notification: >
[[[ return entity.state + 'W'; ]]]
adding only 1 template like
'template':'support_custom_ui' there is ok, but trying the list like:
'template':
{'- support_custom_ui',
'- styles_name_left',
'- styles_card',
'- styles_cf_notification',
'- styles_img_cell',
'- plot',
'- support_custom_ui_notification_border'
}
doesnt work, same for the final styles: or custom_fields:… this is really tough in an auto-entities templates config.
threw all of these in an extra template:
custom_ui_hack_for_button_card_template:
template:
- support_custom_ui
- styles_name_left
- styles_card
- styles_cf_notification
- styles_img_cell
- plot
- support_custom_ui_notification_border
styles:
card:
- background-color: var(--card-background-color)
- color: var(--primary-color)
and that works ok 
now how to get the notification in the button-card. Tried to throw that in the same hack template:
custom_ui_hack_for_button_card_template:
aspect_ratio: 1/1
template:
- support_custom_ui
- styles_name_left
- styles_card
- styles_cf_notification
- styles_img_cell
- plot
- support_custom_ui_notification_border
styles:
card:
- background-color: var(--card-background-color)
- color: var(--primary-color)
custom_fields:
notification: >
[[[ var unit = (entity.entity_id.includes('_actueel')) ? ' W' : ' %';
return entity.state + unit; ]]]
et voilá:
advantage over the config-template-card: it auto-updates immediately (albeit in all the buttons for any change, so it might even be a bit much…
lesson learned: if you need a button in an auto-entities template, create a dedicated template with the full button-config to make life easier
thanks Ildar
3 Likes
Hi,
I use auto-entites card, and I have a little problem. My card works fine, with this code:
type: custom:auto-entities
card:
type: custom:layout-card
layout_type: horizontal
layout_options:
width: 100
filter:
include:
- domain: switch
options:
type: custom:button-card
entity_id: this.entity_id
layout: vertical
lock:
enabled: true
hold_action:
action: more-info
show_last_changed: true
aspect_ratio: 1/1
custom_fields:
type_icon: >
[[[ if ('this.entity_id' == 'switch.sonoff_100109c76c_1')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_eee310')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' &&
states['input_boolean.teraszfan_decorationlight'].state == "on")
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' &&
states['input_boolean.teraszfan_decorationlight'].state == "off")
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
return `<ha-icon
icon="mdi:toggle-switch"
style="width: 25px; height: 25px; color: red;">
`
]]]
timer:
card:
type: custom:button-card
name: Timer
entity: |
[[[
if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return "timer.toilett_fan";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return "timer.bathroom_fan";
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return "timer.chalet_fan";
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return "timer.kitchen_fan";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_1')
return "timer.irrigation_zone1_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_2')
return "timer.irrigation_zone2_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_3')
return "timer.irrigation_zone3_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_4')
return "timer.irrigation_zone4_timer";
else if ('this.entity_id' == 'switch.shelly1pm_e8db84d43d0f')
return "timer.bojler";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "off")
return "timer.terasz_fan";
return "null";
]]]
show_name: false
show_icon: false
show_state: true
styles:
card:
- font-size: 12px
style: |
.t { padding: 0px; }
.flex { padding: 0px; }
icon: |
[[[
if ('this.entity_id' == 'switch.sonoff_100109c76c_1')
return "mdi:home-floor-1";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return "mdi:toilet";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return "mdi:shower";
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return "mdi:home-outline";
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return "mdi:weather-windy";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_3')
return "mdi:water-pump";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_4')
return "mdi:speaker";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_1')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_2')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_3')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_4')
return "mdi:engine";
else if ('this.entity_id' == 'switch.shelly1pm_e8db84d43d0f')
return "mdi:water-boiler";
else if ('this.entity_id' == 'switch.shellyplug_s_eee310')
return "mdi:pine-tree";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "off")
return "mdi:wind-turbine";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "on")
return "mdi:string-lights";
return "mdi:toggle-switch";
]]]
styles:
custom_fields:
timer:
- color: gray
- font-size: 15px
- position: absolute
- left: 25%
- top: 8%
type_icon:
- color: gray
- font-size: 15px
- position: absolute
- left: 5%
- top: 5%
card:
- box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
icon:
- width: 40%
- padding-top: 20px
label:
- color: gray
- font-size: 10px
- justify-self: start
- padding-left: 10px
- padding-top: 0px
name:
- font-weight: bold
- padding-left: 0px
- font-size: 12px
- white-space: normal
tap_action:
action: toggle
exclude:
- entity_id: switch.bfa6a6a67d0322660d3ncb
- entity_id: switch.bf091a9060db59254e78h7
- entity_id: switch.bojler_1
- entity_id: switch.viz_1
- entity_id: switch.bojler_socket
- entity_id: light.deerma_jsq5_d52a_indicator_light
- entity_id: switch.viz_switch_1
- entity_id: light.nappalitablet
- entity_id: light.browser_cd5c8c62_98c23c4a
- entity_id: switch.0x588e81fffee4b266_firmware_lock
- entity_id: light.deerma_jsq5_94af_indicator_light
- entity_id: '*browser*'
- entity_id: '*switch.kejszijo*'
- entity_id: '*mikrotik*'
- entity_id: '*coil*'
- state: 'off'
- state: '0'
- state: unavailable
- state: docked
sort:
method: none
reverse: false
numeric: false
show_empty: false
view_layout:
column: 1
But, if I use with browser_mod pop up card, the custom_fields note working:
tap_action:
action: fire-dom-event
browser_mod:
command: popup
service_data: null
card:
type: custom:auto-entities
card:
type: custom:layout-card
layout_type: horizontal
layout_options:
width: 100
filter:
include:
- domain: switch
options:
type: custom:button-card
entity_id: this.entity_id
layout: vertical
lock:
enabled: true
hold_action:
action: more-info
show_last_changed: true
aspect_ratio: 1/1
custom_fields:
type_icon: >
[[[ if ('this.entity_id' == 'switch.sonoff_100109c76c_1')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_eee310')
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' &&
states['input_boolean.teraszfan_decorationlight'].state == "on")
return `<ha-icon
icon="mdi:lightbulb"
style="width: 25px; height: 25px; color: red;">
`
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' &&
states['input_boolean.teraszfan_decorationlight'].state == "off")
return `<ha-icon
icon="mdi:fan"
style="width: 25px; height: 25px; color: red;">
`
return `<ha-icon
icon="mdi:toggle-switch"
style="width: 25px; height: 25px; color: red;">
`
]]]
timer:
card:
type: custom:button-card
name: Timer
entity: |
[[[
if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return "timer.toilett_fan";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return "timer.bathroom_fan";
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return "timer.chalet_fan";
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return "timer.kitchen_fan";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_1')
return "timer.irrigation_zone1_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_2')
return "timer.irrigation_zone2_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_3')
return "timer.irrigation_zone3_timer";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_4')
return "timer.irrigation_zone4_timer";
else if ('this.entity_id' == 'switch.shelly1pm_e8db84d43d0f')
return "timer.bojler";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "off")
return "timer.terasz_fan";
return "null";
]]]
show_name: false
show_icon: false
show_state: true
styles:
card:
- font-size: 12px
style: |
.t { padding: 0px; }
.flex { padding: 0px; }
icon: |
[[[
if ('this.entity_id' == 'switch.sonoff_100109c76c_1')
return "mdi:home-floor-1";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return "mdi:toilet";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_2')
return "mdi:shower";
else if ('this.entity_id' == 'switch.sonoff_100109c76c_2')
return "mdi:home-outline";
else if ('this.entity_id' == 'switch.shelly1_b8b7bc_relay_0')
return "mdi:weather-windy";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_3')
return "mdi:water-pump";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_4')
return "mdi:speaker";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_1')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_2')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_3')
return "mdi:engine";
else if ('this.entity_id' == 'switch.sonoff_10005b6113_4')
return "mdi:engine";
else if ('this.entity_id' == 'switch.shelly1pm_e8db84d43d0f')
return "mdi:water-boiler";
else if ('this.entity_id' == 'switch.shellyplug_s_eee310')
return "mdi:pine-tree";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "off")
return "mdi:wind-turbine";
else if ('this.entity_id' == 'switch.shellyplug_s_ea693e' && states['input_boolean.teraszfan_decorationlight'].state == "on")
return "mdi:string-lights";
return "mdi:toggle-switch";
]]]
styles:
custom_fields:
timer:
- color: gray
- font-size: 15px
- position: absolute
- left: 25%
- top: 8%
type_icon:
- color: gray
- font-size: 15px
- position: absolute
- left: 5%
- top: 5%
card:
- box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
icon:
- width: 40%
- padding-top: 20px
label:
- color: gray
- font-size: 10px
- justify-self: start
- padding-left: 10px
- padding-top: 0px
name:
- font-weight: bold
- padding-left: 0px
- font-size: 12px
- white-space: normal
tap_action:
action: toggle
exclude:
- entity_id: switch.bfa6a6a67d0322660d3ncb
- entity_id: switch.bf091a9060db59254e78h7
- entity_id: switch.bojler_1
- entity_id: switch.viz_1
- entity_id: switch.bojler_socket
- entity_id: light.deerma_jsq5_d52a_indicator_light
- entity_id: switch.viz_switch_1
- entity_id: light.nappalitablet
- entity_id: light.browser_cd5c8c62_98c23c4a
- entity_id: switch.0x588e81fffee4b266_firmware_lock
- entity_id: light.deerma_jsq5_94af_indicator_light
- entity_id: '*browser*'
- entity_id: '*switch.kejszijo*'
- entity_id: '*mikrotik*'
- entity_id: '*coil*'
- state: 'off'
- state: '0'
- state: unavailable
- state: docked
sort:
method: none
reverse: false
numeric: false
show_empty: false
view_layout:
column: 1
deviceID:
- this
- dashboard
large: false
title: Aktív fogyasztók
Any idea what is problem with my code? 
Thanks!
If you re-open the popup, does the custom_field work then? So if you press the button and the icon should turn into lightbulb, then close popup, then open again. If it’s changed, then this is due to browser_mod. It doesn’t update the icon when in a popup.
Hi
I am trying to set this up to show my Steams games when they are on sale, which I have working, however I would like to see the normal price and the sale price, but I cannot seem to get it working.
I have gone through this thread and tried to format the code but I am obviously not getting it.
type: custom:auto-entities
show_empty: false
card:
title: Steam Wishlist On Sale
type: entities
filter:
include:
- entity_id: binary_sensor.steam_wishlist_*
attributes:
- sale_price: null
options:
type: custom:multiple-entity-row
toggle: true
secondary_info: normal_price
primary:
entity: this.entity_id
attribute: sale_price
name: SP
exclude:
- state: 'False'
but my display is
I would appreciate any advice
thank you
There is no such an option in multiple-entity-row.
No, it isn’t update. I try many times open/close. I try turn off the light from the list…no update.
It does not execute functions like this:
icon: |
[[[
if ('this.entity_id' == 'switch.sonoff_100109c76c_1')
return "mdi:home-floor-1";
else if ('this.entity_id' == 'switch.sonoff_1000f46826_1')
return "mdi:toilet";
return "mdi:toggle-switch";
]]]
Love this card, but is it possible to place a divider between the entities?
type: custom:auto-entities
card:
type: entities
filter:
template: |-
{% for s in states.switch -%}
{{
{
'entity': s.entity_id,
'secondary_info': 'last-changed'
}
}},{%- if not loop.last -%}{{
{
'type': 'section'
}
}},
{%- endif -%}
{%- endfor %}
4 Likes
Thanks, this works, until you use sort on a attribute. It place all dividers at the bottom of the card. How do you exclude a dvivider?
You cannot exclude a divider - unless you specify a sort inside the template.
1 Like