JavaScript Templates

This templating system IS NOT the same that Home Assistant implements. It is basically a JavaScript code block in which you can use certain client-side objects, variables and methods. To set a property as a JavaScript template block, include the code between three square brackets [[[ JavaScript code ]]]. If you don‘t use the square brackets, the property will be interpreted as a regular string.

The JavaScript code will be taken as something that you want to return, but if you have a more complex logic, you can create your own variables and return the desired result at the end.

The entities used in the templates will be stored, so if the state of an stored entity changes, all the templates that use this entity will be reevaluated and rerendered. On top of this, if the variable panel_url is used in a template, the template will be reevaluated every time that a new panel or a new view is loaded.

JavaScript templates can make use of Reactive JavaScript Variables. If you use a reactive variable in some templates and you modify it in the javascript action of an on_click parameter of an item, all the templates in which the variable was used will be reevaluated in the device in which the action was performed.

Example

The next example will set the next options:

Sets the title of the sidebar as "My Home" followed by the current time.
Sets the background of the sidebar red when the panel config is selected and green otherwise.
Adds the number of HACS updates as a notification in the HACS item in the sidebar. In case that there are no updates, an empty string is returned and in these cases the notification will not be displayed.
Creates a new item that redirects to the Home Assistant info page with a dynamic text with the word "Info" followed by the installed Supervisor version between parentheses and the Operating System version in the info text.

YAML
JSON

<config directory>/www/sidebar-config.yaml
title: '[[[ "My Home " + new Date(states("sensor.date_time_iso")).toLocaleTimeString().slice(0, 5) ]]]'
sidebar_background: |
  [[[
    return panel_url === '/config/dashboard'
      ? 'red'
      : 'green';
  ]]]
order:
  - item: hacs
    notification: |
      [[[
        const outdatedHacsEntities = Object.values(entities.update).filter(
          (entity) => entity.platform === 'hacs' && is_state(entity.entity_id, 'on')
        );
        return outdatedHacsEntities.length || '';
      ]]]
  - new_item: true
    item: info
    name: |
      [[[
        return 'Info (' + state_attr('update.home_assistant_supervisor_update', 'latest_version') + ')';
      ]]]
    info: |
      [[[
        return 'OS ' + state_attr('update.home_assistant_operating_system_update', 'latest_version');
      ]]]
    href: '/config/info'
    icon: 'mdi:information-outline'

<config directory>/www/sidebar-config.json
{
  "title": "[[[ 'My Home ' + new Date(states('sensor.date_time_iso')).toLocaleTimeString().slice(0, 5) ]]]",
  "sidebar_background": "[[[ return panel_url === '/config/dashboard' ? 'red' : 'green' ]]]",
  "order": [
    {
      "item": "hacs",
      "notification": "[[[ return Object.values(entities.update).filter((entity) => entity.platform === 'hacs' && is_state(entity.entity_id, 'on')).length || '' ]]]"
    },
    {
      "new_item": true,
      "item": "info",
      "name": "[[[ return 'Info (' + state_attr('update.home_assistant_supervisor_update', 'latest_version') + ')'; ]]]",
      "info": "[[[ return 'OS ' + state_attr('update.home_assistant_operating_system_update', 'latest_version'); ]]]",
      "href": "/config/info",
      "icon": "mdi:information-outline"
    }
  ]
}

tip

Custom Sidebar uses Home Assistant Javascript Templates for the JavaScript templating system. To know all the objects, variables and methods available in the JavaScript templates, consult the proper section in the repository.

Example​

Example