Lovelace card-templater card (Jinja2 card templating in Lovelace!)

I had looked at the config-template card but, since I wanted to be able to reuse the Jinja2 templates I use in the rest of Home Assistant, I decided to see if I could create a card like that which could apply Jinja2 templates Lovelace cards.

Introducing the card-templater card

https://github.com/gadgetchnnel/lovelace-card-templater

Installation

This requires card-tools to be installed, check the link for details on installing this if you don’t have it installed.

This card can either be installed using custom_updater or manually.

With custom_updater

resources:
  - url: /customcards/github/gadgetchnnel/lovelace-card-templater.js?track=true
    type: js

Manually

Download the lovelace-text-input-row.js and put it somewhere under config folder/www

resources:
  - url: local/path/to/file/lovelace-card-templater.js?v=0.0.2
    type: js

Options

Name Type Optional/Required Description
type string Required custom:card-templater
card object Required The card to display (see below about templating)
entities list Required Entities to watch for changes (can also be used to template entity states, see below)

Card templating

The card option will accept any card configration. Any option in the original card which takes a string value can be templated by changing the option name to be option_name_template. For example, name will become name_template. Here is an example:

type: 'custom:card-templater'
card:
  type: entities
  show_header_toggle: false
  columns: 2
  title: Places
  entities:
    - entity: zone.home
      name_template: >-
        {{ state_attr("zone.home","friendly_name") }} - {{
        (distance(states.device_tracker.my_phone, states.zone.home) *
        0.621371) | round(1) }} miles.
    - entity: zone.work
      name_template: >-
        {{ state_attr("zone.work","friendly_name") }} - {{
        (distance(states.device_tracker.my_phone, states.zone.work) *
        0.621371) | round(1) }} miles.
entities:
  - device_tracker.my_phone

This will display an entities card showing two zones, with the display names including the distance between a device_tracker entity and the zone lke this:

entities

Templating lists

Some card options can be a list of strings (e.g. the state_filter option in the entity-filter card). These can still be templated, but need to be done in a different way, by replacing each string with string_template: {{ template }} as below:

state_filter:
  - 'state_one'
  - 'state_two'

could become

state_filter:
  - string_template: {{ "state_" + "one" }}
  - string_template: {{ "state_" + "two" }}

Notes:

It is technically possible to template the card type of the templated_card, e.g. something like this:

type_template: '{{ "entities" if is_state("input_boolean.show_full", "on").state else "glance" }}

However, this has only been tested with the entities and glance cards and may not work reliably with other card types.

entities

This option is required in order that the template will only be processed when one of the referenced entities changes and is similar to the entity option for template sensors. I am investigating if this can be determined from the template but this is difficult to do client-side and so, for now, this option is required.

For complex templates you can create a time sensor like this:

sensor:
  - platform: time_date
    display_options:
      - 'time'

and then use sensor.time under entities

You can also use this to template the state for an entity, so the entity displays other than its actual state. For example:

type: 'custom:card-templater'
card:
  type: entities
  show_header_toggle: false
  columns: 2
  title: Places
  entities:
    - entity: zone.home
      name_template: >-
        {{ (distance(states.device_tracker.my_phone, states.zone.home) * 0.621371) | round(1) }} miles away.
    - entity: zone.work
      name_template: >-
        {{(distance(states.device_tracker.my_phone, states.zone.work) * 0.621371) | round(1) }} miles away.
entities: 
  - device_tracker.my_phone
  - entity: zone.home
    state_template: '{{ state_attr("zone.home","friendly_name") }}'
  - entity: zone.work
    state_template: '{{ state_attr("zone.work","friendly_name") }}'
entity: zone.work

will display the states of the zones as their friendly names instead of the actual state of (“zoning”) as below:

StateTemplate

Basically, virtually any option in a card can be templated (although, as above, there may be issues templating the card type). Here is a more complex template I am currently using which loops though all device_tracker entities and displays their current states as a table in a markdown card:

type: ‘custom:card-templater’
card:
content_template: >-
{{ “| Device | Location |\n” }} {{ “|:-:|:-:|\n” }} {%- for device in
states.device_tracker -%} | {{ device.attributes.friendly_name + " | " +
device.state + " |\n"}} {%- endfor -%}
title: Devices
type: markdown
entities:

  • sensor.time

The result is something like this:

55

Edit: Just a little correction. I noticed I put YAML2, when I obviously mean Jinja2 templates.

16 Likes

Well done! :tada:

nice work, congrats

nice work, awsome cards
do you have any tracker.json url for this card to show in custom updater cards also?

If you have a recent version of custom_updater you shouldn’t need to add a JSON URL to your config, since it uses the “super custom cards” method of tracking. Just add the following to the resources:

resources:
  - url: /customcards/github/gadgetchnnel/lovelace-card-templater.js?track=true
    type: js

You may need to trigger an update in custom_updater after doing this, but it should then automatically download the files.

I’m considering possible improvements to the card to improve the efficiency (it currently submits a request to the /api/template endpoint for each template when refreshing) and to allow it to automatically identify the entities to monitor (for simple templates) as happens with the template sensors.
However, this would most likely require a custom component which would expose its own API endpoints (to identify entities and process all templates for a card) so I’d like to get feedback on this:

Poll: Would you be happy to require a custom component in order to use the card-templater card?

  • Yes
  • No

0 voters

If anybody has had any issues accessing this today, it appears that my GitHub profile has been flagged (possibly due to an edit I made to the Wiki on another repository). I’ve contacted GitHub support, so hopefully this will be available again soon.

I’ve now published a new version of this, with an experimental new feature allowing whole lists to be templated. This currently only works with the entities and state_filter properties. You simply need to create a template which returns valid JSON or YAML, like this example which will show all device_tracker entities with a state of “home”:

type: 'custom:card-templater'
card:
  type: entities
  title: Who's at Home
  entities_template: >-
    {{ states.device_tracker | selectattr("state", "equalto",
    "home") | map(attribute="entity_id") | list | tojson }}
entities:
  - sensor.time

I’ve just started implementing releases in the lovelace-card-templater repo so, if you’ve installed this using HACS, you may want to reinstall it selecting the latest version from the available versions. This will make updating easier in future and also allow me to release beta versions.

I’m trying to template the state for an entity in a glance card inside an entity-filter card.

The filter state is ‘on’.

I’m trying to change the displayed state of a binary sensor to the state of a numerical sensor.

I’ve tried this:

- type: 'custom:card-templater'
  card:
    type: entity-filter
    show_empty: false
    card: 
      type: glance
    state_filter: 
      - "on"
    entities:
      - binary_sensor.ha_update_avail_template
      - binary_sensor.potential_breaking_changes
      - binary_sensor.nuc_memory_usage_high
      - binary_sensor.haapi_mqtt_test
      - input_boolean.low_batteries
  entities:
    - entity: binary_sensor.nuc_memory_usage_high
      state_template: "{{ states.sensor.memory_use_percent.state }}%"

It’s almost working…

Right now the problem is that it actually changes the state of the binary sensor in the state machine itself to the state of the other sensor. So then the when the filter checks for the “on” state it doesn’t pick up the binary sensor because now the binary sensor state is no longer ‘on’, it’s ‘70.2%’.

Is that the expected behavior of this card or am I doing something very wrong here?

If this is expected behavior is there another way that you know of that I can change only the way the state is displayed on the frontend without affecting the backend. I looked at secondary info entity row but it doesn’t work for anything other than an entities card.

This is a limitation of how it currently templates the state. It does this by updating the state in the hass.states collection which, although it doesn’t actually change it in the actual state machine (the States page under Developer Tools will still show the actual state), will affect the state seen by the card (and sometimes other cards on the same page).

I’ll see if I can prevent this from happening. I may be able to do this by using a clone of the hass object rather than updating the original (I implemented something similar recently in the Home Feed card for the more-info popup for history entities).

Actually…that’s not correct.

I tried it yesterday and I saw in the dev tools states page that it changed the actual state there.

here it is without the entity being templated (it’s the “binary_sensor.nuc_memory_usage_high” entity):

ex

and here it is after the templated config using the code from above You can see that it’s the same as the memory percent used sensor:

ex2

You won’t see the state change in the dev-tools states page until you have the templating code active in lovelace and then you need to restart HA. Then it shows the updated state.

But you can see the result of the template on the actual state because the entity-filter card (which is filtering for the “on” state) isn’t displaying the entity because the actual state is no longer “on”; it’s now “73.9%”.

I’ve done some testing using a copy of the hass object, rather than the original and, unfortunately, I don’t think this will actually be possible. The most I’ve been able to do is make it so templating the state of an entity doesn’t interfere with other cards on the page and doesn’t affect the Developer Tools/States page (and I’ll release a filx for this shortly). However, the issue with cards such as entity-filter is that it isn’t possible for the card-templater card to pass the templated states to the card without it also affecting the filtering (as everything is using the hass object passed to it).

Ok, thanks for trying.

I’ll have to see if I can figure out another way to do it. Or not… It’s not really something necessary. Just something I thought would be nice to have so I can see the actual number on that sensor instead of navigating to another page to see it.

Do you know of another custom component that allows us to template the displayed state of an entity?

I’m not aware of another component that would allow that, but as a workaround you could use name_template, something like this:

- type: 'custom:card-templater'
  card:
    type: entity-filter
    show_empty: false
    card: 
      type: glance
    state_filter: 
      - "on"
    entities:
      - binary_sensor.ha_update_avail_template
      - binary_sensor.potential_breaking_changes
      - entity: binary_sensor.nuc_memory_usage_high
        name_template: "NUC High Memory Usage - {{ states.sensor.memory_use_percent.state }}%"
      - binary_sensor.haapi_mqtt_test
      - input_boolean.low_batteries
  entities:
    - entity: binary_sensor.nuc_memory_usage_high

That would override the display name of the entity to have the percentage memory usage concanenated to the end.

1 Like

Good idea! Thanks!

It’s not perfect but it works great for what I needed.

I think you’ve posted this in the wrong thread, this is for the card-templater card which allows you to use Jinja2 templates. I think you need to post this here:

Apologies. Yes I did post it in the wrong topic.

Having said that I’m not getting anywhere with debugging it so I might try it with this card instead as I’m slightly less incompetent with jinja.

Would it be possible to use this card to make weblink?
In my example below i want a card with 2 collumns:
First the state of my sensor “sensor.spel_game_01” then the state of “sensor.spel_titel_01” that should be an clickable url from the state of the sensor “sensor.spel_url_01”
Screenshot

  - type: 'custom:card-templater'
    card:
      type: weblink
      show_header_toggle: false
      columns: 2
      title: Spel 01
      entities:
        - entity: sensor.spel_titel_01
          name_template: >-
            {{ states.sensor.spel_game_01.state }}
          url: >-
            {{ states.sensor.spel_url_01.state }}
    entities:
      - sensor.spel_titel_01

This card only allows the configuration of the card or the states of the entities to be templated. Unless the card you are templating allows the state to be displayed as a link (I’m not sure what card you are trying to use there, since weblink doesn’t actually seem to be a valid card) you won’t be able to use this card to do what you want.