Hi Team
Need a hint - how to create a ‘navigate-back’ button to place in a subview, so it goes back to the dashboard from where the subview where launched. Can see there is a lot of discussion on this, but have not been able to make it work… guess this feature must be here… The arrow in the top left works, but would like to have a larger button.
So, what to do ?
/Jørn
It’s just a web page. You may be able to do this with a button:
button:
- name: "Main Page"
tap_action:
action: url
url_path: "http://homeassistant.local:8123/lovelace-hasp/home"
The action might be:
tap_action:
action: navigate
navigation_path: /lovelace-hasp/sprinklers
Let us know if this works.
Yes - it can see that, if you have a subpage that is just called from one place. But if the same subpage can be called from different dashboards, then I would need to get back to the one that called the sub page. Just like the ‘arrow’ in the top line…
/Jørn
I think you are looking for breadcrumbs. I am not aware if the previous page URL is available to the UI. I have this on my home page and each button opens a different view.
A subview’s header already has this “back” button (“<“), why do you need one more?
Ahhhh, it is probably because a long infinite issue “Back button does not work”.
Yes agree… already have the back button in the top line.
But would like to make one in the view that is larger and might be more intuitivt for the users…
I see, and - as I wrote above - the “Back” button is not working properly: if user opens more-info, more taps on that button are needed.
I use a Mushroom Chips Card for this. You can select the “back” chip and it brings you back to your previous view, even across dashboards.
In addition have a slightly different use-case though.
I have a Dashboard for Tablets and a dashboard for phones … and a generic dashboard for views I use in both.
Now I like to find a way to navigate from a view in the generic dashboard to the “home”-view of either the tablet- or phone-dashboard, depending on where I came from.
Have not found a solution for this yet.
This is probably the “hackiest” solution to the lack of a navigate back button, but it does work, is browser agnostic (I think), works on the companion apps and is easy to use once you are set up.
I’m sure there are a bunch of problems with it, but hey ho, none of the other solutions I found was quite right for me. My main requirement is because my wall tablet doesn’t have the header shown and I wanted a way to get back to the previous page when there were several paths to a sub-page. It’s a bit esoteric so I can understand why it doesn’t get much main-stream traction. Like others I also considered using the mushroom back chip, but that didn’t style in with the section tile buttons I’m using all over the place.
Basically, you create a file called nav_back_helper.js and dump it in your /config/www/scripts folder on your HA box.
It should contain this code:
window.hassConnection.then(() => {
let goBackTwice = false;
window.addEventListener("popstate", () => {
// If the first back just occurred, do the second now
if (goBackTwice) {
goBackTwice = false;
history.back();
}
});
setInterval(() => {
if (location.href.endsWith("#BACK")) {
// Remove the #BACK entry from history
history.replaceState(null, "", location.href.replace("#BACK", ""));
// Trigger the first back; the popstate listener will trigger the second one
goBackTwice = true;
history.back();
}
}, 100);
});
console.info(
`%cNAV-BACK-HELPER\n%cVersion: 0.0.2`,
"color: green; font-weight: bold;",
""
);
Then you “Edit your dashboard”, click the “three-dots” menu and click “Manage Resources”.
On this page, click the “+ Add resource” button and put the URL to /local/scripts/nav_back_helper.js?v=0.0.2 and ensure you have selected “JavaScript module”, then click “Create”
Now, refresh your Lovelace page and you’re ready to go.
You can use any UI element to trigger it … I use a Tile card, set the action to “Navigate” and type #BACK into the navigation path
type: tile
entity: input_button.navigate_placeholder
name: Back
icon: mdi:arrow-left-bold
hide_state: true
vertical: false
tap_action:
action: navigate
navigation_path: "#BACK"
icon_tap_action:
action: none
features_position: bottom
Click on the button and watch the browser navigate back to the previous page.
The navigation path puts #BACK onto the existing URL rather than trying to load a full new content from the HA server. The piece of JavaScript that you installed is watching the current location 10 times a second (you can faff with this if you want). If it notices that there is #BACK on the href, it will go back twice in the history, once to skip the navigation to “#BACK” and the second to actually go back to your previous page.
Vile isn’t it? 
Super, ich danke Ihnen! Ich war schon lange auf der Suche nach einer solchen Lösung. Danke für Ihre Bemühungen…