Default destination for Subview back button

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.

I do not think the back button function is handled at all by HA.
It is just the call of the back function in the browser.

Thanks @WallyR .

If that’s how it works then there’s no fix.

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. :slight_smile:

1 Like

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");
1 Like

I have not tested your creation, but still nice! :smiley:

I searched more on the forum and found this post.

You can actually already set a “back_path” variable! Too bad it’s not visible in the interface.

I’ll keep my script for now since I don’t need to set this variable on all subsections.

Thanks @Mincka

I appreciate your coding efforts but, I’ve opted for the built in option. It’s not as flexible as what I suggested but it’s more maintainable.

Thanks again!

1 Like