Lovelace: Decluttering Card

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).
Update 29.11.24 - it is possible in some cases, see below.


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, …
Update 29.11.24 - it is possible in some cases, see below.


Update 29.11.24:
There is a way to address:
– a particular element of an input dictionary,
– a particular element of an input list,
only in cards supporting jinja.

test_decl_pass_complex_to_markdown:
  default:
    - LIST:
        - sun.sun
        - person.ildar
    - DICT:
        xxx: yyy
        aaa: bbb 123
  card:
    type: markdown
    LIST: '[[LIST]]'
    DICT: '[[DICT]]'
    content: >-
      {% set LIST = config.LIST -%}
      {%- set DICT = config.DICT -%}
      list[0]={{LIST[0]}}{{"\n"}}
      list[1]={{LIST[1]}}{{"\n"}}
      dict[xxx]={{DICT.xxx}}{{"\n"}}
      dict[aaa]={{DICT.aaa}}{{"\n"}}
      xxx
  - type: custom:decluttering-card
    template: test_decl_pass_complex_to_markdown
  - type: custom:decluttering-card
    template: test_decl_pass_complex_to_markdown
    variables:
      - LIST:
          - entity: sensor.season
            name: season xxx
          - entity: person.mama
            name: mmmm
      - DICT:
          xxx: xyz 456
          aaa: zzz

Result:
image
Note a “LIST: '[[LIST]]'” & “DICT: '[[DICT]]'” lines to create fictitious options which are then addressed in a template.

6 Likes