I have searched around the forums here, but not been able to find out how to create a button that links to another view/tab of HA.
I look forward to suggestions!
Thanks,
Tomas
I have searched around the forums here, but not been able to find out how to create a button that links to another view/tab of HA.
I look forward to suggestions!
Thanks,
Tomas
you can use the weblink component.
https://www.home-assistant.io/components/weblink/
in lovelace you can use the link https://homeassistantdomain.org/lovelace/0
Tabs/views are numbered from left to right.
If you are using the traditional fronted check the URL as you switch tabs. I don’t recall if these are unique or not.
I use this in a picture elements card to navigate to another tab/view called alarm_map, i.e. the id of that view is alarm_map:
- type: state-icon
entity: sensor.ready_to_arm
tap_action: navigate
navigation_path: '/lovelace/alarm_map'
style:
left: 60%
top: 5%
Thanks, I found it works best with a picture card, e.g. like this:
- type: horizontal-stack
cards:
- type: picture
image: /local/pic-0.png
navigation_path: '/lovelace/0'
- type: picture
image: /local/pic-1.png
navigation_path: '/lovelace/1'
- type: picture
image: /local/pic-2.png
navigation_path: '/lovelace/2'
- type: picture
image: /local/pic-3.png
navigation_path: '/lovelace/3'
It would be nice though, to know which other lovelace cards work with navigation_path
.
Those who mention it in the documentation do.
Note that the configuration has changed, so your code won’t work on 0.84.
Thanks, I will have a look!
This is strange. After updating to 0.84.2, the picture button links don’t work anymore. Or, they worked briefly after a hassio restart this morning, but now when I connect from work they are not recognized as links anymore. Same on my mobile phone.
I’ am on 0.84.6
Noting that configuration has changed as you mentioned
Trying to get this to work, but nothing happens
Could you point me in the right direction
- title: Living room
path: living_room
cards:
- type: picture
image: /local/graa.png
tap_action:
action: navigation
navigation_path: /lovelace/main/
Should be action: navigate
Thank you…!
I have stared at this for hours…thanks again
For the ones arriving, looking for an answer (quickest anno 2021)
Use button integration;
type: button
tap_action:
action: navigate
navigation_path: /lovelace/meters
icon: 'mdi:cog-transfer'
name: Presets aanpassen
What does the path look like on another dashboard?
I’m using the a windows 8 approach so tile references
using area instead of picture type
please not that you need to make area for every tab
type: grid
cards:
- type: area
area: garden
navigation_path: /lovelace-tile/Garden
- type: area
navigation_path: /lovelace-tile/Office
area: office
- type: area
navigation_path: /lovelace-tile/Bedroom
area: bedroom
- type: area
navigation_path: /lovelace-tile/Bedroom2
area: bedroom2
- type: area
navigation_path: /lovelace-tile/Kitchen
area: kitchen
- type: area
navigation_path: /lovelace-tile/Livingroom
area: living_room
- type: area
navigation_path: /lovelace-tile/Diningroom
area: diningroom
- type: area
area: meterkast
navigation_path: /lovelace-tile/Meterkast
- type: area
area: attic
navigation_path: Attic
and every tab has are return tile
type: area
navigation_path: /lovelace-tile/tiles
area: overview
is there any way that the subview don’t open in a new window each time I click on it ?
On the Android App when clicking on the area (or button in my case) it tries to open a Chrome instance instead of staying in the app and simply change the tab.
The solution is to use “navigate” and not “url” in the command.
Just click on the dashboard you want and look at the last part of the URL. It must be something like:
/lovelace-title1/path1
/lovelace-title1/path2
…
/lovelace-title2/path1
/lovelace-title2/path2
thanks, I had already found it
Thanks for that one
Can you share how u did it? I can’t make it work.
- type: state-icon
entity: device_tracker.tesla_model_3
state_color: false
tap_action: navigate
navigation_path: /dashboard-tesla/0
style:
top: 7%
right: '-2%'
'--iron-icon-height': 80px
'--iron-icon-width': 80px
'--paper-item-icon-color': white