Checking to see if browser tab is inactive

Queries and Resources
1

Is there a way to check to see if a browser tab is active or inactive? For example, we would like to run a query every so often to update data on the page, but only if the browser tab is actually active. Does Retool expose this variable anywhere or offer similar functionality?

2

It is just about possible, but it's not the cleanest - I never managed to find a way for the "disable query" part of the query to work here so I had to have 2 queries.
A query that runs a dummy function periodically (each second) and if the window is active then in its success event it triggers the actual query I want it to run.

image

image

window.myCustomCode = function() {
  return {
    activeWindow: true,
    init: function() {
      document.addEventListener("visibilitychange", () => {
        this.activeWindow = (document.hidden) ? false: true;
        console.log('active window state changed ', this.activeWindow)
      });
    }
  }
}();
window.myCustomCode.init();

This is from a few months ago, likely there's cleaner/better/easier ways than this

1 Like
3

Hi @drewski, I created a FR for this. I'll update you with any news from the Engineering Team. :slightly_smiling_face:

@dcartlidge, that is an impressive workaround! Thank you for sharing.