I use subviews quite a bit because it keeps my dashboards tidy. There is a problem with subviews that I think could be easily fixed.
The problem:
If I have a notification on my phone that, when tapped, takes me to a subview then, the back button doesn’t work. This is not suprising because we didn’t get to the subview from another view so, where would we go back to anyway?
To fix this, I think that subviews should have a default ‘parent’ view. The back button could take us to this view if there is no known view to go back to.
A fix is possible, but it is just a huge rewrite then because every page with a back button needs to have defined where it is coming from and that means every page that link to that page needs to have the value set in the link to the page.
Besides that then this request have been made many times before, so maybe vite for one of those instead.
The mods usually close dublicates, but one should be left open for voting.
In my case, I use bookmarks directly to subviews. I would love to have the ability to “hardcode” the parent view of the back button, so I could actually use it when reaching the subview directly.
From a user perspective, I don’t expect my browser to go back to a previous website (unrelated to HA) when clicking on this button.
If anyone has a workaround for that, I would be happy to know it.
JS Hack Challenge accepted.
After fiddling a little bit with 4o, here’s a script to make the back button navigate to the parent folder.
You may need to adjust it a little bit but in my case, it’s enough to fix the “back to the parent” issue.
Put the script below in:
/homeassistant/www/community/subview-smart-back-button.js
Add this resource to the dashboard:
/hacsfiles/subview-smart-back-button.js?hacstag=146194325419
function handleBackButton() {
const backButton = document.querySelector("home-assistant")
?.shadowRoot?.querySelector("home-assistant-main")
?.shadowRoot?.querySelector("ha-panel-lovelace")
?.shadowRoot?.querySelector("hui-root")
?.shadowRoot?.querySelector("ha-icon-button-arrow-prev");
if (backButton) {
console.log("✅ Back button found and event bound.");
backButton.addEventListener("click", (event) => {
event.preventDefault();
event.stopPropagation();
const currentPath = window.location.pathname;
const parentPath = currentPath.replace(/\/[^/]+\/?$/, "");
history.pushState(null, "", parentPath);
window.dispatchEvent(new Event("location-changed"));
console.log(`🔄 Navigated to: ${parentPath}`);
}, true);
}
}
handleBackButton();
console.log("✅ Subview Smart Back Button Loaded");