Lovelace: Decluttering Card

Does anyone know if jinja can be used in the default values?
For example:

 custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: {{ state_attr('[[light-entity]]','friendly_name') }}
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'

Damn, I just figured it out.
Just leave the name: null

Though it doesn’t look like jinja can be used in the default values. - Lovelace: Decluttering Card - #340 by Ildar_Gabdullin

decluttering_templates:
  custom_light_card_template:
    default:
      - icon: mdi:lightbulb
      - name: null
    card:
      type: custom:vertical-stack-in-card
      style: |
        :host {
        padding-left:0px;
        var(--card-background-color)
        }
      styles:
        '--chip-box-shadow': none
        '--chip-background': none
        '--chip-spacing': 0
      cards:
        - type: custom:mushroom-chips-card
          alignment: justify
          chips:
            - type: entity
              entity: '[[energy-entity]]'
              icon_color: '[[color]]'
        - type: custom:mushroom-light-card
          entity: '[[light-entity]]'
          icon: '[[icon]]'
          name: '[[name]]'

Passing a value into a template
(a small tutorial)

What types of values are considered:
– string (incl. multiline)
– jinjia template
– jinjia template which is used INSIDE another jinjia template
– card-mod style
– dictionary
– list


1. String:

1.1. A simple case - passing a value of some option:

decl_test_var_string:
  default:
    - VALUE: xxx
  card:
    type: entities
    entities:
      - entity: sun.sun
        name: '[[VALUE]]'
      - type: custom:decluttering-card
        template: decl_test_var_string

      - type: custom:decluttering-card
        template: decl_test_var_string
        variables:
          - VALUE: yyy

image

1.2. Passing a multiline string:
Need to use “\n” as line breakers:

decl_test_var_string_multiline:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: '[[VALUE]]'
      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: xxx \n yyy \n zzz

image

But this does NOT work - using a pipe “|” to break a line:

      - type: custom:decluttering-card
        template: decl_test_var_string_multiline
        variables:
          - VALUE: |
              xxx
              yyy
              zzz

1.3. Passing a string into a string:

decl_test_var_string_into_string:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: >-
      String with a string: [[VALUE]]
      - type: custom:decluttering-card
        template: decl_test_var_string_into_string

      - type: custom:decluttering-card
        template: decl_test_var_string_into_string
        variables:
          - VALUE: yyy

image


2. jinjia template:
A template may be passed into a card which supports jinjia for some it’s option, like a “markdown” card.

decl_test_var_template:
  default:
    - VALUE: xxx
  card:
    type: markdown
    content: '[[VALUE]]'

2.1. Simple templates:

      - type: custom:decluttering-card
        template: decl_test_var_template

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: '{% set STATE = states(''sun.sun'') -%} {{STATE}}'

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set STATE = states('sun.sun') -%}
              {{STATE}}

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}

image

2.2. Multiline template:
This does NOT work - with using a pipe “|” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: |-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              Hello!

You need to use “\n” or “< br >” to “break” a line:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              \n
              Hello!

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% set VALUE = states('sun.sun') -%}
              Current is {{VALUE}}
              <br>
              Hello!

image

2.3. Template with conditions.
Actually all templates are similar, there is no “templates w/o conditions”, “templates with conditions”, … But this example is provided to demonstrate some trick.

This code works:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

image

But this does not - see indents inside a template:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: >-
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

These indents help to structure templates, they are not supposed to cause any troubles.
Although this code works fine in “Dev tools → Template” and everywhere in Lovelace, these “indents” cause an error in this particular case (described here, here).
But there is a workaround - place the whole template into double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

3. jinjia template which is used INSIDE another jinjia template:
Consider this code:

{% set STATE = states(xxxx) -%}
{%- if STATE | int(default=0) < .... -%}
  {{ ... }}
{%- else -%}
  {{ ... }}
{%- endif %}

Assume the 1st line is

{% set STATE = '[[VALUE]]' -%}

where “VALUE” is a jinjia template "{% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }}" - and this code cannot work since templates cannot be passed into templates:

{% set STATE = {% set SENSOR = 'sun.sun' -%} {{ states(SENSOR) }} -%}

Luckily we got a new jinjia extension "ct_eval()" (check here & here) which “evaluates text as a template”.
Consider this decluttering-template:

decl_test_var_template_into_template:
  default:
    - VALUE: >-
        {{states('sun.sun')}}
  card:
    type: markdown
    content: |-
      {% set STATE = ct_eval("[[VALUE]]") -%}
      Current state is {{STATE}}
      Zone state is {{states('zone.home')}}
      - type: custom:decluttering-card
        template: decl_test_var_template_into_template

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: yyy

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: '{{states(''person.ildar'')}}'

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {{states('person.ildar')}}

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: >-
              {% if true -%}
              {{states('zone.home')}}
              {%- else -%}
              {{states('sun.sun')}}
              {%- endif %}

image

This code with added indentations does not work - same reasons as it was described above:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: |-
              {% if true -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}

But workaround is same - double quotation marks:

      - type: custom:decluttering-card
        template: decl_test_var_template_into_template
        variables:
          - VALUE: "
              {% if false -%}
                {{states('zone.home')}}
              {%- else -%}
                {{states('sun.sun')}}
              {%- endif %}
              "

4. card-mod style:

decl_test_var_style:
  default:
    - STYLE: 'ha-card { color: magenta; }'
  card:
    type: entities
    title: Title
    entities:
      - entity: sun.sun
        secondary_info: last-changed
      - entity: sensor.season
        secondary_info: last-changed
      - entity: person.ildar
        secondary_info: last-changed
      - entity: sensor.processor_use
        secondary_info: last-changed
    card_mod:
      style: '[[STYLE]]'
      - type: custom:decluttering-card
        template: decl_test_var_style
      - type: custom:decluttering-card
        template: decl_test_var_style
        variables:
          - STYLE:
              hui-simple-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: red !important;
                  }
              hui-sensor-entity-row:
                $ hui-generic-entity-row $ .info.pointer .secondary: |
                  ha-relative-time {
                    color: orange !important;
                  }
              .: |
                .card-header .name {
                  color: yellow;
                } 
                ha-card {
                  background: lightblue;
                }


5. Dictionary:

decl_test_var_dict:
  default:
    - ENTITY:
        entity: zone.home
        name: my zone
  card:
    type: entities
    entities:
      - sun.sun
      - '[[ENTITY]]'
      - type: custom:decluttering-card
        template: decl_test_var_dict

      - type: custom:decluttering-card
        template: decl_test_var_dict
        variables:
          - ENTITY:
              entity: weather.home_met
              name: Weather (home)

image

Unfortunately, I do not know a way to add an element(s) into a dictionary - consider this example:
– a decluttering-template is an Entities card;
– one row is defined by a dictionary ({‘entity’: ‘sun.sun’, ‘name’:“my sun”});
– an input variable is a dictionary with other options ({‘type’: ‘attribute’, ‘attribute’:“elevation”});
– you can use an input variable-dictionary to define the WHOLE row and you cannot merge two dictionaries to set additional options.

Also, I do not know a way to address elements inside a dictionary-variable like "VALUE['subvalue_a']" or "VALUE.subvalue_a"(although similar operations are available for dictionaries, but not inside the decluttering-card for variables).


6. Lists:

decl_test_var_list:
  default:
    - ENTITIES:
        - sun.sun
        - zone.home
  card:
    type: entities
    entities: '[[ENTITIES]]'
      - type: custom:decluttering-card
        template: decl_test_var_list

      - type: custom:decluttering-card
        template: decl_test_var_list
        variables:
          - ENTITIES:
              - entity: weather.home_met
                name: Weather (home)
              - entity: sensor.processor_use
                name: CPU load

image

Unfortunately I do not know a way to address an element in the list like "VALUE[0]" - consider this example:
– a card is an Entities card;
– an input variable-list contains a list of entities;
– you cannot use 1st entity for the 1st row, 2nd element - for the 2nd row, …

1 Like

thx.
consider this grid:

    - type: grid
      columns: 4
      cards:

#decluttering causes first grid column to be empty

#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_1
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_2
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_3
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_4
#
#        - type: custom:decluttering-card
#          template: celebration
#          variables:
#            - event: verjaardag_5
#
#          etcetcetc

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_1
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_1

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_2
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_2

        - type: conditional
          conditions:
            - entity: binary_sensor.verjaardag_3
              state: 'on'
          card:
            type: custom:button-card
            template: button_feest_alert
            entity: binary_sensor.verjaardag_3
etcetc

and this decluttering_template:

card:
  type: conditional
  conditions:
    - entity: binary_sensor.[[event]]
      state: 'on'
  card:
    type: custom:button-card
    template: button_feest_alert
    entity: binary_sensor.[[event]]

ive seen this in more spots in my config, but always shrug and make it work another way. this seems too straightforward not to have another look though, so if you can spot an issue: please!

Dont think you mentioned this in your wonderful post (thank you!) above, but I was pleasantly surprised the other day we can even drop in a complete entities list from a calling card.

Consider this deculttering, and especially note the bottom

  entities:
    '[[entities]]'

in:

default:
  - trigger_state: 'on'
card:
  type: picture-glance
  card_mod:
    style: |
      ha-card {
        border: {{'1em solid red' if is_state('[[trigger_id]]','[[trigger_state]]')
                else 'none'}};
      }
      .box div:nth-child(1) .wrapper {
        pointer-events: none;
      }
  entity: '[[main_id]]'
#   title: '[[title]]'
  show_state: true
#   state_color: true # picture-glance does Not use state_color!! 
  state_filter:
    'off': grayscale(80%)
    'unavailable': grayscale(100%)
#   area: '[[area]]'
  image: /local/images/areas/[[image]]
  aspect_ratio: 100%
  tap_action: none
  hold_action:
    action: navigate
    navigation_path: /ui-sub-views/[[path]]
  double_tap_action:
    action: toggle
  entities:
    '[[entities]]'

and call this with something like:

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.laundry_ceiling
          - trigger_id: binary_sensor.laundry_sensor_motion
          - image: bijkeuken.jpg
          - path: bijkeuken
# this complete entities object gets injected 
          - entities:
              - entity: sensor.laundry_sensor_temperature
              - entity: sensor.laundry_sensor_illuminance
              - entity: binary_sensor.back_door
              - entity: switch.boiler_bijkeuken
                <<: &none
                  tap_action:
                    action: none
                  hold_action:
                    action: none
                  double_tap_action:
                    action: none

      - type: custom:decluttering-card
        template: picture_glance_area
        variables:
          - main_id: light.patchboard_attic
          - trigger_id: binary_sensor.lekkage_op_zolder
          - image: zolder_living_klein.jpg
          - path: zolder
          - entities:
              - entity: sensor.attic_sensor_temperature
              - entity: sensor.attic_sensor_illuminance
              - entity: binary_sensor.smart_co_alarm_zolder_carbon_monoxide_sensor
              - entity: binary_sensor.attic_heater_flood_sensor_water_alarm_water_leak_detected
              - entity: binary_sensor.attic_flood_sensor_water_alarm_water_leak_detected
              - entity: switch.cv_zolder
                <<: *none

I never realized that would work, but needed to find a way to have the same decluttering and take care of different entities listings… it simply does!

(only thing this does Not do is color the icons using state_color: true but that is an issue with the picture-glance card, and Ive filed a FR/discussion to add that, really ugly those whitish icons everywhere… but, besides the point for this topic :wink: )

This is a “list-variable” case described in my post.
In my setup I usually use this notation (probably gives same yaml output):

  entities: '[[entities]]'

even this

  entities: '[[LIST_ENTITIES]]'

to prevent mixing with options’ names, where “LIST_”, “VALUE_”, “INPUT_”, “SENSOR_”, “DICT_” prefixes used to define a type of a variable (and “STYLE” is always for card-mod style).

I’ll check it tonight.

right, I missed you mentioning it, its a big post :wink: I now see it under 6.
most important part for me is that we can change the number of entities and are not fixed to a predefined list length.

and yes the position is mostly on the same line. However, I always mimic a verbose post, and since we use that list notation

entities:
  - entity1
  - entity2

I mimicked that with:

  entities:
    '[[entities]]'

Aware you use the CAPS in your vars :wink: It’s just not for my taste, and of no further consequence.

thanks!

Got it

                name: >-
                  [[[ return
                  states['input_number.autolock_delay_[[subject]]'].state; ]]]
         

My statement was a bit hasty, actually.
It depends:
– a template for a “default” value of some variable cannot be resolved BEFORE using this variable;
– it may be resolved WHEN using this variable: if an option supports templates - then the template is resolved, otherwise - no.
Consider this decluttering-template:

  decl_test_var_template_2:
    default:
      - VALUE: >-
           {{ states('sun.sun') }}
    card:
      type: vertical-stack
      cards:
        - type: markdown
          content: '[[VALUE]]'
        - type: entities
          title: '[[VALUE]]'
          entities:
            - zone.home

where the variable is used for the “content” option (does support jinjia) and for the “title” option (does not support jinjia).

type: vertical-stack
cards:
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: xxx
      
  - type: custom:decluttering-card
    template: decl_test_var_template_2
    variables:
      - VALUE: >-
          {{ states('device_tracker.iiyama') }}

Check this long read also.

Template:

  decl_test_var_marius:
    card:
      type: conditional
      conditions:
        - entity: input_boolean.[[event]]
          state: 'on'
      card:
        type: custom:button-card
        size: 20%
        entity: input_boolean.[[event]]

Card:

type: vertical-stack
cards:
  - type: entities
    entities:
      - input_boolean.test_boolean
      - input_boolean.test_boolean_2
      ...
      - input_boolean.test_boolean_8

  - type: grid
    columns: 4
    square: false
    cards:
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean
      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_2

      ...

      - type: custom:decluttering-card
        template: decl_test_var_marius
        variables:
          - event: test_boolean_8

So far seems OK.

Now comment the “square” option - and we got a gap:

And yes - this does not happen w/o decluttering-card:

  - type: grid
    columns: 4
    _square: false
    cards:
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_2
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_2
      ...
      - type: conditional
        conditions:
          - entity: input_boolean.test_boolean_8
            state: 'on'
        card:
          type: custom:button-card
          size: 20%
          entity: input_boolean.test_boolean_8

Cannot explain it…

thanks for confirming…

I had not noticed the square option difference, will have a look. It makes it even stranger, because all of my buttons Are squared themselves via their setting aspect_ratio: 1. (Moreover, the square: true option is default, so I never use it unless needing square: false … Realize you used non squared buttons above, just stating the obvious probably) In any case, it should Not make a difference in my config…?

btw, I had another Grid/Decluttering issue some time ago: decluttering inside a core grid card behaves oddly, changes size of the grid tile · Issue #59 · custom-cards/decluttering-card · GitHub
They just dont play nicely

found another issue. variables this.entity_id in an auto-entities config not being handled by the decluttering card.

consider a regular entities with decluttering:

  - type: entities
    entities:

      - type: custom:decluttering-card
        template: event_date
        variables:
          - entity: sensor.verjaardag_me

and decluttering:

card:
  type: custom:template-entity-row
  entity: '[[entity]]'
  state: >
    {% if states[config.entity] is not none %}
    {{states(config.entity)}} {{state_attr(config.entity,'unit_of_measurement')}}
    {% else %} Not yet set
    {% endif %}
  secondary: >
    {% if states[config.entity] is not none %}
    {{state_attr('[[entity]]','type')}}: {{state_attr('[[entity]]','original_date')}}
    {% else %} Not yet set
    {% endif %}

showing perfectly in dashboard, including the secondary line based on config.entity (which is the template entity row translation of the cards entity_id.

now, setting this in an auto-entities, so I dont have to list all events manually, and, more importantly, can sort them based on state:

  - type: custom:auto-entities
    card:
      type: entities
    filter:
      include:
        - entity_id: sensor.verjaardag*
        - entity_id: sensor.ontmoetings*
        - entity_id: sensor.trouwdag
      options:
        type: custom:decluttering-card
        template: event_date
        variables:
          - entity: this.entity_id
    sort:
      method: state
      numeric: true

it works perfectly fine, and sorts all events. However, there is no secondary line!

Ofc I also tries to use

        variables:
          - entity: config.entity

but that has no result at all either.

to test the card setup itself, I also entered a true entity_id like in the verbose config. No secondary line either!

yet again a decluttering-card anomaly? How come it recognizes the entity in the auto-entities, even without setting the variables:

      options:
        type: custom:decluttering-card
        template: event_date
#         variables:
#           - entity: this.entity_id

but does not use it for the secondary_line…

Ive also changed the secondary line template to:

  secondary: >
    {% if states[config.entity] is not none %}
    {{state_attr(config.entity,'type')}}: {{state_attr(config.entity,'original_date')}}
    {% else %} Not yet set
    {% endif %}

and still, no result using the decluttering card

heck, it doesnt even consider the options with decluttering card, I can take that out completely, and the listing remains identical… huh?

UPDATE

it was a user error…
I missed an Asterix after sensor.trouwdag, and had to copy&paste the options section on all inured filters:

    - type: custom:auto-entities
      card:
        type: entities
      filter:
        include:
          - entity_id: sensor.verjaardag*
            <<: &options
              options:
                type: custom:decluttering-card
                template: event_date
                variables:
                  - entity: this.entity_id
          - entity_id: sensor.ontmoetings*
            <<: *options
          - entity_id: sensor.trouwdag*
            <<: *options
      sort:
        method: state
        numeric: true

now works as expected.

1 Like

I posted in a thread here that makes use of decluttering, not going to report everything you can read there if you like. I will likely put all this on Git as I do with other chunks of my HA interfaces.

I must say that decluttering-card is one of the best things I have ever encountered. I have nothing but respect for @RomRider and what this allows. One dashboard reduced by over 20 times the lines of code because of it.

1 Like

Is it possible to assign a value to “state” ?
Here is my template. The assignment of a to “label” work fine, but I get an error message for the assignment to “state”.
Is this a limitation of decluttering of Home Assistant?

decluttering_templates:
  flag_tile:
    card:
      type: custom:button-card
      entity: '[[v_ent]]'
      show_icon: false
      name: '[[v_name]]'
      show_state: true
      state: >-
        [[[
        var id =  states['[[v_from]]'].state;
        return id
        ]]]
      show_label: true
      label: >-
        [[[
        var id =  states['[[v_from]]'].state;
        return id + " my stuff"
        ]]]

I would take an in depth look at Lovelace: Decluttering Card - #395 by Ildar_Gabdullin

I find it invaluable information to understand things. I would think you pass in the whole template that makes the state and not try to pass in just the [[v_from]]. So (untested) like below, refer to example 2 in the link:

variables:
    - v_from_state: '{{states('your_v_from_entity_here').state }}'

And then in the decluttering template you just have

state: '[[v_from_state]]'

But it is possible that custom:button-card templates are colliding in Javascript, not sure. That example uses jinja and not javascript templates

Thank you your quick replay and suggestion. I tested it and could not get it to work.
However, looking at the link, I tough of a different solution; breaking the ‘label’ in two lines. First on having the from date and the second having the to date.
Thanks

The decluttering card appears to be broken with Core 2023.4.0.
There were some changes to the database. I wonder if that’s why.
At any rate all of my decluttering card - based buttons display error messages indicating a null entity.

did you update it? There was a fix released yesterday. Working perfectly here

Everything is updated as of today.
(Which “it” are you referring to?
the decluttering card?)