Is there any way to use a template but omit certain variables that are part of the template? In other words, when I am creating a card, do I have the option to use “some” of the variables? If so, how do I structure the card? TIA!
Just omit them? Or, use a default value if not set?
Yes, a default value can be set. Not sure omitting works without using the default and other code to handle it.
I’d like to omit one of the variables that’s in the template.
Not sure that really works by default. The whole idea is to set variables (or defaults).
So, you may need added code to handle the ‘omitted’ variable.
Hi
i have found this post, i have issues with my icon , i wanit to change based on the state, so i did like your example, i removed the intent, but it doesnt provide me an icon? what am i missing here?
i dont see any error on the console
template: button
variables:
- entity: cover.velux_links
- name: Velux Links
#- icon: window-shutter
- icon: >-
{% if is_state('cover.velux_links','open') %}
window-shutter-open
{% else %}
window-shutter
{% endif %}
if i do like below, i indeed see this error
- type: custom:decluttering-card
template: button
variables:
- entity: cover.velux_links
- name: Velux Links
#- icon: window-shutter
- icon: >-
{% if is_state('cover.velux_links','open') %}
window-shutter-open
{% else %}
window-shutter
{% endif %}
also workaround doesnt work:
- icon: "
{% if is_state('cover.velux_links','open') %}
window-shutter-open
{% else %}
window-shutter
{% endif %}
"
ONly this works when i put it static:
template: button
variables:
- entity: cover.velux_links
- name: Velux Links
- icon: window-shutter
My card template is like below:
card:
type: custom:button-card
name: '[[name]]'
deep_press: false
icon: 'mdi:[[icon]]'
With more and more recent emphasis on tooling for building things in the UI, is anyone aware of anything on the HA roadmap allowing “include” or something similar in the “storage”-based dashboards?
I like being able to drag-and-drop chunks, and see quick previews of what I’m messing with, but I also want to not have to repeat myself all over the place, and make minor changes in multiple places because it’s all copy/paste.
I don’t even know how to search for this kind of thing in the Issues on Github. I assume it would be in the “frontend” repo?
Keywords like “dashboard”, “yaml”, “storage”, and “include” show up in far too many items for totally unrelated reasons. 
1 Like
I’d love to see some additional means of reusing dashboard elements built into Lovelace.
In the meantime, I forked decluttering card to add support for the visual editor so it’s a little easier to make templates for cards, rows, and other elements wherever I need them.
I’m hoping that my changes will be merged upstream eventually but for now feel free to use my fork if you find it useful.
5 Likes
Hi, need some help. I successfully used decluttering card for full card templates but here for an element it doesn’t work.
Here is what I want to achieve:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb
entity: light.test1
- type: template
tap_action:
action: toggle
icon: mdi:lamp
entity: light.test2
- type: template
tap_action:
action: toggle
icon: mdi:vacuum
entity: automation.start_vacuum
Pic:
So I made this:
decluttering_templates:
test:
element:
type: template
tap_action:
action: toggle
icon: mdi:lamp
entity: light.test2
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:lightbulb
entity: light.test1
- type: custom:decluttering-card
template: test
- type: template
tap_action:
action: toggle
icon: mdi:vacuum
entity: automation.start_vacuum
But I obtain this:
It insert a blank space between the first and third element…
I have missed something ?
Thank for your help.
i just wonder about the whole state of the decluttering card? Is this card “official” depricated?
Why would that question be asked? I don’t see anything that would make me think that.
I don’t think you can get a decluttering template under a mushroom card. You can just make a new template for mushroom chips…
template:
decluttering_templates:
chips_template:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: '[[icon_1]]'
entity: '[[entity_1]]'
- type: template
tap_action:
action: toggle
icon: '[[icon_2]]'
entity: '[[entity_2]]'
- type: template
tap_action:
action: toggle
icon: '[[icon_3]]'
entity: '[[entity_3]]'
card:
type: custom:decluttering-card
template: chips_template
variables:
- icon_1: mdi:lamp
- entity_1: light.office_lamp_bulb
- icon_2: mdi:lightbulb
- entity_2: light.office_ripple_mood_light
- icon_3: mdi:robot
- entity_3: automation.guest_mode_notify
Agree. Decluttering card is a card. Not a chip.
1 Like
Hello everyone,
just found out that Decluttering Card is exactly what I am searching for.
However, I just don’t get it how to install it.
I’ve downloaded the custom card from HACS and I do see some new files:
I went to the Lovelace frontend I want to add the cards and pressed:
There I added the following lines on top before the “views” node:
resources:
- url: /local/decluttering-card.js
type: module
decluttering_templates:
valve_template:
card:
type: custom:button-card
entity: '[[valve_name]]'
icon: mdi:heating-coil
Then I tried to test the template and add a custom card:
type: custom:decluttering-card
template: valve_template
variables:
- valve_name: switch.wb_ventil_fb
and get:
I’ve read so much articles and tutorials but I still have no idea what I am missing. I know that there is or was something like the lovelace-ui.yaml but as far as I understand, this is just optional if I don’t want to add the template directly in the Raw-Configuration Editor.
I am wondering if the path /local/decluttering-card.js may be incorrect? I do see this file in vs-code unter a different path. But no idea how to define this path correctly.
And maybe it’s also something about this ressource manager:
where JS Modules can be added.
Again same problem: No idea how to define the path.
Hope someone can give me the missing hint. I really want this feature. 
PS:
Just found the js file under ressources.
Maybe I have a different problem?
you are using storage mod, you don’t have to set resources to yaml. resources is automatically added via hacs.
remove this
resources:
- url: /local/decluttering-card.js
type: module
Hello,
Did you ever come up with a solution to this?
I solved it with decluttering + custom-button (custom-button is “transparent”). You can change both the main card, and the items, and you can have individual condition for each item.
- Decluttering template:
Code
decluttering_templates:
my_entities_plus:
default:
- CARD:
type: entities
entities: '[[[ return variables.z_items; ]]]'
- ITEMS: []
card:
type: custom:button-card
show_icon: false
show_name: false
show_state: false
styles:
card:
- border: none
- margin: 0
- padding: 0
grid:
- grid-template-areas: |
"inner_card"
tap_action:
action: none
variables:
items: '[[ITEMS]]'
z_items: |
[[[
let x = variables.items.filter(el => typeof el.js_cond === typeof undefined || el.js_cond);
x.map(el => {if (el.js_cond) delete el.js_cond; return el});
return x;
]]]
custom_fields:
inner_card:
card: '[[CARD]]'
- Examples
a) empty entities card (pointless but works)
type: custom:decluttering-card
template: my_entities_plus
b) entities card redefined (templated title), with 2 rows/ITEMS; second row shows only if last digit of sun elevation is an even number; it’s done by defining optional field for that entity: js_cond with javascript code that should return true or false.
type: custom:decluttering-card
template: my_entities_plus
variables:
- CARD:
type: entities
entities: "[[[ return variables.z_items; ]]]"
title: "[[[ return states['sun.sun'].state ]]]"
- ITEMS:
- entity: sun.sun
name: "[[[ return states['sun.sun'].attributes.elevation; ]]]"
- entity: sensor.sun_next_dawn
js_cond: "
[[[
let x = `${states['sun.sun'].attributes.elevation}`;
let lastDigit = parseInt(x.slice(-1));
return lastDigit % 2 === 0;
]]]"
c) CARD changed to heading card, ITEMS are now badges
type: custom:decluttering-card
template: my_entities_plus
variables:
- CARD:
type: heading
badges: "[[[ return variables.z_items; ]]]"
heading: "[[[ return `hosting ${variables.z_items.length} items!`; ]]]"
- ITEMS:
- entity: sun.sun
name: "[[[ return `${states['sun.sun'].attributes.elevation}`; ]]]"
state_content: name
- entity: sun.sun
name: Hello there!
state_content: name
I tried to add a decluttering card template in my configuration.yaml for testing. But I get a configuration warniung.
Integration ‘decluttering_templates’ not found.
What’s missing or that’s my fault. Was using HACS for the installation of decluttering-cards
Best regards Christian
- For yaml-mode dashboard - this.
- For storage-mode dashboards - all templates should be added in “raw config editor”:
1 Like