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.

If the JavaScript code is used in an option, it 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.

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.

Methods available in JavaScript templates

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.

On top of all the variables and methods provided by Home Assistant Javascript Templates, the next methods are provided by Custom Sidebar and they will be available in the templates:

Method section	Description
DOM methods	Methods that make usage of the HTML DOM API
Date and Time methods	Methods intended to format date and time
Dialogs and toasts methods	Methods to open Home Assistant dialogs and toast notifications
REST API methods	Methods that make usage of the Home Assistant REST API

Complex Example

The next example will create the next things:

1. Sets the title of the sidebar as "My Home" followed by the current time.
2. Sets the background of the sidebar red when the panel config is selected and green otherwise.
3. 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.
4. 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.
5. Creates a new item that when clicked opens the Home Assistant restart dialog, but if the user is not an admin, then it will open an alert with the title "Error", the text "Non-admin users cannot restart Home Assistant" and the text "Close" in the confirm button.

custom-sidebar-config.yaml

title: '[[[ "My Home " + formatTime(states("sensor.date_time_iso")) ]]]'
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'
  - new_item: true
    item: 'restart'
    icon: 'mdi:restart'
    on_click:
      action: 'javascript'
      code: |
        if (user_is_admin) {
          openRestartDialog();
        } else {
          openAlertDialog({
            title: 'Error',
            text: 'Non-admin users cannot restart Home Assistant',
            confirmText: 'Close'
          });
        }