v9.0.0

⚠️⚠️⚠️ BREAKING CHANGE ⚠️⚠️⚠️

This release is a breaking change only for those using the attributes property of an order item as a string to get its value from js_variables. If you are not using the attributes property or you are using it with a plain object, then you can update safely, otherwise, read the migration instructions.

This major release makes it possible to send a JavaScript template in the attributes property of an order item. Previously, setting a string in this property meant to get a variable with that name from js_variables. From now on, if you set a string in this property, it must be a a JavaScript template otherwise it will throw an error. This makes it possible to assign attributes dynamically to an order item, so the attributes of an item can change when the state of an entity or when a reactive variable changes.

Migration of an attributes property using a variable defined in js_variables

Before

js_variables:
  my_attrs:
    prop1: 'value-1'
    prop2: 'value-2'
order:
  - item: something
    attributes: 'my_attrs'

After

js_variables:
  my_attrs:
    prop1: 'value-1'
    prop2: 'value-2'
order:
  - item: something
    attributes: |
      [[[ my_attrs ]]]

---

🚀 Features

• Make it possible to assign a JavaScript template to an item attributes property
  • PR: #329 by @elchininet

🧩 Dependencies

• [Dependencies]: Bump the dependencies-dev group with 4 updates
  • PR: #326 by @dependabot[bot]
• [Dependencies]: Bump the dependencies-dev group with 5 updates
  • PR: #327 by @dependabot[bot]
• Make it possible to assign a JavaScript template to an item attributes property
  • PR: #329 by @elchininet

📝 Documentation

• Make it possible to assign a JavaScript template to an item attributes property
  • PR: #329 by @elchininet

v8.6.2

🛠 Fixes

• Fix sidebar items with divider focused
  • PR: #325 by @elchininet

v8.6.1

🛠 Fixes

• Fix a bug related to javascript actions and partials
  • PR: #324 by @elchininet

🧩 Dependencies

• [Dependencies]: Bump the dependencies-dev group with 4 updates
  • PR: #323 by @dependabot[bot]

v8.6.0

This minor release implements a new order-item property that will add custom attributes to a sidebar item.

Order Items Properties

Property	Type	Required	Description
attributes	String or Object	no	If it is an object it defines a group of attributes that will be applied to the sidebar item. If it is a string, then it makes reference to an object defined in js_variables

Attributes as an object

order:
  - item: 'settings'
    attributes:
      data-my-prop: 'some-prop'
      data-test: 'test-attribute'
      

Attributes as a string (they make reference to a variable in js_variables)

js_variables:
  my_attributes:
    data-my-prop: 'some-prop'
    data-test: 'test-attribute'
order:
  - item: 'settings'
    attributes: 'my_attributes'
      

---

🚀 Features

• Add an option to insert attributes
  • PR: #322 by @elchininet

🧩 Dependencies

• Update update_actions_upload-artifact
  • PR: #321 by @elchininet

📝 Documentation

• Add an option to insert attributes
  • PR: #322 by @elchininet

v8.5.2

🚀 Features

• Implement search using Algolia
  • PR: #315 by @elchininet

🛠 Fixes

• Change the documentation path in the plugin checker module
  • PR: #319 by @elchininet

📝 Documentation

• Implement search using Algolia
  • PR: #315 by @elchininet
• Add meta keywords to the documentation
  • PR: #316 by @elchininet

v8.5.1

🧩 Dependencies

• [Dependencies]: Bump the dependencies-dev group with 5 updates
  • PR: #307 by @dependabot[bot]

📝 Documentation

• Add a troubleshooting section in the documentation
  • PR: #303 by @elchininet
• Sync config tabs
  • PR: #304 by @elchininet
• Create custom themes for the code blocks
  • PR: #305 by @elchininet
• Use highlight in some code block relevant lines
  • PR: #306 by @elchininet
• Move code blocks to markdown partials
  • PR: #308 by @elchininet
• Create a blog section
  • PR: #309 by @elchininet

📦 Other

• Submit blog post about panel_url variable
  • PR: #311 by @elchininet
• Import partials and omages using absolute URLs
  • PR: #312 by @elchininet
• Change fetch configuration cache option
  • PR: #313 by @elchininet

v8.5.0

This minor release adds two new options in the order items.

Order Items Properties

Property	Type	Required	Description
divider	Boolean	no	Adds a divider line below the item
divider_color*	String	no	Sets the color of the divider line below the item (it overrides the root divider_color option)

* These options allow JavaScript or Jinja templates.

---

🚀 Features

• Add "divider" and "divider_color" to order item options
  • PR: #300 by @elchininet

📝 Documentation

• Migrate the documentation to a site
  • PR: #296 by @elchininet
• Remove documentation from the README
  • PR: #297 by @elchininet
• Add links to the documentation footer
  • PR: #298 by @elchininet
• Add "divider" and "divider_color" to order item options
  • PR: #300 by @elchininet

v8.4.1

🛠 Fixes

• fix a bug related to reactive variables declaration
  • PR: #294 by @elchininet

🧩 Dependencies

• [Dependencies]: Bump the dependencies-dev group across 1 directory with 3 updates
  • PR: #295 by @dependabot[bot]

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

v8.3.0

This minor release adds a new option to set the default URL path that should be redirected to when the page loads.

Configuration options

Property	Type	Required	Description
default_path	String	no	Defines the default URL path when the page loads. This path must start with /

IMPORTANT

The default_path option will change the default behaviour and every time that the page loads it will navigate to this path (either when the page loads for the first time or when it gets refreshed). If you don't want to have this behaviour and you would prefer to load Home Assistant in an specific path or refresh a specific page without being redirected to the default_path, then you should not set this option.

---

🚀 Features

• Implement and option to set the default URL path on load
  • PR: #282 by @elchininet

🧩 Dependencies

• [Dependencies]: Bump typescript-eslint from 8.18.1 to 8.18.2 in the dependencies-dev group
  • PR: #269 by @dependabot[bot]
• [Dependencies]: Bump the dependencies-dev group with 2 updates
  • PR: #271 by @dependabot[bot]
• [Dependencies]: Bump the dependencies-dev group with 4 updates
  • PR: #281 by @dependabot[bot]

📝 Documentation

• Several changes in the documentation
  • PR: #279 by @elchininet
• Implement and option to set the default URL path on load
  • PR: #282 by @elchininet