A new custom-sidebar version has been released. This is a minor update of the library and brings support for templates in the icons as well as new features and options. This should not be a breaking change for current implementations even if the code has been refactored in some extent.
1. Add support for templates in icons
From now on, it is possible to add a template in the icon property of an order item, so it will be possible to change the icon if the state of some entity changes.
order:
- new_item: true
item: Automations
href: "/config/automation"
icon: |
[[[ is_state('input_boolean.dark_mode', 'on') ? 'mdi:robot-outline' : 'mdi:robot' ]]]
2. JavaScript templates can return Promises
From now on, the result of a JavaScript template can be asynchronous, if a JavaScript template return a Promise, the template will not be evaluated until it resolves.
order:
- new_item: true
item: Router
href: "http://192.168.1.1"
icon: mdi:router-wireless
info: |
[[[
return fetch('http://192.168.1.1/some-endpoint')
.then((response) => response.json())
.then((result) => {
if (result.active) {
return 'On'
}
return 'Off';
});
]]]
3. There is a new variable to use in JavaScript templates (panel_url)
Now it is possible to use a new variable in JavaScript templates to return the current panel URL. For example, panel_url will return /config/dashboard if the config panel is rendered. This variable will be reevaluated every time that the URL changes, so if you go to another panel or you change views inside the same lovelace panel, the template in which it was used will be reevaluated and the new result will be rendered. This is useful to set different colors in the sidebar when changing dashboards:
sidebar_background: |
[[[
if (panel_url.startsWith('/lovelace')) {
return 'center / cover no-repeat fixed url("/local/sidebar-background.png")';
}
return 'var(--sidebar-background-color)';
]]]
4. New options to set variables for JavaScript and Jinja templates
Now it is possible to set variables that will be used inside the JavaScript and Jinja templates. These variables cannot be templates and only strings, numbers or booleans values are supported.
JavaScript variables
js_variables:
alarm: input_boolean.alarm_activated
order:
- new_item: true
item: Alarm
href: "/lovelace/alarm"
info: |
[[[ is_state(alarm, 'on') ? 'On' : 'Off' ]]]
Jinja variables
jinja_variables:
alarm: input_boolean.alarm_activated
order:
- new_item: true
item: Alarm
href: "/lovelace/alarm"
info: |
{{ 'On' if (is_state(alarm, 'on')) else 'Off' }}
5. New option to set partials
Partials are fragments of code that can be included in your templates. They can be inserted in JavaScript or Jinja templates or inside another partial. Any entity used in them will make the template in which the partial is inserted to be reevaluated when the entity changes its state.
Note: Partials will automatically use the variables set in the js_variables or jinja_variables (depending on the kind of template in which they are inserted).
Partials example with a JavaScript template
in YAML format:
js_variables:
supervisor_update: update.home_assistant_supervisor_update
os_update: update.home_assistant_operating_system_update
partials:
supervisor_version: |
const supervisorVersion = state_attr(supervisor_update, "latest_version");
updates: |
@partial supervisor_version
const osVersion = state_attr(os_update, "latest_version");
order:
- new_item: true
item: info
name: |
[[[
@partial updates
return `Info ${supervisorVersion}`;
]]]
info: |
[[[
@partial updates
return `OS ${ osVersion }`
]]]
href: '/config/info'
icon: mdi:information-outline
in JSON format:
{
"js_variables": {
"supervisor_update": "update.home_assistant_supervisor_update",
"os_update": "update.home_assistant_operating_system_update"
},
"partials": {
"supervisor_version": "const supervisorVersion = state_attr(supervisor_update, 'latest_version');",
"updates": "@partial supervisor_version const osVersion = state_attr(os_update, 'latest_version');"
},
"order": [
{
"new_item": true,
"item": "info",
"name": "[[[ @partial updates return `Info ${supervisorVersion}`; ]]]",
"info": "[[[ @partial updates return `OS ${ osVersion }`; ]]]",
"href": "/config/info",
"icon": "mdi:information-outline"
}
]
}
Partials example with a Jinja template
in YAML format:
jinja_variables:
supervisor_update: update.home_assistant_supervisor_update
os_update: update.home_assistant_operating_system_update
partials:
supervisor_version: |
{% set supervisorVersion = state_attr(supervisor_update, "latest_version") %}
updates: |
@partial supervisor_version
{% set osVersion = state_attr(os_update, "latest_version") %}
order:
- new_item: true
item: info
name: |
@partial updates
Info {{ supervisorVersion }}
info: |
@partial updates
OS {{ osVersion }}
href: '/config/info'
icon: mdi:information-outline
in JSON format:
{
"jinja_variables": {
"supervisor_update": "update.home_assistant_supervisor_update",
"os_update": "update.home_assistant_operating_system_update"
},
"partials": {
"supervisor_version": "{% set supervisorVersion = state_attr(supervisor_update, 'latest_version') %}",
"updates": "@partial supervisor_version {% set osVersion = state_attr(os_update, 'latest_version') %}"
},
"order": [
{
"new_item": true,
"item": "info",
"name": "@partial updates Info {{ supervisorVersion }}",
"info": "@partial updates OS {{ osVersion }}",
"href": "/config/info",
"icon": "mdi:information-outline"
}
]
}
