Yes, when the first characters are [[ and last are ]]
ok got ya
so I would do this
- entity: '[[sprinkler]]'
name: '[[sprinkler_name]]'
to
- entity: automation.[[sprinkler]]
name: '[[sprinkler_name]]'
I don’t know if this belongs here or in the button card? and there is a lot of code in this post so please bear with me. It is two versions of the same thing. One works using the button card the other doesn’t using the de-cluttering templates. (I stole the idea from someone else a long time ago but can’t remember who).
So…
This works to give a nice header with a ‘settings’ button at the side:
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
label: "-- Hall --"
show_name: false
show_icon: false
show_label: true
styles:
card:
- height: 50px
# - background: linear-gradient(to right, rgba(255,255,20,0.45) 0%,rgba(255,255,20,0.3) 60%,rgba(255,255,20,0) 85%)
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 70%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
label:
- justify-self: start
- padding-left: 10px
- font-size: 18pt
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:button-card
icon: mdi:settings
show_name: false
tap_action:
action: call-service
service: homeassistant.turn_on
service_data:
entity_id: entity
styles:
card:
- border-radius: 50%
- height: 40px
- width: 40px
- background: rgba(255,255,255,0.45)
- top: 5px
icon:
- color: gray
- width: 35px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:banner-card
background: "#EDE7B0"
heading: "\U0001F6CB Hall"
link: /lovelace/0
entities:
- entity: group.hall_lights
name: Lights
- entity: binary_sensor.front_door
name: Door
- entity: sensor.hall_temperature
name: Temperature
But this doesn’t work, using the de-cluttering templates:
First the view itself,
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:decluttering-card
template: simple_header
variables:
- label: -- Hall --
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:decluttering-card
template: simple_header_options_button
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
then the de-cluttering templates,
#==================
#=== Simple Header
#==================
simple_header:
card:
type: custom:button-card
label: '[[label]]'
show_label: true
aspect_ratio: 9/1
# color_type: label-card
styles:
card:
- height: 50px
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
# - background-color: var(--paper-card-background-color)
label:
- justify-self: start
- padding-left: 20px
- font-size: 24px
#=================================
#=== Simple Header Options Button
#=================================
simple_header_options_button:
default:
icon: mdi:settings
lock: false
lock_color: var(--primary-text-color)
tap_action: more-info
card:
type: custom:button-card
icon: '[[icon]]'
show_name: false
tap_action:
action: '[[tap_action]]'
lock: '[[lock]]'
styles:
card:
- border-radius: 50%
- height: 50px
- width: 50px
- background: rgba(255,255,255,0.45)
lock:
- color: '[[lock_color]]'
icon:
- color: gray
- width: 35px
For bonus points, why does the options button have a lock when the default is ‘false’?
So, there are multiple things here:
- the lock thingy seems like a bug with booleans on decluttering-card
it should work, but apparently not… Could you open a bug on github please? - the second problem is that button-card’s fixed width feature (specifying
width: 50px) is a hack and it doesn’t work inside a decluttering card, it only works if thebutton-card's direct father is ahorizontal-stack(when using decluttering-card, the father is adecluttering-cardcard and its father is ahorizontal-stackcard) .
What I’d suggest is to put everything inside 1 decluttering-template which would then work:
simple_header_with_button:
default:
icon: mdi:settings
lock: false
lock_color: var(--primary-text-color)
tap_action: more-info
card:
type: horizontal-stack
cards:
- type: custom:button-card
label: '[[label]]'
show_label: true
aspect_ratio: 9/1
# color_type: label-card
styles:
card:
- height: 50px
- background: linear-gradient(to right, var(--paper-card-background-color) 0%, rgba(255,255,255,0.55) 60%, rgba(255,255,255,0) 90%)
- --ha-card-box-shadow: 'none'
# - background-color: var(--paper-card-background-color)
label:
- justify-self: start
- padding-left: 20px
- font-size: 24px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
- type: custom:button-card
icon: '[[icon]]'
show_name: false
tap_action:
action: '[[tap_action]]'
lock: '[[lock]]'
styles:
card:
- border-radius: 50%
- height: 50px
- width: 50px
- background: rgba(255,255,255,0.45)
lock:
- color: '[[lock_color]]'
icon:
- color: gray
- width: 35px
- type: custom:button-card
color_type: blank-card
styles:
card:
- width: 2px
And you’d use it like this:
- type: custom:decluttering-card
template: simple_header_with_button
variables:
- label: -- Hall --
Wait, what!!! Decluttering card can template more than one card in one template??
That is exactly what I wanted to do but just didn’t try it.
My fault… But thank you!
I will open an bug for booleans
It can template all the things 
1 Like
Another question…
Can this card be used as an element in picture-elements because I can’t make it work?
The error I get is a simple, “Error in card configuration.”
Here is my view:
title: home
icon: 'mdi:home'
panel: true
cards:
- type: custom:layout-card
layout: horizontal
column_num: 1
max_columns: 1
max_width: [100%]
cards:
#=== TOP PANEL
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/top_panel.svg
elements:
Some working elements in here...
#=== CENTRE PANEL
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/centre_panel.svg
elements:
Some working elements in here...
...then DECLUTTERING CARD, not working
- type: custom:decluttering-card
template: hall_panel_conditional
variables:
- state: Good Service
- type: state-label
- entity: sensor.bakerloo
- prefix: 'Bakerloo - '
- top: 65%
- left: 60%
- font-size: 22px
Here is my decluttering template
hall_panel_conditional:
default:
type: state-label
color: '"#A1A1A1"'
font-family: Quicksand
font-size: 22px
font-weight: normal
pointer-events: none
card:
type: conditional
conditions:
- entity: '[[entity]]'
state: '[[state]]'
elements:
- type: '[[type]]'
entity: '[[entity]]'
prefix: '[[prefix]]'
style:
top: '[[top]]'
left: '[[left]]'
color: '[[color]]'
font-family: '[[font-family]]'
font-size: '[[font-size]]'
font-weight: '[[font-weight]]'
pointer-events: '[[pointer-events]]'
No this doesn’t work unfortunately 
That’s a real shame. Picture elements cards get huge!
I’m attempting to create a template from the sample button code available with the ESXI Custom Component. By itself, the button code works fine. However, when I drop the code into decluttering-templates: and replace the hostname field with a variable name located inside of the IF statements, the button doesn’t actually render.
The variable I suspect is problematic is '[[vm_hostname]]'.
Is this the expected behavior or am I doing something wrong?
dc_esxi_vm_status_card:
card:
type: custom:button-card
entity: sensor.esxi_stats_vms
name: '[[name]]'
template: esxi_stats_vm
styles:
icon:
- color: >
[[[
if ( states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.status == "green")
return "green";
if ( states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.status == "warning" )
return "yellow";
return "red";
]]]
custom_fields:
uptime: >
[[[
return `<ha-icon
icon="mdi:arrow-up"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span><span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.uptime_hours}</span></span>`
]]]
cpu: >
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.cpu_count}</span></span>`
]]]
ram: >
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>Mem: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.memory_allocated_mb} MB</span></span>`
]]]
state: >
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>State: <span style="color: var(--text-color-sensor);">
${states['sensor.esxi_stats_vms'].attributes.'[[vm_hostname]]'.state}</span></span>`
]]]
1 Like
I think it should be without quotes like this:
states['sensor.esxi_stats_vms'].attributes.[[vm_hostname]].status
Thanks for the feedback.
That seems to have helped, however I’ve now discovered a new issue. Cards won’t load if configured with VMs that contain a dash in the hostname. This problem occurs regardless of whether or not the card is a template. So for now, I’m ruling out DC as a potential cause.
Need some assistance as I’m kind of stuck. I’m attempting to use a template that would populate a value based on an entity name. As such, I am trying to convert this Jinja template code:
{{ states['sensor.esxi_vm_dc04'].attributes.name }}
with this hybrid in Decluttering Card:
{{ states['[[entity_id]]'].attributes.name }}
Unfortunately, instead of populating only the hostname as I intended, it appears that the entire template is piped into the card when rendered as well as the FQDN of the VM in question.
What am I doing wrong? The example template with the valid entity id works properly under DevTools->Template.
Decluttering Card
dc_horseshoe_cpu_three_stats_layout:
card:
type: custom:flex-horseshoe-card
entities:
- entity: '[[entity_id]]'
attribute: cpu_use_%
decimals: 0
unit: '%'
area: CPU Usage
name: >
{{ states[[entity_id]].attributes.name }}
icon: mdi:memory
Declaration
- type: horizontal-stack
cards:
- type: 'custom:decluttering-card'
template: dc_horseshoe_cpu_three_stats_layout
variables:
- entity_id: sensor.esxi_vm_dc01
This seems correct and should work:
{{ states['[[entity_id]]'].attributes.name }}
But that’s not what you put in your card 
name: >
{{ states[[entity_id]].attributes.name }}
Sorry. That was a typo on my part. Sadly, even with the correction the end result is still the same.
name: >
{{ states['[[entity_id]]'].attributes.name }}
Ah I see, flex-horseshoe-card doesn’t support templates apparently.
So it’s displaying this exact string in the name field:
{{ states['YOUR_ENTITY_ID'].attributes.name }}
decluttering card doesn’t execute any code, it just replaces a variable with a static value. What you want to achieve can be done with config-template-card used inside of the decluttering card I think 
need some help here, creating my first real decluttering card, (I hope) to be able to ease up on the config of my hue scenes card…
I have this:
- type: custom:button-card
template: button_picture_script_small
name: Arctic
entity_picture: '/local/hue_scenes/arctic.png'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: 'Arctische dageraad'
state:
- operator: template
value: >
[[[
return states['input_select.hue_scenes'].state == 'Arctische dageraad'
]]]
color: '#00d0a0'
styles:
name:
- color: '#555B65'
now for all hue scenes I use, to give you an idea:
Bending my mind how to get a template that uses the ‘option: [[[option]]]’ and be able to set this whole piece of config in a template,
template set_hue_scene.yaml (in my decluttering_templates dir) set up with decluttering_templates: !include_dir_named lovelace/decluttering_templates :
template: button_picture_script_small
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: '[[option]]'
state:
- operator: template
value: >
[[[
return states['input_select.hue_scenes'].state == '[[option]]'
]]]
color: '#00d0a0'
styles:
name:
- color: '#555B65'
valid for all other buttons and endup with a button config like:
- type: custom:decluttering-card
template: set_hue_scene
name: Arctic
entity_picture: '/local/hue_scenes/arctic.png'
variables:
- option: 'Arctische dageraad'
resulting in:
The above is obviously incorrect, it was merely my first effort of what I hope to accomplish.
Appreciate it if you could have a look and assist me.
thanks!
Edit
missed a type: card…
this seems to work (needs further testing):
card config:
- type: custom:decluttering-card
template: set_hue_scene
variables:
- option: Arctische dageraad
- entity_picture: '/local/hue_scenes/arctic.png'
- name: Arctic
- color: '#00d0a0'
and decluttering template:
card:
type: custom:button-card
template: button_picture_script_small
entity_picture: '[[entity_picture]]'
name: '[[name]]'
tap_action:
action: call-service
service: script.tiles_set_hue_scene
service_data:
option: '[[option]]'
state:
- operator: template
value: >
[[[
return states['input_select.hue_scenes'].state == '[[option]]'
]]]
color: '[[color]]'
styles:
name:
- color: '#555B65'
got the taste for this decluttering card form previous post works fine now, which makes me want to develop another one, a bit further, using templates the decluttering-card if possible.
card:
type: custom:button-card
template: button_picture_script
entity_picture: '[[entity_picture]]'
tap_action:
action: call-service
service: '[[service]]'
state:
- operator: template
value: >
[[[
return states['input_select.activity'].state == '[[option]]'
]]]
color: '#F0C209'
- operator: default
color: '#555B65'
is the current decluttering-card, used by a config of many cards like this:
- type: custom:decluttering-card
template: select_activity
variables:
- service: script.aan_de_slag_direct
- entity_picture: '/local/activities/aan_de_slag.png'
- option: 'Aan de slag'
I would hope to set the config to:
- type: custom:decluttering-card
template: select_activity
variables:
- option: 'Aan de slag'
and have the decluttering template fill in the rest of the fields based on the format of the option string.
which syntax would I need to do so for :
card:
type: custom:button-card
template: button_picture_script
entity_picture: "/local/activities/'[[option]]'.toLowerCase().replace(' ','_').png"
tap_action:
action: call-service
service: "script.'[[option]]'.toLowerCase().replace(' ','_'')"
state:
- operator: template
value: >
[[[
return states['input_select.activity'].state == '[[option]]'
]]]
color: '#F0C209'
- operator: default
color: '#555B65'
which errors :
Failed to load resource: the server responded with a status of 404 (Not Found)
update
I’ve tried about all my js tricks, but cant get it to work as desired, is this even possible @RomRider?
this is as far as I can get it now:
template:
card:
type: custom:button-card
template: button_picture_script
entity_picture: '/local/activities/[[option_]].png'
tap_action:
action: call-service
service: script.[[option_]]_direct
state:
- operator: template
value: >
[[[
return states['input_select.activity'].state == '[[option]]';
]]]
color: '#F0C209'
- operator: default
color: '#555B65'
card config:
- type: custom:decluttering-card
template: select_activity_test
variables:
- option: 'Aan de slag'
- option_: 'aan_de_slag'
so, getting close, now need to find out how to go from ‘Aan de slag’ to ‘aan_de_slag’ using [[option]] in decluttering language
entity_picture: >
[[[ var pic = '[[option]]' ;
return pic.toLowerCase().replace(/ /g, '_');
]]]
still no luck ;-(
should be possible…
decluttering card doesn’t support javascript templates, it’s not the purpose. It just replaces a string with its value.
a I feared as much…
Hope to have shown above it would be a magical feature though, and most certainly would have its purpose, in further decluttering the Lovelace configs.
Could I create a feature request you would be willing to consider?