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

[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?

[doubleDD (Edi)]

Hi!
Unfortunately never made it work the way it was, never was able to find a simple way to refresh dashboard (without browsermod od fullykiosk), so I had to rework my dashboard such that it doesn’t need refresh to work properly. (Ended up using conditional cards for all those elements that needed refresh, maybe it could help you as well)
Would still be interested to see it working using the same .js script as before.

[ndbroadbent (Nathan Broadbent)]

Hi everyone, I just revisited this topic since I’m setting up a Amazon Fire Tablet (with the Fully Kiosk app.)

I updated the JS to handle the changed notification message and it’s working again:

function refreshOnLovelaceChange() {
    const urlSearchParams = new URLSearchParams(window.location.search)
    if (urlSearchParams.get('kiosk') !== 'true') { return }

    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.includes('dashboard was updated')) {
        console.log("Refreshing page...")
        location.reload()
    }
};

setInterval(refreshOnLovelaceChange, 500);

I also added a check for the ?kiosk=true query param since I only want auto-refresh to happen in kiosk mode.

@RayLation Thanks for the tip, that’s a great idea! Home Assistant has a really nice FullyKioskBrowser app integration as well, which calls the remote API:

It has a load_start_url button that you can press to reload the initial URL. So I’ve set this up with an HA automation:

alias: Reload Home Assistant on Fire Tablet when Lovelace is updated
description: ""
trigger:
  - platform: event
    event_type: lovelace_updated
condition: []
action:
  - service: button.press
    data: {}
    target:
      entity_id: button.fire_tablet_load_start_url
mode: single

This works really well and reloads the page instantly, instead of waiting for a few seconds. Thanks!