Hi I´m trying to use this card but i dont know why this error show up.
Any suggest?
- template: my_first_template
type: 'custom:decluttering-card'
variables:
- entity_1: sensor.watts
Good morning , after the core update the cards got black
header:
card:
content: |
# [[content]]
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
color: rgba(0, 0, 0, 0.6);
letter-spacing: '-0.01em';
}
type: markdown
Someone had same issue ?ù
thank
fixed adding this line
background: var( --ha-card-background, rgba(241, 243, 249, 0) );
--paper-card-background-color is deprecated, it’s in the release notes of the 0.113 version. 
Thanks so much , i totally missed it.
Now another issue is the popup card , they do not popup anymore…
Im trying to use the dcluttering card to simplify some of my YAML that contains but I am getting the following error message returned:
'undefined is not an object (evaluating 'a.length)'
Not withstanding any daft mistakes with indent problems, I am wondering if the declutter card supports the custom mini-graph-card as everything works upto that point?
Any thoughts or help appreciated!
Heres the template:
sensor_template:
card:
type: custom:vertical-stack-in-card
title: '[[title_1]]'
cards:
- type: horizontal-stack
cards:
- type: custom:mini-graph-card
entity: '[[entity_1]]'
line_color: blue
line_width: 8
font_size: 75
show:
extrema: true
Heres how I call it:
- type: custom:decluttering-card
template: sensor_template
variables:
- title_1: Test Card
- entity_1: sensor.lpmultisensor_6_1
Fixed it - my bad - had entity: ‘[[whatever]]’ instead of
entities:
- '[[whatever]]'
Is there a way to use this in storage mode? I have one dashboard in yaml mode and the rest are created from the UI. Can this be used in the storage mode dashboards?
1 Like
Hi @RomRider
please help me out, Ive been trying to works this out using numerous variations but cant get it to work… no matter what I try, a string gets passed to my button, instead of a state (of a sensor with that string as entity_id…)
here’s what I use for decluttering template:
- type: horizontal-stack
cards:
- type: custom:button-card
template: button_meterget
triggers_update: switch.[[id]]
entity: script.[[id]]_meterget_power
variables:
sensor: sensor.[[id]]_actueel
- type: custom:button-card
template: button_meterget
triggers_update: switch.[[id]]
entity: script.[[id]]_meterget_usage
variables:
sensor: sensor.[[id]]_totaal
- type: custom:button-card
template: button_meterget
triggers_update: switch.[[id]]
entity: script.[[id]]_meterget_state
variables:
sensor: sensor.[[id]]_state
using this button-card template:
button_meterget:
template: button_force_body
show_label: true
name: >
[[[
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}
var id = entity.entity_id.split('_').pop(-1);
console.log(id);
return capitalizeFirstLetter(id);
]]]
icon: >
[[[
var id = entity.entity_id.split('_meterget')[0].split('.')[1];
return states['switch.' + id].attributes.icon;
]]]
label: >
[[[
return states[variables.sensor].state;
]]]
the main card config is this:
- type: custom:decluttering-card
template: force_switches
variables:
- id: tv_library
- on-icon: wifi
- off-icon: wifi-off
everything works, except the label…:
Ive also tried it without the variable for the ‘sensor’, but it made no difference.
Could you spot what I am doing wrong here…?
seems to have kicked in after all!
cool.
Question left for now: is it expected that I need to add the sensor to the triggering triggers_update: field
- type: custom:button-card
template: button_meterget
triggers_update:
- switch.[[id]]
- sensor.[[id]]_actueel #<---- needs this to update on the button, while it is in the config below ?
entity: script.[[id]]_meterget_power
variables:
sensor: sensor.[[id]]_actueel
thanks for having a look!
also, when using the above d
Yes, because you define it in a variable, variables are just arbitrary strings/javascript templates so I can’t know what you put there.
I have this decluttering template that I use for 5 cards:
sonos_master:
default:
font-size: 20px
card:
entity: binary_sensor.sonos_master_[[speaker]]
name: '[[name]]'
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.sonos_master
option: media_player.sonos_[[speaker]]
styles:
name:
- font-size: '[[font-size]]'
template: input_button_thick_name
type: 'custom:button-card'
It incorporates this button card template:
input_button_thick_name:
color_type: card
show_icon: false
state:
- value: 'on'
styles:
name:
- color: var(--secondary-background-color)
styles:
card:
- transform: scale(0.95)
- background-size: 100% 100%
- border-style: solid
- border-width: 2px
- border-color: var(--primary-color)
- height: 60px
name:
- color: white
- font-size: 20px
- font-variant: small-caps
I want to use the same decluttering template for a 6th card but I need to incorporate some additional code (below) to lock the card and change a format. Is it worth trying to code this into a template or should I just bypass the decluttering template and use the raw code?
lock:
enabled: >
[[[ return states['sensor.harmony_activity_living_room'].state === 'Watch Fire TV' || states['sensor.harmony_activity_living_room'].state === 'Watch Live TV' ]]]
exemptions: []
state:
- operator: template
styles:
card:
- border-color: var(--disabled-text-color)
name:
- color: var(--disabled-text-color)
value: >
[[[ return states['sensor.harmony_activity_living_room'].state === 'Watch Fire TV' || states['sensor.harmony_activity_living_room'].state === 'Watch Live TV' ]]]
I have this working fine for YAML mode, but when I try to add it into the UI editor, I get this - any ideas?
If you are using the UI to configure a dashboard, you have to add the templates at the beginning in the raw editor of your dashboard. Templates are dashboard based.
Why not add a second template with that only to your button-card and set the templates as a decluttering variable? A variable in decluttering card can be a list
# Decluttering:
sonos_master:
default:
bt_templates:
- input_button_thick_name
font-size: 20px
card:
entity: binary_sensor.sonos_master_[[speaker]]
name: '[[name]]'
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.sonos_master
option: media_player.sonos_[[speaker]]
styles:
name:
- font-size: '[[font-size]]'
template: '[[bt_templates]]'
type: 'custom:button-card'
# Button-card
input_button_tick_name_lock:
lock:
enabled: >
[[[ return states['sensor.harmony_activity_living_room'].state === 'Watch Fire TV' || states['sensor.harmony_activity_living_room'].state === 'Watch Live TV' ]]]
exemptions: []
state:
- operator: template
styles:
card:
- border-color: var(--disabled-text-color)
name:
- color: var(--disabled-text-color)
value: >
[[[ return states['sensor.harmony_activity_living_room'].state === 'Watch Fire TV' || states['sensor.harmony_activity_living_room'].state === 'Watch Live TV' ]]]
And just add the 2 templates for that specific button through the decluttering bt_templates variable
1 Like
Thank you! Didn’t realize I could do that. In my YAML dashboard, I had this config below - which has a ton of other templates in it. However, I get an error when I use the “!include” command in the raw config editor - is it not a valid option in the raw config editor? Googling it, I can’t find anyone else with the issue.
decluttering_templates:
!include decluttering_templates/decluttering_templates.yaml
No you can’t include in the raw config editor. 
Need some help with my setup.
A have an Entity card with ‘multiple-entity-row’.
Here is a part of this card:
Every row is describing a driving time from Place_X to Place_Y for a Person_Z (using a Yandex Maps platform, https://github.com/custom-components/sensor.yandex_maps).
The row contains:
- name of person;
- traffic jam’s rate;
- an ‘mdi:car’ icon (green, yellow, red - depends on jam’s rate);
- driving time;
- a link to a route’s map.
Here is a code (just for 2 people and 1 place):
type: 'custom:config-template-card'
variables:
- '''ildar'''
- '''irina'''
- 'states["sensor.yandex_time_home_" + vars[0]]'
- 'states["sensor.yandex_time_home_" + vars[1]]'
entities:
- '${vars[2].entity_id}'
- '${vars[3].entity_id}'
card:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: '${vars[2].entity_id}'
entities:
- entity: '${vars[2].entity_id}'
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:car'
styles:
'--paper-item-icon-color': >-
${ parseFloat(vars[2].attributes["jamsrate"]) <= 3 ? "green" :
(parseFloat(vars[2].attributes["jamsrate"]) <= 6 ? "yellow" :
"red") }
- entity: '${vars[2].entity_id}'
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: '${ vars[2].attributes["mapurl"] }'
styles:
'--paper-item-icon-color': cyan
name: '${states["person." + vars[0]].attributes["friendly_name"]}'
unit: ''
icon: ''
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
- type: 'custom:multiple-entity-row'
entity: '${vars[3].entity_id}'
entities:
- entity: '${vars[3].entity_id}'
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:car'
styles:
'--paper-item-icon-color': >-
${ parseFloat(vars[3].attributes["jamsrate"]) <= 3 ? "green" :
(parseFloat(vars[3].attributes["jamsrate"]) <= 6 ? "yellow" :
"red") }
- entity: '${vars[3].entity_id}'
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: '${ vars[3].attributes["mapurl"] }'
styles:
'--paper-item-icon-color': cyan
name: '${states["person." + vars[1]].attributes["friendly_name"]}'
unit: ''
icon: ''
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
Since I want to have this row for several routes and several persons, I need to repeat the same code for each case.
That is why I decided to use a decluttering card.
The template:
decluttering_templates:
decl_travel_time__person:
card:
type: 'custom:config-template-card'
entities:
- '[[SENSOR_TRAVEL_TIME]]'
- '[[SENSOR_PERSON]]'
card:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: '[[SENSOR_TRAVEL_TIME]]'
entities:
- entity: '[[SENSOR_TRAVEL_TIME]]'
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:car'
styles:
'--paper-item-icon-color': >-
${parseFloat(states['[[SENSOR_TRAVEL_TIME]]'].attributes["jamsrate"])
<= 3 ? "green" :
(parseFloat(states['[[SENSOR_TRAVEL_TIME]]'].attributes["jamsrate"])
<= 6 ? "yellow" : "red") }
- entity: '[[SENSOR_TRAVEL_TIME]]'
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.test_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: '${states[''[[SENSOR_TRAVEL_TIME]]''].attributes["mapurl"]}'
styles:
'--paper-item-icon-color': cyan
name: '${states[''[[SENSOR_PERSON]]''].attributes["friendly_name"]}'
unit: ''
icon: ''
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
The card:
type: 'custom:stack-in-card'
title: ''
mode: vertical
cards:
- type: 'custom:decluttering-card'
template: decl_travel_time__person
variables:
- SENSOR_TRAVEL_TIME: sensor.yandex_time_home_ildar
- SENSOR_PERSON: person.ildar
- type: 'custom:decluttering-card'
template: decl_travel_time__person
variables:
- SENSOR_TRAVEL_TIME: sensor.yandex_time_home_irina
- SENSOR_PERSON: person.irina
How it is displayed:
First I got rid of box_shadow:
decluttering_templates:
decl_travel_time__person:
card:
type: 'custom:config-template-card'
entities:
- '[[SENSOR_TRAVEL_TIME]]'
- '[[SENSOR_PERSON]]'
card:
type: entities
style: |
ha-card {
box-shadow: 0px 0px 0px 0px;
}
entities:
...
But there is a bigger spacing between rows - let’s compare with an original setup:
Can anyone help me to make this spacing smaller - like a spacing between entities in the Entities card?
Update:
I found a thing which made me happy!
This magic decluttering-card can be used as an entity row - not only as a whole card!
In this case I can use something like this:
type: entities
title: ''
entities:
- type: 'custom:decluttering-card'
template: decl_travel_time__person
variables:
- SENSOR_TRAVEL_TIME: sensor.yandex_time_home_ildar
- SENSOR_PERSON: person.ildar
- type: 'custom:decluttering-card'
template: decl_travel_time__person
variables:
- SENSOR_TRAVEL_TIME: sensor.yandex_time_home_irina
- SENSOR_PERSON: person.irina
But for my particular case I will have to put this “entity rows” inside config-template-card - to use a templating feature.
First of all: thank you for an amazing HA card, just what I have always needed!
I’m facing a problem that I hope that someone with more YAML knowledge than me could help me with. I have this decluttering_template, with a couple of default values:
smart-light:
default:
- color1: '#000'
- color2: '#222'
- color3: '#444'
element:
type: image
image: '[[image-url]]'
entity: '[[entity]]'
style:
top: '[[top]]'
left: '[[left]]'
width: '[[width]]'
height: auto
background-color: |
{% set temp = 'states['[[entity]]'].attributes.color_temp %}
{% if temp <= 190 %}
'[[color1]]'
{% elif temp <= 227 %}
'[[color2]]'
{% elif temp <= 264 %}
'[[color3]]'
{% else %}
'transparent'
{% endif %}
action: none
tap_action:
action: none
hold_action:
action: none
The background-color part of the style block is where my problem is. Have tried changing:
background-color: |
to:
background-color: |-
and
background-color: >
…but without luck. Unfortunately, the YAML is not strong with this one.
I’m a javascript developer myself and had this as a javascript function in my main full dashboard view at first, but since it’s being reused a lot I wanted to break it out.
I’m using Config Template Card to write JS in lovelace, but since the above code is an image element inside a picture elements card, I can’t use the config template card within my decluttering template, which was my inital idea.
Throwing this out here and hope that a YAML Yoda walks by and spot my obvious mistakes 
Thank you in advance!
// Jens.
Why do you have jinja2 in your card? This is just not possible.
Edit: This is with card-mod right?
Edit2:
This should work
background-color: |
{% set temp = states['[[entity]]'].attributes.color_temp %}
{% if temp <= 190 %}
'[[color1]]'
{% elif temp <= 227 %}
'[[color2]]'
{% elif temp <= 264 %}
'[[color3]]'
{% else %}
'transparent'
{% endif %}
Hey, thanks for your reply!
The thing is, the structure of my files is this:
- A dashboard with a yaml config for the view with the card-mod card containing a picture-element card.
- An !include with the decluttering templates
- Decluttering template called within an image element child of the picture element card
So, since I can’t use the config template with variables set within my decluttering template (since the picture element card only supports elements, not card), I need to write it with jinja2 (which I apparently wrongly referred to as YAML).
In your solution above, I don’t see a difference to my code which doesn’t seem to work? Or have I missed something?