v8.4.0

This minor release brings some new features related to a new property in sidebar order items and possibility to work with reactive JavaScript variables.

Added a new property in order items

This release adds a new feature to make it possible to execute actions when clicking on sidebar items. With custom-sidebar it is possible to add an href property to each sidebar item making them redirect to an internal dashboard or to an external URL. From now on, it is also possible to execute certain actions when clicking on sidebar items. These actions can be executed at the same time that you are navigating to a dashboard or an external URL or can be exclusively executed if one omits the href property on new items or change it to # in existing ones.

Order items properties

Property	Type	Required	Description
on_click	OnClickAction	no	Specifies the onClick property of the sidebar item. It allows two types of actions, ServiceCallAction or JavaScriptAction. Take into account that setting this property will not stop the href option for working. If you want to avoid navigating to a page, you should set the href option as # (in new items you can just omit it)

Service call actions

This action allows you to call a service clicking on an item of the sidebar

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: call-service
      service: light.toggle
      data:
        entity_id: light.woonkamer

JavaScript actions

This action allows you to execute a JavaScript code (you don't need to wrap the code block between three square brackets)

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        location.reload();

Use reactive variables in the templates

With this release, after the update of the home-assistant-javascript-templates package, it is also possible to make use of reactive variables in JavaScript templates. This will make your templates be reactive to variables only in the device in which you are working. For example, let's show or hide an item of the sidebar clicking on another item:

order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        const hide = ref('hide');
        hide.value = !hide.value;
  - item: history
    hide: |
      [[[
         const hide = ref('hide');
         if (hide.value === undefined) {
           hide.value = true;
         }
         return hide.value;
      ]]]

Reactive variables can also be declared in the js_variables property giving them an initial value. Let's refactor the previous code to declare the reactive variable hide in the js_variables property giving it an initial value there instead of giving the initial value in the item hide template:

js_variables:
  hide: ref(true)
order:
  - new_item: true
    item: Example
    icon: mdi:gesture-tap
    on_click:
      action: javascript
      code: |
        const hide = ref('hide');
        hide.value = !hide.value;
  - item: history
    hide: |
      [[[ ref('hide').value ]]]

IMPORTANT

1. To make the templates detect that a reactive variable has been mutated, one needs to assign a new value to the reactive variable. For example, changing the items or an array using push or pop will not make the remplates using that variable to be reevaluated. You need to assign a new array to the value of the reactive variable to make the change been detected.
2. To make the template aware that it contains a reactive variable, the value property of the variable should be accesed when the template is rendered. If the code accesing the value property is not executed when the template renders, then the reactive variable will not be tracked. That is why is recomendable to access the value property of the reactive variable outside any condition and build the logic using the retrieved value. In this way the template will track that the reactive variable is being used and any time that the variable changes, the template will get re-evaluated.

---

🚀 Features

• Add an option to execute actions when clicking on sidebar items
  • PR: #290 by @elchininet

🧩 Dependencies

• Update home-assistant-javascript-templates package
  • PR: #288 by @elchininet

📝 Documentation

• Add an option to execute actions when clicking on sidebar items
  • PR: #290 by @elchininet

📦 Other

• Fix flaky tests
  • PR: #283 by @elchininet