villhellm / custom-sidebar Goto Github PK
View Code? Open in Web Editor NEWCustom Sidebar for Home Assistant
Custom Sidebar for Home Assistant
Hi,
I installed the 'custom-card' correctly in Home Assistant v0.107.7.
Your card is ideal for what I need to use.
Put the only 'item:' that you can hide is the 'map'. Any of the others are ignored completely.
order:
I have browser_mod loaded and per your instructions I don't need to add
extra_module_url:
- /hacsfiles/custom-sidebar/custom-sidebar.js
but I do in order for sidebar code to be run.
Latest browser_mod (oct28), latest ha (118.4, latest custom_sidebar via HACS 0.2.2
Custom items become unusable in 0.115.0b1 with the following error in debug:
7/hacsfiles/custom-sidebar/custom-sidebar.js:154 Uncaught TypeError: Cannot read property 'querySelector' of null at getSidebar (/hacsfiles/custom-sidebar/custom-sidebar.js:154) at run (/hacsfiles/custom-sidebar/custom-sidebar.js:127)
My config:
`ns:
This might be a fairly simple feature request, but I'd like to see the option to add separators to the sidebar.
Something similar to what can usually be seen between the Settings and Notifications entry.
After the latest upgrade of Home Assistant 2021.11.0 custom-sidebar stopped working with the below error:
2021-11-03 20:35:42 ERROR (MainThread) [frontend.js.latest.202111030] https://<homeassistant_url>:8123/hacsfiles/custom-sidebar/custom-sidebar.js?hacstag=223008910022:162:66 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')
I have tried hide: true which is in your discription and hidden: true which is in your example.
order:
- item: notifications
- item: overview
- item: supervisor
- item: hacs
- item: configuration
- item: developer tools
- item: Deconz
bottom: true
- item: history
hidden: true
- item: map
hide: true
- item: logbook
hide: true
And they both dont work any hints.
First of all - Fantastic work on this one, really awesome!
I don't think it's currently possible, so suggesting a new feature.
Make the user/not_user directive accept multiple users.
If you don't want to break existing setups, add a users/not_users one that will work with lists instead of single entries.
Could you add an exception for admins, so that administrator items can be customized independently?
My default customizations hide some sidebar items, but I would like to make an exception to show all sidebar items for administrators.
Thanks!
I'm just starting to play with this and it's working great for moving sidebar icons around and hiding ones that I don't want. I also love that I can add new items to the sidebar, but the name of the new time doesn't appear to display in a tooltip like I see for the default items when the sidebar is collapsed.
Examples:
Expanded, showing the "Server Controls" text for the new item:
Setting the name does change the text when the sidebar is open, but I just get no tooltip/popup when it's collapsed.
Hi,
Sorry, I don't think that's a real issue... maybe (or certainly ?) my bad but it' not working for me.
I searched for a way to contact you elsewhere but I didn't find so I'm raising this issue.
I installed HACS 1.4.1 on my Home Assistant 0.114.3, then I installed Custom Sidebar 0.1.7 using HACS.
I followed all instructions :
I added function in my configuration.yaml
frontend:
extra_module_url:
- /hacsfiles/custom-sidebar/custom-sidebar.js
I created my sidebar-order.yaml using exemple at first
order:
- item: map
hide: true
- item: developer tools
href: /developer-tools/state
- item: overview
- item: history
bottom: true
- item: logbook
bottom: true
I restarted HA but nothing happen.
I can see a new line as Javascript in Resources
/hacsfiles/custom-sidebar/custom-sidebar.js
Maybe I missed something ? Is there anything else to do to get it work ?
Thanks by advance,
Regards,
I installed this and followed the guides. It seems not having any effect. Not any sign of live in the logs either. I have a Dutch version, so i used the exact text as the UI shows to me:
order:
- item: Overzicht
- item: Geschiedenis
- item: Kaart
hide: true
- item: Mediabrowser
hide: true
- item: Ontwikkelhulpmiddelen
href: /developer-tools/state
bottom: true
- item: Logboek
bottom: true
- item: Automatiseringen
new_item: true
href: config/automation/dashboard
icon: "mdi:cog-sync"
bottom: true
- item: Instellingen
bottom: true
- item: HACS
name: Extenties
bottom: true
Works fine if it is administrator but not normal users.
I have tried every way to get exceptions working, and they simply wont. My goal here is:
When I run this code, everyone get the "All" view, including tablet:
title: All
order:
- item: map
bottom: true
- item: overview
- item: history
bottom: true
- item: logbook
bottom: true
- item: supervisor
bottom: true
- item: Shopping List
hide: true
- item: Media Browser
hide: true
- item: Terminal
hide: true
- item: Server Controls
bottom: true
- item: HACS
bottom: true
- item: File editor
bottom: true
- item: Energy
bottom: true
- item: developer tools
href: /developer-tools/state
bottom: true
exceptions:
- user: tablet
order:
- item: map
hide: true
- item: developer tools
hide: true
- item: File editor
hide: true
- item: HACS
hide: true
- item: Server Controls
hide: true
If I change it to - not_user: tablet
nothing changes. In fact if I make any changes under exceptions, nothing is changed no matter the user, device, or order.
Any tips?
Eg. if install NodeRed or ESPHome through add-on, the NodeRed/EPSHome can be openned without leave the main interface of HomeAssistant.
In case NodeRed/ESPHome is not installed as add-on but seperate application, and adding a Href to their address through side-bar customization, is it still possible to open the link in iframe of HomeAssistant?
Could you add a name: option to allow the item: found to be displayed with a different name.
For example
I have phpMyAdmin showing in my sidebar because I use Mariadb. I would like the sidebar to show 'MariaDb' instead of 'phpMyAdmin'. So I imagine the entry might be (if this was achievable)
order:
- item: php
name: MariaDb
bottom: true
Hello,
I am running home assistant 0.115.2 (latest release) and am using custom-sidebar. I have manually loaded it. It seems to be working but I keep getting this error in the logs:
http://localhost:8123/local/custom-sidebar.js:62:22 Uncaught TypeError: Cannot read property 'length' of null
My config file is this:
order:
- item: overview
hide: false
- item: dashboard
- item: routines
- item: history
- item: sensors
- item: layout
- item: logbook
hide: false
- new_item: true
item: Integrations
href: /config/integrations
icon: "mdi:server"
bottom: true
- item: developer tools
bottom: true
- item: configuration
bottom: true
Again, it seems to be working but not sure why this message would be coming up.
Thank you very much. Great module.
I have both "Home" and "ESPHome", and without exact matching "Home" matches both items. But when I turn on exact matching, it doesn't seem to work. I tested it on all of my items, and it only matched a few of them even though I am using the correct exact titles.
Looking at the code, I think that might be because it uses the innerHTML JavaScript function. It has some code that strips out a specific empty comment string (twice?), however many of my sidebar items have seemingly random IDs inside that comment string, so I think the entire comment is being included in the exact match condition.
Would it make more sense to use textContent instead of innerHTML so that it only includes the actual visible text? Then there should also be no need to try and strip the comment tags out.
Just installed this frontend plugin and I'm getting the following error in my log.
HA version: 0.110.3 / HassOS 3.13
Custom Sidebar version: v0.1.2
Running Pi4
Log Details (ERROR)
Logger: frontend.js.latest.202005195
Source: components/system_log/__init__.py:209
First occurred: 1:55:56 PM (1 occurrences)
Last logged: 1:55:56 PM
https://<my_HA_server>/hacsfiles/custom-sidebar/custom-sidebar.js:62:22 Uncaught TypeError: Cannot read property 'length' of null
Hi
Module doesn't work with 2023.4 version.
Any update in the future ?
Thanks
Loading the config file didn't work for me.
There was a 404 present on req.open("GET", "/local/sidebar-order.yaml?rnd=" + random());
I replaced the following line in the JS and the GZ
req.open("GET", "/hacsfiles/custom-sidebar/sidebar-order.yaml?rnd=" + rando());
//req.open("GET", "/local/sidebar-order.yaml?rnd=" + random());
and now it's working - but I assume more people will run into this problem
Hi,
On https://xxx.xxx.x.xxx:8123/lovelace/default_view my side bar doubles up items and looks like:
but on every other page (eg. https://xxx.xxx.x.xxx:8123/hassio/dashboard) it shows up right:
What's causing this?
This is my sidebar-order.yaml:
order:
- item: Overview # Overview
- item: map
hide: true
- item: Logbook # Logbook
- item: history
hide: true
- item: HACS # HACS
href: /hacs/entry
- item: File Editor # File Editor
name: File Editor
href: /core_configurator/dashboard
- new_item: true
item: Automations # Automations
href: /config/automation/dashboard
icon: "mdi:robot"
- new_item: true
item: Scripts # Scripts
href: /config/script/dashboard
icon: "mdi:script-text"
- item: Media Browser # Media Browser
hide: true
- item: deCONZ #deCONZ
href: /core_deconz/dashboard
bottom: true
- item: Developer Tools # Developer Tools
href: /developer-tools/state
bottom: true
- item: Supervisor # Supervisor
href: /hassio/dashboard
bottom: true
- new_item: true
item: Snapshots # Snapshots
href: /hassio/snapshots
icon: "mdi:camera-plus"
bottom: true
- item: configuration # Configuration
href: /config/dashboard
bottom: true
- new_item: true
item: Server Controls # Server Controls
href: /config/server_control
icon: "mdi:server"
bottom: true
Thanks!
Hi!
Awesome plugin, been looking for something like this. ๐
It all works like a charm, but if you have the sidebar open on page load you could see reordering happen. Is it possible to hide menubar on load and display it after all dom elements have shifted order? I know it is just a beauty error/bug but ##anyway
Hi,
Custom Sidebar used to work for me in 2021.5.5 but in 2021.6.3 I can't get it to show up.
This is my first time having this respo when an update has come up - is there something I need to do?
Thanks
Getting the following error in the HA log:
hacsfiles/custom-sidebar/custom-sidebar.js:160:46 TypeError: undefined is not an object (evaluating 'getConfigurationElement(elements).cloneNode')
The code in the custom-sidebar.js is the following:
function createItem(elements, item) { var cln = getConfigurationElement(elements).cloneNode(true); if (cln) { cln.querySelector("paper-icon-item").querySelector("ha-icon").setAttribute("icon", item.icon); cln.querySelector("paper-icon-item").querySelector("span").innerHTML = item.item; cln.href = item.href; cln.setAttribute("data-panel", item.item); elements.insertBefore(cln, elements.children[0]); } }
Installed version is 0.2.2, HA OS 2020.12.1.
Best Regards
installed as per instructions (except moved it to /www/custom-ui/custom-sidebar/custom-sidebar.js and updated url in configuration.yaml and in the js to the sidebar-order.yaml file)
when loading the following error shows:
custom-sidebar.js:7 Uncaught SyntaxError: Unexpected token '<'
problem with the DOCTYPE tag
When I do a hard refresh (CTRL+SHIFT+F5) of any page in the sidebar other than the main overview page, or go there through a direct link, the custom sidebar order doesn't load. This is with custom sidebar installed through HACS, and browser mod installed as well. When I add the frontend section to my config file, the sidebar order does load properly, immediately, regardless of which page I'm opening. Sadly though, this results in all items that are new_item
's to appear twice in the sidebar. However, that only happens when going through a proxy, i.e. homeassistant.mywebsite.com
. It doesn't happen on mylocalip:8123
. It's not a massive problem, but it is quite annoying. Issue #35 has roughly the same thing going on with the doubling up of the new_item
items.
After the latest update of HA (Docker) the logs have been moved to the configuration page which sparked the idea that it'd be pretty nifty to be able to make custom entries with this integration:
order:
- item: custom
name: "Logs"
icon: mdi:note-text
href: /config/logs
I am using custom-sidebar with home assistant 0.112.5. I have moved a couple of the dashboards, configuration and integrations to the bottom. However when I first load up home assistant and log in, those two dashboards are highlighted for some reason in the sidebar. The picture shows what I am referring to. If I visit them and then leave them the highlight goes away. I realize its not a huge problem but still inconsistent with im sure the way its supposed to work :)
Please let me know if you have any idea why this may be happening.
Here's my sidebar-order.yaml config:
order:
- item: overview
hide: true
- item: dashboard
- item: routines
- item: history
- item: sensors
- new_item: true
item: Integrations
href: /config/integrations
icon: "mdi:server"
bottom: true
- item: developer tools
bottom: true
- item: logbook
hide: true
- item: configuration
bottom: true
I'd like to change the "Home Assistant" text above the sidebar
Issue from custom-header FR
Hi, thanks for your job!
Is it posible to block profile button?
If you refresh the web page (in a web browser) appear for one second, all side bar icons and you can choosse them. This is a way to hack the restrictions. Is possible to don't show all items to avoid this?
Thanks!
Hi,
Would it be possible to add an option to enable an order dynamically (or maybe there is already a way ?).
I would like to enable a custom order according to the state of an input_boolean.
My use-case is the following: Usually the order configuration will disable most sidebar items, leaving only things like dashboard, logbook and history. When I switch an input_boolean (like "dev mode") in the dashboard, it would use another order which shows most items.
Let me know if it's not clear.
Thank you !
Hello,
I would like to submit an idea for improvement.
I created some links with custom-sidebar which would need to be integrated into the interface by keeping the menus on the left side.
If this is something that can be added as option, I think it would be great !!!
Thanks.
installed though HACS store.
It appear in folder /www/community/custom-sidebar/custom-sidebar.js
=======
OK I got it. This case closed.
I updated to version core-2021.11.3, and when I try to add a new item it doesn't work for me, and it disorganizes the order that I already have configured.
I would like to thank you for any help with the solution.
Thanks to the creators of this add-on, it is very helpful.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.