Sidebar External URL Links - NOT ! - But maybe better!

Configuration Frontend
1

I have been using Home Assistant for about a year. Recently I have wanted to put an entry in the Sidebar to link to an external URL.

After many searches, and reading many online posts with many examples, and after spending many hours on several different days trying, I GIVE UP.

I could not get anything to work as I expected.

Then, I stumbled across a simple solution, Yes, it is NOT implemented in the Sidebar as I originally wanted. But it is much simpler and will be very easy to maintain.

This is a cute-trick using: “Vertical Stack Card containing Picture Cards, with NO Pictures”. The default non-picture icon (the glob) with your supplied “Alternate Text” becomes the button to invoke the external URL.

Here is my Dashboard example links:

Ha_Links_01

.
There are several really big advantages of this uses/implementation:

  1. You can provide a Button Link for any favorite Internal or External URL.

  2. No “configuration.yaml” files to edit.

  3. No “www/*.js” files to create, edit and maintain.

  4. A NOOB, like me, can do it without much HA experience.

  5. The buttons can be placed within any Dashboard.

  6. Any internal or external URL can be used, which will pop-up as a Tab on your browser.

  7. The links can be easily edited using the normal Dashboard Card “Visual Editor” (or the Code Editor).

  8. The created card can be easily moved/copied to other dashboards.

  9. Each created button has TWO available actions, one each for the “Tap”, and a “Tap&Hold” mouse clicks, that is: two different URL Links for each button (if desired).

  10. With some clever “Alternate Text” (via multiple leading “…” characters) indented lists can be created.

  11. By using the Stack Label function, buttons can be grouped, or put into sections, by creating multiple Vertical Stack of Picture Cards within the initial Vertical Stack Card.

  12. The only downside, that I know of, is: I would like this type of functionality to be easily available in the Sidebar.

  13. I think the included URL can perform some simple “REST” functions, but a tab will be created.

For a starting place (see image above), here is the example code that can replace any new Card content via the “SHOW CODE EDITOR” function (found at the lower left of any new Card definition). This code will force the card to be a proper “Vertical Stack” card. Of course replace the URLs with your own.

type: vertical-stack
cards:
  - type: picture
    image: http:///none
    tap_action:
      action: url
      url_path: http://192.168.60.100:8123
    alt_text: . . . Ha-Loft
    hold_action:
      action: url
      url_path: http://192.168.60.100:8123/lovelace/cameras
  - type: picture
    image: http:///none
    tap_action:
      action: url
      url_path: http://192.168.70.100:8123
    alt_text: . . . Ha-Barn
    hold_action:
      action: url
      url_path: http://192.168.70.100:8123/lovelace/cameras
  - type: picture
    image: http:///none
    tap_action:
      action: url
      url_path: http://192.168.80.100:8123
    alt_text: . . . Garden
    hold_action:
      action: url
      url_path: http://192.168.80.100:8123/lovelace/cameras
title: External Links

Let me know if you find this helpful.

Have fun with your new External URL button.

–Eldonb

2

Here is an example of an Indented Button URLs

Ha_Links_02

–Eldonb

3

This is my newest/latest new External URL Link Button:

Ha_Links_03

I now have easy access to the Home Assistant Community directly from within HA.

–Eldonb