Lovelace: Decluttering Card

[Valiceemo (Richard)]

I cannot get this card to work.
I get the Custom element doesn't exist error.
Installed via HACS
lovelace-resources.yaml contains the reference:

- url: /hacsfiles/decluttering-card/decluttering-card.js
  type: module

I manage my GUI ‘manually’ via the yaml files, so my ui-lovelace.yaml contains and include:

title: My House
views: !include_dir_list lovelace/

I then have a folder lovelace with multiple yaml files in.
As I understand the templates have to be in the root of a yaml…so i changed ui-lovelace.yaml to include the basic example from the Git page

title: My House

decluttering_templates:
  my_first_template:     # This is the name of a template
    default:
      - icon: fire
    card:
      type: custom:button-card
      name: '[[name]]'
      icon: 'mdi:[[icon]]'

views: !include_dir_list lovelace/

I then added the below to one of my yamls in /config/lovelace/example.yaml

  - type: custom:decluttering-card
    template: my_first_template
    variables:
      - name: Test Button
      - icon: arrow-up

This results in the error. I have restarted HA, and reloaded resources multiple times.
What am I missing?
All other custom cards installed in this way work OK.

[Mariusthvdb (Marius)]

trying to default a non-set variable to another variable makes for an issue…

default:
  - action: null
  - name: '[[entity]]'
card:
  type: custom:mod-card
  card_mod:
    style: |
      ha-card {
        z-index: 7;
        }
  card:
    type: custom:restriction-card
    row: true
    card:
      entity: '[[entity]]'
      secondary_info: last-changed
      state_color: true
      action_name: '[[action]]'
    restrictions:
      confirm:
        text: Weet je het zeker dat je de [[name]] wil schakelen?

works fine when the card has the ‘name’ variable defined:

  - type: custom:decluttering-card
    template: restrict_row_confirm
    variables:
      - entity: switch.wake_synology_nas
      - name: Synology Nas

however, when ‘name’ is not set:

            - type: custom:decluttering-card
              template: restrict_row_confirm
              variables:
                - entity: button.diskstation_reboot

it simply passes the string:

is there really no way around this? to get the entity into that line?

[RienduPre]

Hi I have been reading the forum and troubleshooting for 2 days but cannot get this simple issue to be solved.

How can I troubleshoot this step by step?

Thanks,
Rien

[ASNNetworks]

That’s because you missed the first step: defining the templates. Your Dashboard doesn’t know what ‘header_template’ is, since you don’t have it configured for the dashboard.

Keep in mind, if you have multiple Dashboards, then each Dashboard needs to have it. You can create a separate .yaml file where you declare all templates, and then point every Dashboard to that one file, like this: Lovelace: Decluttering Card - #297 by ASNNetworks

See the Readme, it’s all explained pretty straight forward.

GitHub - custom-cards/decluttering-card: 🧹 Declutter your lovelace...

[RienduPre]

Thanks for the quick answer.

This is my ui-lovelace.yaml

decluttering_templates:
  !include lovelace/decluttering_templates/decluttering_templates.yaml

sak_sys_templates:
  !include www/community/swiss-army-knife-card/sak_templates.yaml

sak_user_templates:
  !include lovelace/sak_templates/sak_templates.yaml

And this my decluttering_templates.yaml

header_template:
  !include sak-header-template-mw.yaml

divider_template:
  !include sak-divider-template-mw.yaml

sak_arc180_sparklinebar24_template:
  !include sak-arc180-sparklinebar24.yaml
  
sak_arc180_sparklinebar24_template_tpl:
  !include sak-arc180-sparklinebar24-tpl.yaml  

sak_light_button_template_tpl_rc:
  !include sak-light-button-tpl.yaml  

sak_light_button_template_nm_tpl:
  !include sak-light-button-nm-tpl.yaml 

sak_sensor_history_template_nm_tpl:
  !include sak-sensor-history-nm-tpl.yaml

I don’t see what I’m missing still.

[ASNNetworks]

In order to properly troubleshoot, you need to make it simple to see what does work. Just use the base for now, where you simply use header_templates and declare that code in your Dashboard. Then move it to a .yaml file, if that works then go further till it doesn’t.

My guess is that using !include within !include might be what’s messing it up. Make sure the actual paths are correct. So you have a folder called lovelace withing your root and in that folder you have decluttering_templates as a folder and in that folder you have decluttering_templates.yaml. And where are the files like ak-header-template-mw.yaml located? Try using the full paths for all locations when using !include (which all start with /config) , just to be sure.

That’s why in your case I would start simple to make sure you have a working card and then gradually start moving them to separate yamls and redirect them withing folders etc.

Also, not sure what your goal is with these lines, but they don’t do anything with decluttering_templates. Perhaps you use them for other things, but I just want to make sure we are looking at it from the same angle.

sak_sys_templates:
  !include www/community/swiss-army-knife-card/sak_templates.yaml

sak_user_templates:
  !include lovelace/sak_templates/sak_templates.yaml

[Valdorama]

I have a similar issue. I’m trying to use a template to set the value of a default variable, like so:

default:
      - unit: '{{ state_attr(''[[entity]]'',''unit_of_measurement'') }}'

When I don’t provide a value for ‘unit’, on the target card it’s value just shows as ‘None’.

Is this not possible?

[Ildar_Gabdullin]

Jinjia templates are not supported for default values.

[AleXSR700 (Alex)]

I have a quick question coming from another discussion here.

Does the decluttering card always replace the entire card or can it be used to only replace one value: key pair of a card?

So e.g. if I have a card where I want to vary only one of the sub-options but do everything else manually in the card, is that possible?

An example:
I want to only define options: and the vsriables below that using decluttering card whilst defining everything else in the dashboard’s card.

  filter:
    include:
      - name: |-
          ${ 
            if (states['input_select.dropdown_wildcards'].state == 'Power' && states['input_select.dropdown_entities'].state == '-- - --')
              { '* ENERGY Power*' } 
            else if (states['input_select.dropdown_wildcards'].state == 'Light' && states['input_select.dropdown_entities'].state == '-- - --')
              {  '*Light* Power*'  } 
            else 
              { states['input_select.dropdown_wildcards'].state + '*' }
            }
        area: >-
          ${ states['input_select.dropdown_areas'].state == '-- - --' ? '*' :
          states['input_select.dropdown_areas'].state }
        options:      # only want to vary this with the sub-options
          yaxis_id: first
          stroke_width: 2
          group_by:
            func: raw
          type: line
          opacity: 1
          curve: stepline
          fill_raw: last
          show:
            extremas: true
            datalabels: false

[DirkStorck (DST73)]

Hi, can I use this card with not yaml mode?
I have put a template definition at the top of the file in raw-modus of my dashboard and on another place in that dashboard I used that template but that I get this error

the card is installed correctly I think

Thanks!

[Ildar_Gabdullin]

Show how you put a definition.

[DirkStorck (DST73)]

resources:
  - url: /hacsfiles/decluttering-card/decluttering-card.js
    type: module
decluttering_templates:
  thermostat_template:
    card:
      type: custom:simple-thermostat
      entity: '[[entity_climate]]'
      sensors:
        - entity: '[[entity_batterie]]'
          name: Batterie
      layout:
        step: row
        mode:
          names: false
          icons: false
          headings: false
      header: true
      control: false
      hide:
        state: true
views:
  - theme: Backend-selected
    title: Home
    icon: mdi:home
    type: custom:horizontal-layout

and a bit later in the same file

      - type: custom:mod-card
        card_mod:
          style: |
            ha-card {
              --st-font-size-xl: 28px;
              --st-font-size-m: 20px;
              --st-font-size-title: 15px;
              --st-font-size-sensors: 13x;
              --st-spacing: 1px;
              height: 375px
            }
        card:
          type: grid
          columns: 1
          cards:
            - type: vertical-stack
              cards:
                - type: custom:decluterring-card
                  template: thermostat_template
                  variables:
                	- entity_climate: climate.thermostat_sz1
                	- entity_batterie: sensor.thermostat_sz1_batterie

[Ildar_Gabdullin]

@DirkStorck

custom:decluterring-card

Typo here.
Correct this and then check again.

[DirkStorck (DST73)]

Hi,

I have corrected the misspelling and now it works!

One last question? Can I somehow put these templates in a yaml file and include them like I could do this in yaml-mode? If yes where should I put that file and how should the import/path look like ?

Thanks for your help and a Happy X-Mas

[Ildar_Gabdullin]

@DirkStorck

Can I somehow put these templates in a yaml file and include them like I could do this in yaml-mode? If yes where should I put that file and how should the import/path look like ?

Assume this is your “dashboards” file:

dashboards:

  lovelace-main:
    mode: yaml
    title: System
    icon: mdi:xxxxxxxxxxxx
    show_in_sidebar: true
    require_admin: false
    filename: lovelace/lovelace-system.yaml

  lovelace-climate:
    mode: yaml
    title: Climate
    icon: mdi:xxxxxxxxxxx
    show_in_sidebar: true
    require_admin: false
    filename: lovelace/lovelace-climate.yaml

And these are your files for each dashboard:

### lovelace/lovelace-system.yaml
views:
  - !include views/system/view11.yaml
  - !include views/system/view12.yaml
  - !include views/system/view13.yaml
  - !include views/system/view14.yaml

### lovelace/lovelace-climate.yaml
views:
  - !include views/climate/view21.yaml
  - !include views/climate/view22.yaml
  - !include views/climate/view23.yaml
  - !include views/climate/view24.yaml

Everything is inside this tree structure:

.storage
  |_ ...
  |_ ...
lovelace
  |_ views
  |    |_ climate
  |    |    |_ view11.yaml
  |    |    |_ view12.yaml
  |    |    |_ view13.yaml
  |    |    |_ view14.yaml
  |    |_ system
  |         |_ view21.yaml
  |         |_ view22.yaml
  |         |_ view23.yaml
  |         |_ view24.yaml
  |_ lovelace-climate.yaml
  |_ lovelace-system.yaml
...
configuration.yaml

Now add a new folder “decluttering-templates” for your templates and create any tree structure inside (like “these templates are for climate only”):

lovelace
  |_ decluttering-templates
  |     |_ common
  |     |     |_ template11.yaml
  |     |     |_ template12.yaml
  |     |     |_ template13.yaml
  |     |_ network
  |           |_ template21.yaml
  |           |_ template22.yaml
  |           |_ template23.yaml
  |_ views
        |_ ...

Each file may be 1 decluttering template:

my_template:
  default:
    ...
  card:
    ...

or several templates (like “a bit different representations of same card”):

my_template_1:
  default:
    ...
  card:
    ...

my_template_2:
  default:
    ...
  card:
    ...

And place this string into each file for each dashboard:

decluttering_templates: !include_dir_merge_named templates-decluttering/
views:
  - ...

Now ALL your dashboards are sharing same templates.

Note: splitting config described here.

[DirkStorck (DST73)]

Thanks you!

So I can import decluttering templates only if I use “mode: yaml”? I can’t import a decluttering template file if I use this mode?

[Ildar_Gabdullin]

@DirkStorck

I can’t import a decluttering template file if I use this mode?

In storage mode you only may use templates defined in a “raw yaml editor”.
If you have 3 dashboards in storage mode - then the same template you need to put into each “raw yaml editor”.

[DirkStorck (DST73)]

Ok, thank you so much for your help!

[ArenaCloser]

Hey guys, if I have '[[var]]' in the decluttering template, passing a string like '14' works fine (right card), but passing '{{states("sensor.buienradar_temperature_1d")}},' produces the JSON parse error in the left card.

Then I found that passing '{{states(''sensor.buienradar_temperature_1d'')}},' (i.e. with two single apostrophes '' around the sensor name instead of one double apostrophe ") does not return this error but works as expected.

So everything works for me now but just wanted to notify here and/or ask why this behavior occurs?

[ArenaCloser]

I also have another question. Why is this code not working? It just returns the jinjia template as string.

type: custom:decluttering-card
template: weather_now_template
variables:
  - secondary: >-
      {% set buienalarm = states(''sensor.buienalarm_precipitation'')|float %}
      {% set owm = states(''sensor.openweathermap_rain'')|float %}
      {% if (buienalarm + owm)/2 > 0 %}
      {{min([buienalarm, owm])|round(1)}} tot {{max([buienalarm, owm])|round(1)} mm/h
      {% else %}
      {{states(''sensor.openweathermap_cloud_coverage'')}}% bewolkt
      {% endif %}

If I add newlines between each line in the template, I get a JSON parse error ‘unterminated string’.