100% Templatable Lovelace Configurations

Tags: #<Tag:0x00007fd085f07398> #<Tag:0x00007fd085f05fc0>


I tried this hours ago and could not for the life of me get it to work, I’m glad I wasn’t the only one and thanks to those of you who worked out how ‘off’ the readme was because I tried loads of things to no avail.

This looks like being an amazingly useful card! Thank you.


really nice work and really useful for many case scenario in my setup working on them and i will post examples here and submit them after on your Git. Thank you again for that wonderful card


I was able to have the ‘circle-sensor-card’ working with non numerical sensor, it absolutely needs a numerical state for the color change. So i made a 3 state color change here is the code i use.
(this is how the lovelace editor conform it)

On Clear it is green, on Warning it is yellow and Emergency red

type: 'custom:config-template-card'
  entity: sensor.co
  name: CO
  show_card: true
  stroke_width: 20
  fill: 'rgba(100,100,100,0.0)'
  type: 'custom:circle-sensor-card'
  stroke_color: >-
    ${this.hass.states['sensor.co'].state === 'Clear' ? '#55f26e' :
    this.hass.states['sensor.co'].state === 'Warning' ? '#e8e400' : '#d30000'}

c e w


Unfortunately somehow is not working and I think 50% of this is my fault :smiley:

             - type: custom:config-template-card
                  - type: entities
                    title: House Members
                    show_header_toggle: false
                      - entity: person.andrea
                        type: "custom:secondaryinfo-entity-row"
                        secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]]% - ${this.hass.is_states['binary_sensor.andrea_oneplus5_charging', 'true'] 'Charging' : 'Not Charging'}"
                      - entity: person.xxxxx
                        type: "custom:secondaryinfo-entity-row"
                        secondary_info: "Honor 8 Battery: [[ sensor.xxxxx_honor8_battery ]]%"

This is the code I am using, true is that the line in the template check in HA doesn’t seem to return not an error nor the expected result, so, not sure if it’s me or what :slight_smile:

@Maaniac code aswell does the same in the template test to be fair :slight_smile:

I also tried the same with the mini-graph-card using @Maaniac icon config, still got a configuration error:

                        icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= '10' ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"

My guess in this one is the >= but to be honest, that seems to be correct to me

Any hint please? ^^



your first one isn’t defining templates correctly ${}. Also, you’ll need to template the full line, not just parts of it. The full thing is evaluated as Javascript code.

on your 2nd one, you’ll need to convert the string to a number to evaluate most likely


Thanks @iantrich , I will check that :slight_smile:


Side note, the dark_sky sensor return a number as far as I can tell :slight_smile:

Also becaue I believe that various graph cards are using those values as they are to generate the graph (but again, I might be wrong)


You have '10' though, which is a string


There is a typo in the card name.


Hi @arsaboo
Yes I saw that and already fixed, didn’t help tho :smiley:

Thanks :slight_smile:


Oh, okay that makes sense :slight_smile:
I will try without quotes!



Thank you for your contribution! If I understand this thing correctly, it’s a card that allows you to template other cards. In effect, it overrides other cards and gives them templating abilities with access to the hass object.

If my interpretation is correct, it makes me wonder why templating isn’t a common ability of all cards. It seems one often finds a need to tweak a card’s appearance, or even conditional visibility, in a way that the card’s author never envisioned. Maybe templating should be part of Lovelace’s DNA, an inheritable trait in order to make it easily available to existing stock, custom, and future cards.

Of course, I offer this opinion with little knowledge of Lovelace’s innards so I might just be asking for the impossible.


So, I tried the following and it does not work for me (Invalid Configuration):

      - type: custom:config-template-card
          type: entities
          title: Stocks
          show_header_toggle: false
            - entity: sensor.dow_futures
              icon: "${parseFloat(this.hass.states['sensor.dow_futures_change_pct'].state) > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle'}"

I tried without parseFloat and it still did not work.

Also, I am guessing we cannot change icon_color.


Ok my attempt without quote didn’t help, still same issue.

icon: "${this.hass.states['sensor.dark_sky_temperature'].state >= 10 ? 'mdi:thermometer-chevron-up' : 'mdi:thermometer-chevron-down'}"

The other one, I tried 3 different way, none of them work an the second one should simply work

#secondary_info: "OnePlus 5 Battery: [[ sensor.andrea_oneplus5_battery ]] - ${this.hass.states['binary_sensor.andrea_oneplus5_charging'].state === "true" ? 'Charging' : 'Not Charging'}"
#secondary_info: "${this.hass.states['binary_sensor.andrea_oneplus5_charging'].state === "true" ? 'Charging' : 'Not Charging'}"
secondary_info: "${this.hass.is_state['binary_sensor.andrea_oneplus5_charging', 'true'] ? 'Charging' : 'Not Charging'}"

I am not sure about what am I doing that wrong to be honest

I tested all those templates in the UI and none of them give error, but all of them just print the same code, not the result for some reason…

I am lost xD


Curious thing, not ure if anyhow related.
On the temperature issue, I got an error in the browser console:

    at HTMLElement.setConfig (config-template-card.js?track=true:2290)
    at create_card_element_createElement (401352253e833b70a294.chunk.js:4823)
    at createCardElement (401352253e833b70a294.chunk.js:4823)
    at HTMLElement._createCardElement (401352253e833b70a294.chunk.js:3618)
    at _cards.config.cards.map.card (401352253e833b70a294.chunk.js:3615)
    at Array.map (<anonymous>)
    at HTMLElement.setConfig (401352253e833b70a294.chunk.js:3615)
    at create_card_element_createElement (401352253e833b70a294.chunk.js:4823)
    at createCardElement (401352253e833b70a294.chunk.js:4823)
    at HTMLElement._createCardElement (401352253e833b70a294.chunk.js:3618)

On the second one (charging/not charging) I don’t get any error in the console.


Lovelace core will not support templating, that has been stated from the beginning by balloob, but this should cover all use cases, I believe where templating could be beneficial. I think


Add these logs back if you want to see what you’re getting for the evaluated template: https://github.com/custom-cards/config-template-card/commit/bcad27dc9ed96520a5cbbd11a79a4a2da5caaafa#diff-9adab9572c0667f4f32ee92b4e87df0cL40


You can only do what the card supports. entities card does not support icon_color.

As noted in the readme, you need to use the full name of cards, i.e. custom:hui-entities-card

Edit: I COULD drop the custom requirement…but not sure if I should or not. Seems to fit better with what is done by core already :woman_shrugging:, but I’m not going to maintain a list of what cards/rows/elements are in core, so the full name will be required regardless


That wasn’t the case until 20 seconds back :wink:

In any case, the following doesn’t work either:

      - type: custom:config-template-card
          - type: custom:hui-entities-card
            title: Stocks
            show_header_toggle: false
              - entity: sensor.dow_futures
                icon: "${this.hass.states['sensor.dow_futures_change_pct'].state > 0 ? 'mdi:arrow-up-bold-circle' : 'mdi:arrow-down-bold-circle'}"


It was in the readme, below the example, just not the example itself. And since apparently asking for people to update Readme is rude, I did it myself just now…