Skip to main content

The on_click property

The on_click property allows one to attach click actions to specific sidebar items. These actions will be triggered every time that the sidebar item containing an on_click property is clicked. The on_click property doesn't stop redirecting to a dashboard or to an external page if it is provided together with an href property. But if the href property is # (or it is just omitted in new items), then the on_click action will be executed without redirecting to any dashboard or external page.

Call service action​

The call-service action allows one to call a specific service when a sidebar item is clicked. It rquires a service parameter indicating which is the service that one wants to execute and an optional data parameter in the cases that it is required by the service.

tip

The data parameter of a call-service action accepts JavaScript templates in its values. The JavaScript templates used there will have access to two variables: item and itemText. These variables are related to the clicked item, the first is the configuration object of the item (including an element property which is the HTML element relative to the sidebar item) and the second is the text of the item.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Living-room lights'
    icon: 'mdi:lightbulb-group'
    icon_color: |
      [[[
        return is_state('light.living_room', 'on')
          ? 'var(--accent-color)'
          : 'var(--sidebar-icon-color)';
      ]]]
    on_click:
      action: 'call-service'
      service: 'light.toggle'
      data:
        entity_id: 'light.living_room'

JavaScript action​

The javascript action allows one to execute an arbitrary JavaScript code when the sidebar item is clicked. It requires a code parameter with the JavaScript template code without being enclosed between [[[ ]]].

tip

All the properties and methods available in JavaScript templates will be available in this JavaScript code. On top of this, it will also have access to two variables: item and itemText. These variables are related to the clicked item, the first is the configuration object of the item (including an element property which is the HTML element relative to the sidebar item) and the second is the text of the item.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Restart'
    icon: 'mdi:restart'
    on_click:
      action: 'javascript'
      code: |
        callService('homeassistant', 'restart');

Open dialog action​

The open-dialog action allows one to open a dialog when a sidebar item is clicked. It requires a type parameter indicating which kind of dialog should be open. The type parameter allows two values, more-info to open a more info dialog of an entity or restart to open the dialog to restart Home Assistant. If one specifies the type parameter as more-info, the action will require an entity_id parameter indicating which entity should shown the more info dialog.

Important

Take into account when using the open-dialog action with a restart type, that even if every user can open the restart dialog, only admin users are authorized to restart Home Assistant.

<config directory>/www/sidebar-config.yaml
order:
  - new_item: true
    item: 'Living-room lights'
    icon: 'mdi:lightbulb-group'
    on_click:
      action: 'open-dialog'
      type: 'more-info'
      entity_id: 'light.living_room'
  - new_item: true
    item: 'Restart'
    icon: 'mdi:restart'
    on_click:
      action: 'open-dialog'
      type: 'restart'