Are eventListeners supported in the platform?

App Building
1
  • I am trying to track the inactivity of the user and control my timer accordingly.

I have created a function trackInactivity. the function looks like this:
const inactivityTimeLimit = 10 * 1000;
let inactivityTimeout;

function handleInactivity() {
isTimerStarted.setValue(false);
Timer.trigger();
timeoutModal.setHidden(false)
}

function resetInactivityTimer() {
clearTimeout(inactivityTimeout);

inactivityTimeout = setTimeout(() => {
handleInactivity();
}, inactivityTimeLimit);
}

function handleVisibilityChange() {
if (document.visibilityState === 'visible') {
resetInactivityTimer();
isTimerStarted.setValue(true)
Timer.trigger()
} else if (document.visibilityState === 'hidden') {
isTimerStarted.setValue(false);
Timer.trigger();
clearTimeout(inactivityTimeout);

}
}

window.addEventListener('mousemove', resetInactivityTimer);
window.addEventListener('keydown', resetInactivityTimer);
window.addEventListener('scroll', resetInactivityTimer);
window.addEventListener('click', resetInactivityTimer);
document.addEventListener('visibilitychange', handleVisibilityChange);

resetInactivityTimer();

In the above code
document.addEventListener('visibilitychange', handleVisibilityChange);
this event listener works as expected.
But the other ones dont. Basically the mousemove keydown and others. Which makes me wonder if adding these eventListeners is supported by retool?

2

is this code in your Preloaded JS or is it in a component of some sort?

3

This code is in a JS Query of a module

4

Hello @Rajvi_Chokshi!

Unfortunately eventListeners on the window is not support by Retool.

Our code runs the app in a sandbox and does not give user code access to the window for user tracking.

We currently have user tracking as a major feature for H2 of this year that our team is looking to add as this as been a common feature request.

I had suggested the custom components library as a temporary work around but it would only work for the HTML elements in the custom component (if at all, not confirmed).

Sorry for the inconvenience!

5

Hi @Rajvi_Chokshi

I just found a workaround that can be added to your SSO options to set the Retool app to log out after a specified amount of time. You could set a timer to refresh this variable when queries run.

You can use UI or env var ( SESSION_DURATION_MINUTES ) to configure it.

Check out the image below, this option is available in version 3.52

image
image1190×1012 56.3 KB

6

i've gotten window event listeners working when adding them to the app Preloaded JS. try adding the window event listeners there if you're able to, this won't work for all use cases but I think for your situation you might be able to use this. I have a small example here of adding a variable and event listener to window. functions and variables need to be assigned to window.function_name = function(){} and can be called anywhere with window.function_name()

@Jack_T's solution is probably the best way to go about things, but I like providing people with options :beers:

1 Like