[SOLVED] How can I get my dashboard to refresh automatically, instead of showing the "Refresh?" prompt?

[ndbroadbent (Nathan Broadbent)]

I have a dashboard running on a screen in my kitchen. I use the kiosk-mode add-on to hide the header and sidebar: GitHub - maykar/kiosk-mode: 🙈 Hides the Home Assistant header and/or sidebar

I want to be able to make changes on my computer, and then have these changes automatically updated on the kitchen dashboard. At the moment, I need to VNC into the Raspberry Pi and then press Ctrl+R to reload the page.

It shows this message:

The Lovelace UI configuration for this dashboard was updated. Refresh to see changes?

Is there any way I can get it to automatically click the “REFRESH” button? Or even skip this popup and just reload the window? Is that a setting in Home Assistant? I think I would like that as the default anyway.

Otherwise it might be nice to have this as an option in the view settings, or as a query parameter.

I briefly tried to include my own JavaScript code in the page so that I could detect the presence of this message and refresh the page, but I couldn’t figure out an easy way to do this either. I found this lovelace-html-card add-on, but it crashes with an error:

I’m surprised that it seems so hard to get some custom JS and HTML on the page, since it seems like a lot of Home Assistant users are programmers.

I just got the Home-Assistant-Lovelace-HTML-Jinja2-Template-card add-on working:

But I’m just really confused why none of my JavaScript is running inside <script> tags:

Can’t get any alerts to fire and console.log or document.write aren’t working. I’m a bit new to the Shadow DOM and shadow roots, so I don’t really understand how that works.

[ndbroadbent (Nathan Broadbent)]

It took me ages to figure this out, but I finally figured out how to load some custom JS.

Docs: Frontend => Loading extra JavaScript

You only need to use extra_module_url for any modern browser, can probably ignore extra_js_url_es5.

Added to configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom.js

Then the tricky was figuring out what /local means in this context. I thought it was a file path, but it’s actually a URL path. It means home assistant will import this custom.js file from: http://homeassistant.local:8123/local/custom.js

And this /local URL path is actually served from the /config/www directory. So you need to open up the Studio Code Server extension and go into the www directory, then create a new custom.js file.

Now I’ve got some custom JS running!

Will post again once I figure out how to code the auto-refresh.

[ndbroadbent (Nathan Broadbent)]

Got it to work! This is the code in /config/www/custom.js:

function refreshOnLovelaceChange() {
    const ha = document.querySelector("home-assistant")
    if (!ha || !ha.shadowRoot) return
    const nm = ha.shadowRoot.querySelector('notification-manager')
    if (!nm || !nm.shadowRoot) return
    const haToast = nm.shadowRoot.querySelector('ha-toast')
    if (!haToast) return
    if (haToast.text === 'The Lovelace UI configuration for this dashboard was updated. Refresh to see changes?') {
        console.log("Refreshing page...")
        location.reload()
    }
}
setInterval(refreshOnLovelaceChange, 500);

[le_top]

Great ! I am more bugged by the reload due to the upgrade of a frontend customisation or HA core upgrade.

Thanks for sharing, could probably be a HACS FrontEnd component to cope with I18N over time, other reasons to reload and to bring it to the masses. Possibly even a service to ask for a reload … .

[curtis-r]

I’ve built nightstand android tablets with an alarm clock Loveleace. When I make HA updates or reload and don’t refresh the tablets, the alarm sound may fail in the morning. Could I use this javascript to auto-refresh those tablets?

[ndbroadbent (Nathan Broadbent)]

Hi @curtis-r, yes this should work fine for refreshing the lovelace dashboards on your tablets. Hope you can get it working!

[exynym (Andreas Treuer)]

Made an account just to like this! Will make my life so much easier when editing the lovelace yaml from VSCode and not having to switch to the browser window, hit refresh and close the dialog each time

[doubleDD (Edi)]

Hello @ndbroadbent and @exynym,
Is there any other option/way to run location.reload() other than from .js?
I’m completely unfamiliar with JavaScript, but have this problem Theme change on Companion app (on tablet with Android 8) and was thinking that it could possibly be a solution, instead of relentlessly restarting HA 2x daily.
I know that I cannot possibly write .js script by myself, but was also sad to found that no event is fired when you press Refresh on tablet screen. So is there some other way for us dummies to achieve similar results?
Thanks in advance!

[doubleDD (Edi)]

YAASSSS!!!
I was actually able to use your solution for my problem. It’s not the cleanest solution, but it works.
As I said, Refresh button does not produce any event, however there is an event when Lovelace is updated. So I implemented your code (that triggers on Lovelace update), and I just force the same event when I need Lovelace refresh.
And it refreshes my tablet and resolves initial problem!

As I said, not the cleanest solution, but I’ll take it. Unless/untill I learn JavaScript or find someone willing to modify your original script.
Thanks guys!

[Protoncek (Pavel)]

Hi!
I found your js and it works great…in english. Can you tell where you picked up those english words? OK, “haToast.text” is text, displayed at the bottom, that part i get. But how to get local translation of “Refreshing page…”? (i run Slovenian translation).
I Also found out that it seems that this script works only in browsers, but not in HA native apps (not on ipad and also not on android phone). Is there any setting for this?

And, of course: MANY thanks for this script!

[doubleDD (Edi)]

Hi,
I have this script working on my tablet in HA Companion app, and just tried and seems to be working also in app on iphone. Did you try “turning it off and back on again”, or force stopping the app and starting it back on?
Regarding running it with translation, and these are just my 2 cents, not an expert, I would try replacing the haToast.text with whatever is written at the bottom in slovenian, and removing the “console.log(“Refreshing page…”)” line (it’s inside the if loop, so my guess is that you can either substitute text with whatever you want or completely remove it).
Good luck!

[Protoncek (Pavel)]

I managed to get it working on ipad by rebooting device. But still doesn’t work on android app, though, which is not that important aynway, since i’m using it only on my phone. Main thing is that it works on fully kiosk on my two android tablets on my walls (around the house)
.
Regarding translation: i did replace haToast.text, but it doesn’t work, because i can’t find correct translation for “Refreshing page” (i tried a few, but didn’t succeed).

But, at the end i concluded, that perhaps it’s better this way. Why? Well, i can use english on my tablet on the wall - it doesn’t matter, since i have hidden left menu and top line - so i get auto-refresh there. But, on my PC i’ll stick with slovenian and thus prevent from too frequent auto-refreshing when tinkering with lovelace cards. I have the habbit to keep one browser tab open as a “backup” while i change cards on the other tab. So i can copy/paste old version quickly if anything goes wrong.

It would be nice to know location of that “magic” word, though…

[Protoncek (Pavel)]

Since i don’t want all my devices to auto-refresh but only selected, i kept digging and found this alternative, which is selective and it refreshes lovelace only on selected tablets/PC’s. It’s a part of “browser mod” HACS integration. You just create an automation with trigger: event and add action on desired devices (sample below).

Of course first we must make sure that device has always the same ID, which is achieved with this startup url:

http://192.168.x.x:8123?deviceID=1111111-11111111

on second device:

http://192.168.x.x:8123?deviceID=22222222-22222222

etc…

This way device will always get desired ID. Since i use browser mod for speech also, keeping same ID is essential.
Then just create an automation:

alias: Lovelace refresh when changed
description: ‘’
trigger:

• platform: event
  event_type: lovelace_updated
  condition: []
  action:
• service: browser_mod.window_reload
  data:
  deviceID: 11111111-11111111
• service: browser_mod.window_reload
  data:
  deviceID: 22222222-22222222
  mode: single

One warning, though: this auto-refresh doesn’t work immediately after HA is restarted. In fact, nothing via browser mod works after HA restart (speech, popups…). At that point you must manually refresh tablet (reload page) in order to work again (i use teamviewer to do that).
I guess that it’s browser-mod limitation, maybe right after restart device doesn’t get wanted ID…

[doubleDD (Edi)]

…and with the update to 2022.4.xx it stopped working. I feel like I’m constantly just chasing my own tail with these updates.
Now off to find some other working solution…

[jasonhk (Jason)]

It is because the new version string is updated to “Your dashboard was updated. Refresh to see changes?” . You can modify the script.

    /* check full string */
    if (haToast.text === 'Your dashboard was updated. Refresh to see changes?') {
        console.log("Refreshing page...")
        location.reload()
    }

or

    /* check the keyword to refresh */
    if (haToast.text.indexOf('Refresh to see changes') >= 0) {
        console.log("Refreshing page...")
        location.reload()
    }

[doubleDD (Edi)]

Hi,
Thanks for your reply.
This was actually the first thing I tried, to change the script according to the new text (like your first example). However, it didn’t seem to work - maybe I just didn’t reboot all the necessary things. I’ll check again.
Second one seems more generic, in case they change the text again, so I might go with that option.
Thanks!

EDIT: Nope, I still cannot get it to work. Message appears on screen but nothing happens.

[Protoncek (Pavel)]

Did you try what i wrote above (my last post)? It works like a charm here…

[doubleDD (Edi)]

Hi,
I’m trying to keep my system “simple”, without too many “unofficial” integrations, so at the moment I don’t use browser mod.
I tried going down that route but then everything has some dependencies and update of something creates problems on some other side, so for now I’m trying to stick to barebone HA as much as possible.
But thanks for your reply, maybe I’ll try that option eventually.

[RayLation]

Hello,

If you use Fully Kiosk application (which I higly recommend for a dashboard), you can send a REST command remotely to your tablet to make it reload the StartURL. It’s basically asking your tablet to visit a URL.

https://www.fully-kiosk.com/en/#rest

Thus, you can create an event handler (via node-red or home assistant itself) to call this command upon receiving the “lovelace_updated” event.

I went the node-red route since it’s simpler for me:

If you go the home assistant route, I believe you need to create a RESTful command first, which you will simply call after in your automation.

https://www.home-assistant.io/integrations/rest_command/

VERY simple to implement and works flawlessly. You can do the same after a HASS reboot, listening for the event “homeassistant_started”. I give it a little delay before calling it to make sure everything has loaded properly.

[PickOne]

Hi! You made it work?