Companion App & Sidebar Items?

[majorsl]

I installed custom-sidebar with a very simple configuration to test: hiding the media and energy items.

On a web browser, it works perfectly. On the Android Companion App it doesn't seem to hide them. Is this a limitation of HA and how it talks to the companion apps or do I need to add a specific device configuration to my yaml?

[elchininet]

Hi @majorsl,
There is no any limitation with the Android Companion App, I have it myself working without issues. You should be suffering of a caching issue, try to clean the cache of the App, change the version of the JavaScript resource at the end of the URL and restart Home Assistant. If that doesn't work, I am affraid that logging off and logging in again would be your last resource.
Regards

[loocd]

I hope it's ok if I piggyback off this - I've set up the custom sidebar and all works perfectly on Desktop.

But for some reason nothing has changed in the android companion app (2024.7.3-full) (no new items, no name-changes, no reordering, nothing). I've tried deleting and re-adding the server, logging out and re-adding the server, changing the server, clearing the app cache, closing and reopening the app, changing the custom-sidebar version number in configuration.yaml.

I don't know what there is left to do ^^ any ideas?

[loocd]

Wait a second - I just tried one other thing.

I had this in my sidebar-config.yaml:

  - item: external-app-configuration
    match: "data-panel"
    bottom: true

after removing it, the sidebar loads correctly in the Android companion app.
Seems that something about this is wrong and the app couldn't handle that?

Any idea how I can move the app configuration to the bottom?
That's where it is by default, but as soon as I add custom-sidebar and add an element to bottom: true, the app-configuration element moves up

[majorsl]

Wait a second - I just tried one other thing.

I had this in my sidebar-config.yaml:

  - item: external-app-configuration
    match: "data-panel"
    bottom: true

after removing it, the sidebar loads correctly in the Android companion app. Seems that something about this is wrong and the app couldn't handle that?

Any idea how I can move the app configuration to the bottom? That's where it is by default, but as soon as I add custom-sidebar and add an element to bottom: true, the app-configuration element moves up

Actually, would you mind sharing your working config? I still can't get it to work on my Android.

[loocd]

sidebar_editable: false
order:
  ###############
  # hide entries
  ###############
  - item: logbook
    match: "data-panel"
    exact: true
    hide: true
  - item: history
    match: "data-panel"
    exact: true
    hide: true
  - item: todo
    match: "data-panel"
    exact: true
    hide: true
  - item: media-browser
    match: "data-panel"
    exact: true
    hide: true
  - item: calendar
    match: "data-panel"
    exact: true
    hide: true
  ###############
  # rename
  ###############
  - item: lovelace
    match: "data-panel"
    exact: true
    name: "Dashboard"
    order: 1
  ###############
  # change order
  ###############
  - item: energy
    match: "data-panel"
    exact: true
    order: 2

[elchininet]

Hi @loocd,

I don't see any issue with this config that would make the App to break:

- item: external-app-configuration
  match: "data-panel"
  bottom: true

The only thing is that it would not do anything (at least on my Home Assistant instance). In my case the Configuration is named config in its name and in its data-panel property.

Just to let you both know how hard is the caching of Home Assistant. I was using the JSON package until some days ago that I decided to change to the YAML one. I edited the extra_module_url using the YAML one, removed the JSON config and added a YAML config. Everything worked properly on desktop but not in the Companion App, it showed the default sidebar. I cleaned cache in my Android phone, restarter Home Assistant, changed parameters in the extra_module_url, nothing worked, it was still showing the default sidebar. Then I decided to add the JSON config again and it started to work on my phone. So, Android was still loading the JSON module even if I changed it and restarted Home Assistant multiple times. 😕

By the way, this is my config so you can see how I moved the config to the bottom:

---
title: My Home
sidebar_editable: false
order:
- item: overview
  name: Dashboard
  order: 0
- item: deconZ
  order: 1
- item: ESPHome
  order: 2
- item: HACS
  notification: |
    [[[
      const outdatedHacsEntities = Object.values(entities.update).filter(
        (entity) => entity.platform === 'hacs' && is_state(entity.entity_id, 'on')
      );
      return outdatedHacsEntities.length || '';
    ]]]
  order: 3
- item: logbook
  order: 4
- new_item: true
  item: Integrations
  href: "/config/integrations"
  icon: mdi:puzzle
  order: 5
- new_item: true
  item: Automations
  href: "/config/automation"
  icon: mdi:robot
  order: 6
- new_item: true
  item: Nginx Proxy Manager
  href: http://xxx.xxx.xxx.xxx
  target: _blank
  icon: mdi:arrow-decision
  order: 7
- new_item: true
  item: Backups
  href: "/hassio/backups"
  icon: mdi:backup-restore
  order: 8
- item: developer-tools
  match: data-panel
  bottom: true
  order: 9
- item: studio code
  bottom: true
- item: terminal
  bottom: true
- item: settings
  bottom: true
- item: energy
  hide: true
- item: map
  hide: true
- item: calendar
  hide: true
- item: phpMyAdmin
  hide: true
- item: media
  hide: true
- item: history
  hide: true

And this is how it is rendered on desktop and on the Android Companion App:

Desktop	Android Companion App

[elchininet]

By the way. Try this, I tried on my Android App and it is working, it is loading the YAML config again.

https://community.home-assistant.io/t/clear-cache-android-companion-browser-app/527851/4

Edit: I spoke too soon, in my case this it what happens. I think that I just need to have two configs at the same time if I don't want to log out and log in again 😕

[elchininet]

Good to follow this: home-assistant/android#2460

[elchininet]

Solved the cache issue. Follow these steps:

1. Go to Settings > Companion App > Debug > WebView Remote Debug and activate it
2. Use Chrome Remote Debugging: https://developer.chrome.com/docs/devtools/remote-debugging
3. Open chrome://inspect/#devices
4. Inspect the WebView relative to Home Assistant
5. In Application Storage, check Local and Session Storage and Cache Storage and click on Clear Site Data

That's all, cache is gone. It is loading the new config all the time, even after closing the App and opening it again 😃

Anyway, I hope that they solve this in some moment with a native button.

[majorsl]

This is all super helpful, I can't wait to get home and try it. My only issue is that I'm trying to adjust the sidebar to remove the Media items for certain users because it includes security cameras that they don't need access to. I doubt I'm going to either get their phones or give them instructions to clear the cache. I may just have to be hopeful that eventually the cache refreshes on its own.

[loocd]

@elchininet Caching doesn't seem to be an issue for me. As soon as I add the code block mentioned above it goes back to the original sidebar. And as soon as I remove the code block it loads my own config again.

My issue is with figuring out how to move the app-configuration menu to the bottom - not the config option.
App-Configuration is the menu that's being shown only when you are a non-admin user. As an admin this is hidden in the normal config. (see the element just above notifications in this screenshot I found online).

I tried loading it up in the remote dev tools - but for some reason nothing is loading up:

as you got the dev-tools to work: could you maybe help me figure out what the identifier of the app-configuration menu? data-panel would be ideal

[elchininet]

My issue is with figuring out how to move the app-configuration menu to the bottom - not the config option.
App-Configuration is the menu that's being shown only when you are a non-admin user. As an admin this is hidden in the normal config. (see the element just above notifications in this screenshot I found online).

Got it, never saw that sidebar item before

I tried loading it up in the remote dev tools - but for some reason nothing is loading up:

Is that screenshot from your desktop Chrome? It doesn't look like as mine.

It is important that you enable dev debugging, most probably what is happening is that you are getting an error. With that error I would be able to figure it out what is happening. It is hard to reproduce it from my side because that means logging out from one of my devices and logging in again with a non-admin account, something that I would rather avoid 🙃

[loocd]

I'm working with Edge, but this should be pretty much the same thing. It's a bit buggy, sometimes it works sometimes it doesn't. But I finally got this:

The element doesn't have the data-panel attribute.
so I changed it to the following and it works like a charm!

  - item: "#external-app-configuration"
    match: "href"
    exact: true
    bottom: true

Thanks!

[elchininet]

@loocd,
Oh, that is curious, all the items have a data-panel but this ones only has a href with a hash. I think that you can remove the match parameter and use the exact text, it should also work in that way.
Glad that you have solved it 👌
Regards

[elchininet]

@loocd,
If that element doesn't have a data-panel the library will throw an error because it assumes that the data-panel parameter will be always there. That is why it was not working when you add that piece of code. I'll try to submit a fix for that when I have some time.
Regards

[majorsl]

So, my Sidebar (finally) updated today. I updated to HA 2024.9.1 from 2024.8.3. As often happens with a new version, I'm informed that "a new version of the frontend is available" and a reload button. This appears to have cleared whatever caching was happening. Is there perhaps a way to force this from HA without having to wait for a major update?

[elchininet]

Is there perhaps a way to force this from HA without having to wait for a major update?

Unfortunatelly, there is no native way to do that, clearing the App cache doesn't clean the WebView cache. That is what was requested in the Github issue. 🙁

[elchininet]

Hi @loocd,
I have released a new version that should fix the issue about the missing data-panel (it will not do anything but it will not fail the execution). If you can confirm that it works it will be great.

Folks, closing this issue.

[loocd]

Hi @loocd, I have released a new version that should fix the issue about the missing data-panel (it will not do anything but it will not fail the execution). If you can confirm that it works it will be great.

Folks, closing this issue.

I'm sorry, but I can't confirm - it seems I'm still getting the issue when adding

- item: external-app-configuration
  match: "data-panel"
  bottom: true

the entire sidebar-config is ignored on mobile and defaults are restored. Could be a caching issue, but so far any changes were always applied immediately on re-opening the app and this is still true for other changes. So caching seems unlikely.

What does work (as you suggested) is changing to

- item: "external-app-configuration"
  match: "data-panel"
  exact: true
  bottom: true

This doesn't put the item at the bottom, but it also doesn't break the rest.

and just for sake of completeness, this is still the way to go so that the item gets targeted:

- item: "#external-app-configuration"
  match: "href"
  exact: true
  bottom: true

[elchininet]

I'm sorry, but I can't confirm - it seems I'm still getting the issue when adding

That is weird, just reading the code (because I have not tested it) the fix should be enough if the data-panel attribute is not present. It seems that I would need to test it on my side with Chrome debug to see what is exactly the error.

What does work (as you suggested) is changing to

I suggested something easier, removing the match parameter and use the exact text:

- item: "app configuration"
  bottom: true

I'm going to logout of the App and login again with a non-admin user just to check with Chrome dev tools if I can spot the error.

Regards

[elchininet]

Hi @loocd,
I have logged out and login again as a non-admin.
I can confirm that with the new version (4.7.1) you will not have any error if you try to get the data-panel attribute of an item and it is not present.

This is with my normal configuration adding the code that was giving trouble to you:

As you can see in the next screenshot, the plugin complains through warnings about not able to match any sidebar item named external-app-configuration (together with other items as HACS that are not available for a non-admin), but there are no errors and the sidebar is rendered applying the customisations.

And this is adding what I recommended before:

- item: "app configuration"
  bottom: true

As you can see, there are no warnings anymore complaning about "app configuration":

You are clearly suffering from an app caching issue and you are not loading the new version of the plugin. I recommend you to try to clean your WebView cache, or use the code that I recommeded that will not fail even with the previous version (or keep using the one that you are using right now matching href that is more verbose but it will work too).

Regards