You should at least post the template itself.
Otherwise it is rather difficult to help you.
1 Like
Hi,
after so many tries I need help 
I’d like to test decluttering-card starting with a simple example so:
- I've installed it using HACS (and removed and re-istalled again...)
- I can see it in /local/www/community/decluttering-card and under MY_IP:8123/config/lovelace/resources, so I suppose is well installed
- in ui-lovelace.yaml:
in the ‘resource:’ section, among others modules
..- url: /local/community/decluttering-card/decluttering-card.js
....type: module
and then
decluttering_templates:
..my_template:
....default:
......- icon: fire
......- name: TestButton
......- entity_1: switch.sonoff_02
....card:
......type: button
......tap_action:
........action: toggle
......name: '[[name]]'
......icon: 'mdi:[[icon]]'
......entity: '[[entity_1]]'
......show_name: true
......show_state: true
I’ve replaced spaces with dots to show indentation
Finally in a manual card:
- type: 'custom:decluttering-card'
..template: my_template
..variables:
....- name: Lampada verde
....- icon: arrow-up
....- entity_1: switch.sonoff_02
But it doesn’t work It get me “No card type configured”
After some days I’m hopeless, I can’t solve it. I think there a silly error but can’t find it!
One of my try was to change
- type: 'custom:decluttering-card'
with
- type: 'custom:decluttering-carde'
and I got the same error
Please help
I’m not sure why I did this with my install, but I put the decluttering-card.js file in /config/www/ and my resources section reads:
lovelace:
mode: yaml
resources:
- url: /local/decluttering-card.js
type: module
I imagine, given other entries, that if I’d done the HACS install, the .js file would be in a subfolder of local/www/community which has a shorthand of /hacsfiles/ so the resources section would read
lovelace:
mode: yaml
resources:
- url: /hacsfiles/decluttering-card/decluttering-card.js
type: module
is it still working on 2021.XX?! thanks
Decluttering-card works in 2021.12.7
i’m asking because i can have it working only in ui-lovelace.yaml and not in the other dashboards, i get “cannot read properties of undefined” error…
can anyone provide a little example of multiple dashboard settings?!
thanks
edit: ok, solved… have to declare “decluttering_template:” in each dashboard file…
If case you weren’t already, you can also use !include variable in each dashboard.yaml. This way you can have all your decluttering templates in one .yaml file and then include that one in each dashboard by using !include, like this:
decluttering_templates:
!include decluttering-card-templates.yaml
If you change a decluttering template, it will change in all your dashboards since they’re using the same decluttering file.
1 Like
Exactly. I do this and the same with my custom:button-card templates. It’s cleaner and since these are general definitions, I hardly ever edit them along with the individual button definitions (that are in my ui-lovelace.yaml file).
is it possible to achive in a template something like this?!
card_mod:
style: >-
ha-card {
{% if '[[availability]]' == 'false' %}
opacity: 0.40 !important;
pointer-events: none !important;
{% endif %}
}
where availability is defined this way
- type: 'custom:decluttering-card'
template: 'card'
variables:
- contents:
type: 'custom:decluttering-card'
template: 'thermometer'
variables:
- sensor_temperature: sensor.thermometer_temperature
- sensor_humidity: sensor.thermometer_humidity
- availability: "{{ is_state( 'sensor.thermometer_state', 'online' ) }}"
or is it better to simulate this behaviour using a “disabled” card and showing them conditionally?!
thanks
there is a big big problem of cpu usage using nested templates… let’s see what happens if i put all in one template
edit: same results using one template only… super simple template, it just encapsulates a generic_thermostat… cpu usage is 300-400% respect using generic_thermostat …
Hi
I’m using decluttering cards now quite some time
For example
- type: conditional
conditions:
- entity: binary_sensor.lampen
state: "on"
card:
type: custom:decluttering-card
template: notification_template
variables:
- name: Er zijn lampen aan!Using template :
decluttering_templates:
notification_template: # This is the name of a template
card:
type: custom:button-card
name: '[[name]]'
size: 50%
show_state: false
show_label: false
layout: icon_name
tap_action:
action: none
hold_action:
action: none
styles:
card:
- --ha-card-background: rgba(0,0,0,0.0)
- box-shadow: none
- height: 10px
name:
- font-size: 18px
- font-family: Helvetica
- justify-self: start
- font-weight: normal
grid:
- grid-template-areas: '"i n"'
- grid-template-columns: 2% 1fr
- grid-template-rows: 1frHowever, now i’m trying to do the same but instead of putting in the name “Er zijn lampen aan” , i want to count the lamps that are on.
I have a sensor for that, thats has state equal to number lights that are on.
However i dont succeed in putting that into "Er zijn (states('sensor.current_lights_on) lampen aan
Any help?
You need to use Javascript templates. You’re trying to use Jinja2 templates with button card. That doesn’t work. Most likely you used Markdown card before.
name: |
[[[
return "Er zijn " + states['sensor.current_lights_on'].state + " lampen aan";
]]]
I’m not a Javascript expert myself though. So for further help you should ask in the Button-Card thread.
1 Like
Superb thx
I’m gonna try that and seek further help if needed.
True i used markdown before
1 Like
I tried and i get this error
I asked in the custom button topic, and they say your code is correct and its probably a decluttering thing… lol
Since the code works within button-card, you should open a ticket and report this at the github repo of decluttering-card. The code itself is fine as others have confirmed. So not much else there is to do about it. Seems like decluttering-card doesn’t render Javascript somehow.
So you need to think outside the box and reverse it, which is how I use it myself. Use the variable in the template itself and only the entity in the card on lovelace. I like to keep my decluttering-card as tidy as possible and only pass through single codes (and set everything else like text strings and Javascript in the template).
Use this in your decluttering template:
name: |
[[[
return "Er zijn " + states['[[lights]]'].state + " lampen aan";
]]]
And then in the decluttering-card code:
type: custom:decluttering-card
template: notification_template
variables:
- lights: sensor.current_lights_on
This way you can use this decluttering template only for cards that need to show the current lights on.
If you have a different room, just change the entity variable to a different sensor tracking those lights and it’s set. If you want something else to show instead of current lights on, copy the template and change the variables.
1 Like
it has never done that, and it will not,. Has been asked before, when decluttering came to existence.
Decluttering card simply replaces strings (like anchors) and does not use templating itself. Its as I explained in button-card this morning: Lovelace: Button card - #6376 by Mariusthvdb
you can however, replace a string in the template, as you did above.
1 Like
Working, thx a lot !
1 Like
I cannot get this to work for some reason. I installed it via HACS and HACS placed the folder in: /www/community/decluttering-card
So, in ui-lovelace.yaml I have:
resources:
url: /local/www/community/decluttering-card/decluttering-card.js
type: module
decluttering_templates:
test_template:
card:
type: button
tap_action:
action: toggle
entity: '[[test_variable]]'
I then have a manual card added to my dashboard:
type: custom:decluttering-card
template: test_template
variables:
- test_variable: light.basement_office_light_switch
I receive the error : "Cannot read properties of undefined (reading ‘test_template’)
This doesn’t go in lovelace.yaml, but in configuration.yaml if you use YAML mode.
lovelace:
mode: yaml
resources:
Also, the path has been change a few months ago to hacsfiles instead of local/www/community. hacsfile path points to the same folder, so the location of the files is correct.
- url: /hacsfiles/decluttering-card/decluttering-card.js
type: module
After adding that you need to restart Home Assistant and then it should be loaded (or click the three dots menu (top-right) and click on Reload resources for Lovelace to pick up changes without restarting Home Assistant. You can also call lovelace.reload_resources service directly.) Sometimes it helps to clear your browser caches if a card isn’t loaded.