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?
i need help with update a template, i tried a few things without success.
This is the current template :
Button2black:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
label: '[[entity]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
# - background-color: '#fff5bc'
- background-color: 'rgb(100,100,100)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: AliceBlue
icon:
- color: AliceBlue
name:
- color: AliceBlue
state:
- color: AliceBlue
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'
i want to the add the following to the template, i’m not quite sure how to do that.
code:
label: >
[[[
var bri = states['light.bedroom_lights'].attributes.brightness;
return (bri ? bri : '0') + '%';
]]]
how can i do it?
i want to use the template for all lights.
Very nice layout can you share your code for this please.
I think my wife will prefer this.
I have a small problem with a popup using using browser_mod by @thomasloven.
There are three things involved here, button card, decluttering card and browser_mod but since you wrote two of the three I thought I’d start here
The problem is that it seems to ignore the popup deviceID…
deviceID:
- this
…and pops up on all devices.
I have browser_mod working well in other places so I know it can work
My button config is:
- type: custom:decluttering-card
template: motion_door_and_window_sensor_button
variables:
- entity: binary_sensor.front_door
- activations_entity: counter.front_door_activations
- name: Front
My decluttering template is:
card:
type: custom:button-card
entity: '[[entity]]'
# A load of defaults and other settings here
double_tap_action:
action: call-service
service: browser_mod.command
service_data:
command: popup
title: >
[[[ return entity.attributes.friendly_name ]]]
card:
type: entities
entities:
- entity: >
[[[ return 'input_select.manually_set_' + entity.entity_id.split('.')[1]; ]]]
deviceID:
- this
I’m not sure exactly how the decluttering card works, but you could try enclosing this in quotes, or the alternative syntax:
deviceID: this
which generally seems to work better… that’s still on my list of intermittent bugs to hunt down.
Unfortunately neither worked.
Not a huge problem. I can live with it and hope you track down the bug…
How do you match this with the actual deviceID? Is the browser ID sent by default by HA as part of the service call?
Yeah.
Browser_mod taps into the service-call function of the frontend, and replaces any occurence of this in any deviceID parameter with the current deviceID before it gets to the backend.
@RomRider Hi,
Thank you for your amazing card.
I see that the card is not working while casting to my google home using Home Assistant Cast:
Is there a way to overcome this issue?
below all the red errors, are cards configured using decluttering card:
I figure there’s something specific to do to support casting. I’ll have a look but could you open an issue on github please?
1 Like
