template-entity-row

Forked from thomasloven/lovelace-template-entity-row to continue development of the stalled project.

Display whatever you want in an entities card row.

To install via HACS, add this repo https://github.com/Lint-Free-Technology/lovelace-template-entity-row as a custom HACS repository using type Dashboard. Use the button above to do this in one step. You are best to remove thomasloven/lovelace-template-entity-row in your HACS to avoid confusion as to what repo you are using.

Install template-entity-row.js as a module.

resources:
  - url: /local/template-entity-row.js
    type: module

Legacy test harness reference configuration is available at reference/lovelace.yaml.

Visual test scaffold (ha-testcontainer)

A ha-testcontainer visual test scaffold is included with scenario snapshots and doc-image scaffolding.

• Scenario tests: tests/visual/scenarios/*.yaml + tests/visual/test_scenarios.py
• Snapshot baselines directory: tests/visual/snapshots/
• Doc image scenarios: docs/scenarios/*.yaml + tests/visual/test_doc_images.py
• VS Code tasks: .vscode/tasks.json

See tests/README.md for setup and execution details.

Usage example

Note: This is not a card. It's a row for an entities.

type: entities
title: Quick Start
entities:
  - light.bed_light
  - type: custom:template-entity-row
    icon: mdi:lamp
    name: "The light is {{states('light.bed_light')}} but nobody's"
    state: "{% if is_state('input_boolean.test_boolean', 'on')%} home {% else %} away {% endif %}"
    secondary: "It's {{ now().strftime('%H:%M') }}"
    active: "{{ is_state('light.bed_light', 'on') }}"
  - entity: input_boolean.test_boolean
    name: A toggle
  - type: custom:template-entity-row
    icon: "{% if is_state('input_boolean.test_boolean', 'on')%} mdi:check-circle-outline {% else %} mdi:close-circle-outline {% endif %}"
    name: "The toggle is {{states('input_boolean.test_boolean')}}"
    state: "{% if is_state('input_boolean.test_boolean', 'on')%}"
    active: "{{ is_state('input_boolean.test_boolean', 'on') }}"
    color: "{% if is_state('input_boolean.test_boolean', 'on')%} green {% else %} red {% endif %}"

Options

• icon, name, state, secondary, image selects what icon, name, state, secondary_info text and entity_picture to display respectively.

• active if this evaluates to "true" or "false", the icon gets will always look active or inactive respectively.

• entity if this evaluates to an entity id, icon, name, state and image will be taken from that entity unless manually overridden. Specifying an entity will also let you use action. If you don't override state or state_display then the displayed state text will be the localized entity state, which includes any units.

• state_display if this is set then the displayed state text will be the text or rendered template as text. If you are using an entity but overriding state, then state needs to be a valid raw (non localized) state for the entity's device class. Use state_display to display the any localized state you wish to show.

• condition if this is set but does not evaluate to "true", the row is not displayed.

• toggle if this evaluates to "true" a toggle is shown instead of the state. The toggle is connected to the entity. This will only show a toggle, nothing else. No sliders, no dropdowns, no media controls. toggle means Toggle. NOTE: Both toggle and button cannot be set together.

• button if this is set then then the state will be replaced with a button. If the value for button is true then the translated string Press will be used for the button. Otherwise a string is expected and will be used. If button_action is not set then the default action will be input_button.press for the config entity. NOTE: Both toggle and button cannot be set together.

• tap_action, hold_action, double_tap_action, button_action: see below.

• color the CSS color of the icon.

• state_color whether the icon color will respond to state changes. Use if you are setting state but don't wish for the icon to change color based on state. e.g. If your entity had device class battery and you wish for icons to change, but not color. If state_color is not set, but color is set, state_color will be set to false. In this case use color template if you wish for the icon to show different colors.

• nested_templates if set to true, enables nested bracket syntax ([[/]]) as an alternative to the standard {{/}} Jinja2 delimiters. This is useful in if using template entity in a card that uses Jinja templates itself.

  Standard Jinja2	Nested (nested_templates: true)
  {{ expression }}	[[ expression ]]
  {% block tag %}	[% block tag %]
  {# comment #}	[# comment #]

  Example — set nested_templates: true and write:

  type: custom:template-entity-row
  nested_templates: true
  name: "The light is [[ states('light.bed_light') ]]"
  state: "[% if is_state('input_boolean.car_home', 'on') %] home [% else %] away [% endif %]"

All options accept jinja2 templates.

Jinja templates have access to a few special variables. Those are:

• config - an object containing the card configuration
• user - the username of the currently logged in user
• browser - the deviceID of the current browser (see browser_mod).
• hash - the hash part of the current URL.

In evaluated templates the function _(<key>) (underscore) will localize the <key> to the current language. E.g. _(component.binary_sensor.entity_component.motion.state.off) will be replaced with Clear if your language is set to English.

To find the available keys, open your browsers console, type in the following and press Enter:

document.querySelector("home-assistant").hass.translationMetadata.translations;

Actions

tap_action, hold_action, double_tap_action and button_action can be templated if the template evaluates to a valid action configuration in python format. Standard YAML without templates works too.

Eg:

type: custom:template-entity-row
entity: light.bed_light
# Standard yaml configuration - No templates allowed
hold_action:
  action: more-info
# JSON return format
tap_action: |
  {
    "action": "toggle",
    "confirmation": {
      "text": "Do you really want to turn {{ state_attr(config.entity, 'friendly_name') }} {% if is_state(config.entity, 'on') %}off{% else %}on{% endif %}?",
    },
  }
double_tap_action:
  action: toggle

FAQ

Why does this look weird?

Because you're not using it correctly. This is not a card. It's an entity row, and is meant to be used inside the entities card

Why doesn't toggle: true make buttons appear to control my blinds?

Because "toggle" means a toggle. It's the simplest possible way to control an entity, and anything beyond that is not in the scope of this row and will not be added.

Why is my log flooded with template errors?

This may happen if you use the GUI editor to edit a template based value. Since Home Assistant redraws the row every time you make any change to the configuration in the GUI editor, it will try to render the template every time you push a key. Since the template will be invalid for most of the time while you're editing it, you will get a lot of errors.
There's unfortunately nothing I can easily do about this behavior.