Open a URL from sidebar in a new window

Share your Projects!
1

Background: My fiancée and I often access a Cookbook plugin within NextCloud from her tablet or one of our phones while making dinner. While we could add the url as a browser bookmark for all of our devices and within each of our browsers, we wanted a way to access NextCloud (or any other urls!) with one quick tap from Home Assistant sidebar.

I wasn’t able to find a step-by-step solution for adding the capability to open a target url in a new window by clicking on a sidebar item. I first attempted to use an iframe panel which would only try (unsuccessfully) to embed my target url into the HA window. I also tried a custom panel, which I couldn’t immediately figure out and frankly didn’t want to spend the time possibly being able to achieve our goal. I wanted a solution that was easier to implement and maintain.

After some research into possible solutions, I came across Villhellm’s Frontend module for Custom Sidebar (https://github.com/Villhellm/custom-sidebar), available in HACS. From my perspective, the Custom Sidebar mod’s summary seems largely centered around its global reordering functionality (which is awesome, since HA native reordering is per user, and per device).

The feature of this mod that we’re after is the “new_item”. While many examples implement new_item in order to add sidebar links to internal HA resources (a direct link from the sidebar to the System Config page, for example), we can leverage it to point to external resources which will open in a new window.

Steps:

  1. Install the Custom Sidebar module using HACS (or otherwise following the linked installation guide for the Custom Sidebar repository).

  2. In HA, navigate to Configuration -> Lovelace Dashboards -> Resources button (lower right poison of the screen, looks like a “file copy” button - two documents stacked upon one another).

  3. Click on the Add Resources button and paste the following Javascript Module path:
    /hacsfiles/custom-sidebar/custom-sidebar.js

  4. Using the File Editor addon or any other method of creating files on your HA box, create the following file:
    /config/www/sidebar-order.yaml

  5. In the sidebar-order.yaml file, add the following:

order:
  - new_item: true
    item: Cookbook
    href: https://192.168.x.x/index.php/apps/cookbook/
    icon: "mdi:silverware-fork-knife"
    bottom: true
  - new_item: true
    item: Item2
    href: https://192.168.x.x/index.php/path/to/another/thing/
    icon: "mdi:timer"
    bottom: true

(Default for bottom is false, so new items will normally appear on top - I chose to have the Cookbook entry appear underneath all other sidebar entries, so I explicitly set bottom to true. See the Custom Sidebar documentation for additional info)

  1. Refresh your browser cache (or otherwise clear/reload your application’s cache) and you’ll see the sidebar changes.
1 Like
2

First of all: Fantastic idea.
It’s this type of customization that makes so much sense (and should have been part of the core product).

However, I’m unable to see any of the items from your example on github.

  1. Installation: manually by copying custom-sidebar.js to the /config/www folder.
  2. Config: creating /config/www/sidebar-order.yaml and pasting the content (github page, step 3)
  3. Restarting HA
    After clearing my browser cache nothing appears on the screen and I can’t find any messages related to this code in the log file?

Do you have any tips?

3

Are you referring to the items from step 5 of my post, or are you referring to the original author’s examples posted on their github repo?

There’s currently a compatibility issue with this addon and starting in HA 2021.11.0 it isn’t working. There’s a github issue with some discussion here:

4

The problem is that after a manual install, when using the example config (Github step 3), nothing appears in the menu.
This happened some time ago and I’m using something else now. When I have some time I will re-test it.

Cheers
DJ

5

I’m not familiar with using the author’s examples or with manual install (I used HACS to get it into my system).

Would you mind sharing the name (and/or links) of the custom sidebar solution you’re using instead?

Regards,
Chris

6