Redirect user to custom dashboard when landing on overview page

Currently, there’s not a way to globally set a default dashboard for all users/devices. (See - and vote! - for this feature request)

Until that feature comes around, I have put together a hacky little workaround to eliminate this friction point for the other members of my household. Basically, it’s a small bit of javascript that looks for the default “Overview” dashboard URL and redirects them to the desired default dashboard.

In the config/www folder, I created a js file called nooverview.js with the following content.

setInterval(function()
{
    if (window.location.pathname.startsWith("/lovelace/") || window.location.pathname == "/lovelace")
    {
        console.log("Get out of here!");

        var currentDefaultPanel = localStorage.getItem("defaultPanel");

        if (currentDefaultPanel != "\"lovelace-home\"")
        {
            localStorage.setItem("defaultPanel", "\"lovelace-home\"");
            
            window.location = "/lovelace-home/0";
        }
    }
}, 1000); 

Note that the /lovelace-home/0 URL path is custom to my setup. This has to match your desired dashboard URL. Likewise, the default panel of “lovelace-home” (the value includes the double quotes) corresponds to the dashboard path.

This is doing a check every second because subsequent navigations do not perform a full page load. So it is just watching to see if the window’s location changes to the overview URL. (Event driven would be better but it’s a light weight check.)

Next, update your configuration.yaml to include this javascript when the frontend is loaded. To do this, add the following yaml:

frontend:
  extra_module_url:
    - /local/nooverview.js

  extra_js_url_es5:
    - /local/nooverview.js

The /local/* URL paths map to the /config/www/* folder on the file system.

It’s not perfect but is working for me. Please provide feedback on ways to improve it. However, note that this is just a stop-gap measure.

Cheers

1 Like