Thanks I read the github discussions and found this and it worked.
order:
- item: config
icon: mdi:cog
match: href
bottom: true
- item: developer-tools
icon: mdi:dev-to
match: href
bottom: true
- new_item: true
item: 'Restart'
text_color: 'var(--error-color)'
icon: 'mdi:restart'
icon_color: 'var(--error-color)'
bottom: true
on_click:
action: 'open-dialog'
type: 'restart'
Thank you so much for this great addition to HA sidebar.
For anyone who wants to restart HA by one click, here is a code which I use, and itâs works
- new_item: true
item: 'Restart'
#text_color: 'var(--success-color)'
icon: 'mdi:restart'
#icon_color: 'var(--success-color)'
bottom: true
on_click:
action: 'javascript'
code: |
callService("homeassistant", "restart", {});
order: 15
trying to use a partial with
boiler: sensor.opentherm_dhw_temperature
const boil_temp = states(boiler,with_unit=true);
results in ReferenceError: Can't find variable: with_unit even though it is valid Jinja
can we use that syntax?
leaving that with_unit out makes to work.
Edit
I now discovered⌠that I need to set them explicitly as Jinja variables of course. silly me. However:
jinja_variables:
boiler: 'sensor.opentherm_dhw_temperature'
partials:
data: |
const afval = (states(trash));
const afval_kleur = states(trash_color);
const gevaar = is_state(danger,'on');
const lek = is_state(leakage,'on');
const boil_kleur = states(boiler_kleur);
{% set boil_temp = states(boiler,with_unit=true) %}
and finally:
- item: ui-data
match: href
order: 2
.....
info: |
@partial data
Zonneboiler: {{boil_temp}}
info_color: >
[[[ @partial data
return boil_kleur; ]]]
still doesnt work correctly
what am I doing wrong here? We Are supposed to be able to ,mix and match jinja and js are we?
because. if I do only this:
data: |
{% set boil_temp = states(boiler,with_unit=true) %}
and leave all the other js variables commented I do get
indicating the strings and values are correct, but all of the others are not appliedâŚ
for now ill be using
info: |
[[[ @partial data
return 'Zonneboiler: ' + Math.round(boil_temp) + '°C'; ]]]
# info: |
# @partial data
# Zonneboiler: {{boil_temp}}
I installed the plugin via HACS. I want to use a YAML configuration. so I add this to my configuration yaml.
frontend:
extra_module_url:
- /hacsfiles/custom-sidebar/custom-sidebar-yaml.js
Do I place sidebar-config.yaml in /homeassistant/www/ since custom-sidebar is located in
/homeassistant/www/community/ ?
If I use this will the default sidebar disappear and only show My Home? For example, will Overview, Map, Energy disappear?
title: 'My Home'
order:
- new_item: true
item: 'Automations'
href: '/config/automation'
icon: 'mdi:robot'
order: 1
- item: 'overview'
hide: true
If I want to revert changes do I delete sidebar-config.yaml?
If I want to keep some of the default sidebar options, I will have to create a yaml with Overview, Map, Energy, Logbook etc?
Do I have to include add-ons which show-up in the sidebar? For example, File Editor?
This will have Overview, then Automations, then Devices?
title: 'My Home'
order:
- new_item: true
item: 'Logbook'
href: '/logbook'
icon: 'mdi:robot'
order: 1
- item: 'overview'
hide: false
- new_item: true
item: 'Automations'
href: 'config/automation/'
icon: 'mdi:robot'
order: 2
- item: 'overview'
hide: false
- new_item: true
item: 'Devices'
href: 'config/devices/'
icon: 'mdi:robot'
order: 2
- item: 'overview'
hide: false
At the moment, the JavaScript states method doesnât allow a second parameter as the Jinja counterpart.
You cannot mix JavaScript with Jinja, if you use JavaScript declarations in a partial (like const), that partial could be used in a JavaScript template but not in a Jinja one.
No, it is not possible, that is the error.
Try to see if this returns the units:
info: |
[[[ @partial data
const units = state_attr(boiler, 'unit_of_measurement');
return 'Zonneboiler: ' + Math.round(boil_temp) + units; ]]]
No, you need to place it (as the documentation states) inside the <config directory>/www/ directory.
If you donât configure an item to be hidden, it will not. Nothing will be hidden by default unless you add the proper configuration to do so.
No, you only need to revert the changes in the sidebar-config.yaml file itself.
If you want to keep some items, do not hide them. As I mentioned, only the items that you configured to be hidden will be hidden.
I donât understand well what you are trying to ask.
I now understand what custom sidebar does.
By default it will not hide anything unless the user specifies in the yaml.
I was worried if I added the yaml I would lose my sidebar and have to add everything back instead of the opposite.
Ok after days of stuffing around with it, especially when I donât know what I am doing.
Installed never before used browser etc. Testing etc
Asking Chat gpt and doing everything asked
Suspecting one of the themes uninstalling them
Suspecting one of the hacs installs and uninstalling each one ------
to finally find the issue is GitHub - KoljaWindeler/ytube_music_player: YouTube music player for homeassistant
Only thing is I redownloaded it and it still only works without it(uninstalled it).
Are you able to shed some light on why? I want to use both if possible.
thanks
yep that works.
Except we really need the extra space:
info: |
[[[ @partial data
const unit = state_attr(boiler,'unit_of_measurement');
return 'Zonneboiler: ' + Math.round(boil_temp) + ' ' + unit; ]]]
which makes it a bit moot to set the constant, compared to the earlier string I used
info: |
[[[ @partial data
return 'Zonneboiler: ' + Math.round(boil_temp) + '°C'; ]]]
quick questionâŚ
can owe use the colors we set on items in other settings options of that same item?
I now do:
info_color: >
[[[ @partial energy
return nettov ? 'var(--power-color)' : 'brown'; ]]]
divider: true
divider_color: >
[[[ @partial energy
return nettov ? 'var(--power-color)' : 'brown'; ]]]
but might be nice if we could reference the info_color in the divider_color directly, since it is set above it
info_color: >
[[[ @partial energy
return nettov ? 'var(--power-color)' : 'brown'; ]]]
divider: true
divider_color: >
[[[ return info_color; ]]]
?
of course we can take that to the partials itself:
energy: |
const nettov = states(netto) < 0;
const energy_color = nettov ? 'var(--power-color)' : 'brown';
and use
info_color: >
[[[ @partial energy
return energy_color; ]]]
divider: true
divider_color: >
[[[ @partial energy
return energy_color; ]]]
in the item config.
Still, referencing an itemâs property inside the item could be useful?
The check that you need to do is with the Network tab to see which resource is loaded by your system. Do you mean that if you install that custom add-on your system starts to load the old version of custom-sidebar and if you uninstall it it loads the new one correctly?
No, it is not possible because templates are processed in an async way, it doesnât work in a way that a template is processed and its result can be used in the next template on your code (there is no order and each template is processed on its own peace).
That is what partials are intended for, if you need to reuse a variable in multiple places, the place to put it is in a partial.
That is hard to achieve, because it would be hard to know which template should be rendered first because its result is used in another template. But even if it is achieved, the result would be delayed templates, because there should be a logic that extracts all the templates first and then in a smart way it should determine which ones should be rendered first and which ones should wait for the result of the previous.
Partials is the way to go.
The old one wasnât working at all and as far as I know and I had removed it. I meant when I redownloaded youtube music player it still would not work thinking there might have been an installation issue.
If youtube music player is installed home assistant shows default menu
Uninstalling it loads your custom-sidebar but I didnt test a lot.
while youtube music player is installed I can see custom-sidebar loads and then drops out. Only reason I know this is I kept hitting refresh in the browser when I invoke a restart and I see custom-sidebar menu changes etc working and then goes back to home assistant default menu order. Hope I made sense.
After stuffing around I have restored my backup yesterday and youtube music player is still installed. I was hoping I dont have to uninstall it. If you need me to do tests I can. thanks
Remember that you need to forget about custom-sidebar entirely and test with your Network tab. The same exercise that you did before and in which you saw the resource of the old custom-sidebar being loaded even if you uninstalled it you need to repeat it until you see the new resource being loaded and the old one disappear. So my recommendation was to forget about any custom-sidebar debugging, just test with the Network tab. Until you donât see the new resource being loaded, forget about custom-sidebar configuration, custom-sidebar debugging, items in the sidebar or anything else. Try to make your system not loading the old resource.
Yeah I am not loading old one at all.
I am referring to new one. The new one as in yours does load and drops out if I have youtube music player installed.
I have seen this in the developer console when home assistant is restarted but it soon disappears after a few seconds and I refresh the browser.
Your system is loading it (taking into account your screenshots).
Forget about what custom-sidebar should do, do not debug custom-sidebar, debug your Network tab, you should not enter to debug custom-sidebar until (these are your screenshots):
custom-sidebar-v2-fixed.js and you start to see custom-sidebar-yaml.js in your network tab.
custom-sidebar-yaml.js has not been loaded)Do not look at your sidebar or the behaviour of your sidebar, until you see that in your Network tab the new resource is loaded and the old one not. When that occurs you will see the console.info of custom-sidebar. After that, and only after that, you can start debugging custom-sidebar.
Ok looks like I was wrong about whats interfering.
I have restored my backup as I mentioned so I removed youtube music player but this time it still did not work.
I made a mistake I think it was Browser mod. I removed Browser Mod and restarted and it worked. So restored my backup again and this time I only disabled the Browser Mod integration and restarted and it works. So not sure whats the issue with Browser Mod.
Update:
Ok I was checking out Browser mod and found this in the settings, which I have never touched and could be the issue I guessâŚ
I can confirm custom-sidebar loads fine with Browser Mod loaded in my test environment.
If you are using custom-siderbar then you would not use the Sidebar Frontend settings for Browser Mod. Otherwise they should work fine together.
Please post your issue to https://github.com/thomasloven/hass-browser_mod/issues including console log showing issue when you have Browser Mod loaded.
EDIT: @elchininet can confirm, as Browser Mod just stores Sidebar information that Home Assistant reads, even if you do set any Sidebar settings in Browser Mod, custom-sidebar will take precedence. Browser Mod would not interfere with custom-sidebar in this regard.
Just following up here. Root issue was an incorrect URL for Dashboard resource for card-mod.js having a quote (") at the end. This was being copied through by Browser Mod to frontend resource url, then casing all frontend resource load to fail. I have created a Browser Mod issue to fix, though user can fix URL and issue goes away.
