Awesome

Config Template Card Card

📝 Templatable Configuration Card

This card is for Lovelace on Home Assistant that allows you to use pretty much any valid Javascript on the hass object in your configuration

Minimum Home Assistant Version

Home Assistant version 0.110.0 or higher is required as of release 1.2.0 of config-template-card

Support

Hey dude! Help me out for a couple of :beers: or a :coffee:!

Installation

Use HACS or follow this guide

resources:
  - url: /local/config-template-card.js
    type: module

Options

Name	Type	Requirement	Description
type	string	Required	`custom:config-template-card`
entities	list	Required	List of entity strings that should be watched for updates. Templates can be used here
variables	list	Optional	List of variables, which can be templates, that can be used in your `config` and indexed using `vars` or by name
card	object	Optional	Card configuration. (A card, row, or element configuaration must be provided)
row	object	Optional	Row configuration. (A card, row, or element configuaration must be provided)
element	object	Optional	Element configuration. (A card, row, or element configuaration must be provided)
style	object	Optional	Style configuration.

Available variables for templating

Variable	Description
`this.hass`	The hass object
`states`	The states object
`user`	The user object
`vars`	Defined by `variables` configuration and accessible in your templates to help clean them up. If `variables` in the configuration is a yaml list, then `vars` is an array starting at the 0th index as your firstly defined variable. If `variables` is an object in the configuration, then `vars` is a string-indexed map and you can also access the variables by name without using `vars` at all.

Examples

type: 'custom:config-template-card'
variables:
  LIGHT_STATE: states['light.bed_light'].state
  GARAGE_STATE: states['cover.garage_door'].state
entities:
  - light.bed_light
  - cover.garage_door
  - alarm_control_panel.alarm
  - climate.ecobee
card:
  type: "${LIGHT_STATE === 'on' ? 'glance' : 'entities'}"
  entities:
    - entity: alarm_control_panel.alarm
      name: "${GARAGE_STATE === 'open' && states['alarm_control_panel.alarm'].state === 'armed_home' ? 'Close the garage!' : ''}"
    - entity: binary_sensor.basement_floor_wet
    - entity: climate.ecobee
      name: "${states['climate.ecobee'].attributes.current_temperature > 22 ? 'Cozy' : 'Too Hot/Cold'}"
    - entity: cover.garage_door
    - entity: "${LIGHT_STATE === 'on' ? 'light.bed_light' : 'climate.ecobee'}"
      icon: "${GARAGE_STATE === 'open' ? 'mdi:hotel' : '' }"

Templated entities example

type: 'custom:config-template-card'
variables:
  - states['sensor.light']
entities:
  - '${vars[0].entity_id}'
card:
  type: light
  entity: '${vars[0].entity_id}'
  name: "${vars[0].state === 'on' ? 'Light On' : 'Light Off'}"

Picture-elements card example

type: picture-elements
image: http://hs.sbcounty.gov/CN/Photo%20Gallery/_t/Sample%20Picture%20-%20Koala_jpg.jpg?Mobile=0
elements:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
      - sensor.light_icon_color
    element:
      type: icon
      icon: "${vars[0] === 'on' ? 'mdi:home' : 'mdi:circle'}"
      style:
        '--paper-item-icon-color': '${ states[''sensor.light_icon_color''].state }'
    style:
      top: 47%
      left: 75%

The style object on the element configuration is applied to the element itself, the style object on the config-template-card is applied to the surrounding card, both can contain templated values. For example, in order to place the card properly, the top and left attributes must always be configured on the config-template-card.

Entities card example

type: entities
entities:
  - type: 'custom:config-template-card'
    variables:
      - states['light.bed_light'].state
    entities:
      - light.bed_light
    row:
      type: section
      label: "${vars[0] === 'on' ? 'Light On' : 'Light Off'}"
  - entity: light.bed_light

Defining global functions in variables

If you find yourself having to rewrite the same logic in multiple locations, you can define global methods inside Config Template Card's variables, which can be called anywhere within the scope of the card:

type: 'custom:config-template-card'
  variables:
    setTempMessage: |
      temp => {
        if (temp <= 19) {
            return 'Quick, get a blanket!';
        }
        else if (temp >= 20 && temp <= 22) {
          return 'Cozy!';
        }
        return 'It's getting hot in here...';
      }
    currentTemp: states['climate.ecobee'].attributes.current_temperature
  entities:
    - climate.ecobee
  card:
    type: entities
    entities:
      - entity: climate.ecobee
        name: '${ setTempMessage(currentTemp) }'

Dashboard wide variables

If you need to use the same variable in multiple cards, then instead of defining it in each card's variables you can do that once for the entire dashboard.

title: My dashboard

config_template_card_vars:
  - states['sensor.light'].state

views:

Both arrays and objects are supported, just like in card's local variables. It is allowed to mix the two types, i.e. use an array in dashboard variables and an object in card variables, or the other way around. If both definitions are arrays, then dashboard variables are put first in vars. In the mixed mode, vars have array indices and as well as variable names.

Note: All templates must be enclosed by `${}`

Troubleshooting

Developers

Fork and then clone the repo to your local machine. From the cloned directory run

npm install && npm run build