100% Templatable Lovelace Configurations

Tags: #<Tag:0x00007fd07db91dd8> #<Tag:0x00007fd07db91ab8>


:tada: Lovelace Templates :tada:

I’ve gone and made a crazy card that allows you to pretty much template anything in Lovelace for your card configurations using any information available on the frontend; states, attributes, user, etc.

Want state/attribute-based icons? DONE!
Want dynamic stacks; vertical vs horizontal based on user? DONE!
Want OR conditionals? DONE!

The list is pretty much endless and I’m sure you all will come up with some crazy stuff. Be sure to share.

Go nuts! Enjoy!

Lovelace badge+notification banner
Applying themes to cards based on conditions
Lovelace: Mini Media Player

Looks very promising! Gonna check it out this afternoon.
Maybe we should get a git for collecting templates, I expect the examples to number in size within weeks!


This sounds amazing, having custom cards like this instead of a buttload of template sensors, and my TV and Xbox can finally say on/off instead of home/away :). Is it also possible to colorize the icons, and have more than two options, say three possible “states” depending on sensor value? Looking forward to seeing some more examples of usage.


If you can explicitly do it in the config for a card for 1 scenario, you can template it out. That’s all I can say about it. It takes ANY valid javascript and has access to the this.hass object.


F#&@ing awesome thanks @iantrich


Love to see some examples of this card in action…


Amazing! Now I can get rid of a whole bunch of template sensors I’m only using for my front end. :grinning:


very interesting, I’m looking forward to seeing some example and scenarios thrown around for this


This looks good. I’m keen to see more examples to get a better understanding for how to use this.


That is amazing! I was looking for something like this a few days ago!
Now I don’t remember for what, but it is absolutely good to have this option now :smiley:

Would you mind point me to the right direction in this scenario?

              - 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 ]]%"

What I would like to do i add a “- Charging” if binary_sensor.andrea_oneplus5_charging is true.
The templating is not the problem here, my issue is, where do I put the “type: custom:config-template-card” bit in this scenario?

Thanks :slight_smile:


Everything you have here would go under “config” after you fix the template


gonna be looking at your config after you have been let loose with this card


Any way to get a better example? I can’t seem to figure it out for some reason…maybe I just haven’t gotten enough sleep…

Figured it out. In the documentation, you have

  - type: custom:config-template-card
      type: entity-button
      name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
      icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"

But I think card: should be config: ?

I think this has a lot of potential. It would be interesting to apply this concept over to templating entity rows.


Nice one Ian! :clap: :tada:


I got it to work using the below config. Readme needs to be updated.

- type: 'custom:config-template-card'
    type: 'custom:hui-entity-button-card'
    name: "${this.hass.states['media_player.office'].state === 'playing' ? 'Rocking' : 'Not Rocking'}"
    entity: media_player.office
    icon: "${this.hass.states['media_player.office'].state === 'playing' ? 'mdi:music' : 'mdi:sleep'}"


If only there was some way for anyone to submit proposed changes… :thinking:


This post was flagged by the community and is temporarily hidden.


This post was flagged by the community and is temporarily hidden.


Part of being open source is having people contribute back. If you think a push towards having someone do that for the good of the community, then, well… :woman_shrugging:


This post was flagged by the community and is temporarily hidden.