79
Views
6
Comments
How to destroy a JS event listener created in another JS node
Application Type
Reactive

Hi, I am trying to modify the ODC Session Timeout Warning forge component from Outsyslems Labs, so that the timer refreshes when there is activity such as mouse movement.
I added the following code to the InitInterval_JS in the InitTimer action.

Here you can see my attempt to destroy the event listener by trying to pass a reference out with a parameter in line 22 and 26, but I dont really know what I am doing.

And the following onDestroy

...in an attempt to destroy the listener. The rest of the code works as expected, except when navigating between screens, after which I get the error "Invalid call of the 'ResetTimers' client action of the 'MainFlow.Screen1' since the latter is not currently active. This is likely due to a platform's client action being used as an event handler or in a setTimeout function."

Is there something simple I am missing? Or should I try refactor this code to use a global client JS function? 
I have attached the Custom Session Timeout Warning oml where I have made the changes.

Thanks in advance for your help and expertise!

Best regards,
Mitchell

CustomSessionTimeoutWarning.oml
2025-03-19 07-39-30
Rifaz

Hi @Mitch JT ,

It doesn't work because you are trying to access the object from the another script.

To overcome this, Write all the code in a single script file and add that file to the Script.

Encapsulate this action (document.removeEventListener('mousemove', EventListenerFunctionID)) in a new function. 

for eg:

destroyLastActivity() {

 document.removeEventListener('mousemove', EventListenerFunctionID );

}

Add the above function at the bottom of the same script in the first screenshot.

Now your script file contains 2 functions, updateLastActivity and destroyLastActivity.

  • Add the script file to the Screen or Application or Block level.
  • create two client actions and call the 2 functions from the javascript inside the action

          1. updateLastActivity

          2. destroyLastActivity 

You can refer to this O11 forge component which uses the same concept. 

https://www.outsystems.com/forge/component-overview/21064/countdown-timer-client-action-o11


2017-04-20 10-11-42
Mitch JT

Thanks for the help @Rifaz
I have moved the functions to a script. However, I need to call the screen action $actions.ResetTimers from within the updateLastActivity function but this is not possible. This causes an error in the browser: Uncaught ReferenceError: $actions is not defined

Do you have any further suggestions, considering this? Did I interpret your instructions correctly?

Thanks and kind regards

2025-03-19 07-39-30
Rifaz

Hi @Mitch JT ,

I am trying to figure out the solution for the above mentioned scenario. However I hope you got the solution for this problem "How to destroy a JS event listener created in another JS node". 

However this is a different problem, you can mark this as a solution and create a new request in the forum for, how to call Outsystems action from the external script.

Thanks



2021-09-06 15-09-53
Dorine Boudry
 
MVP

Hi @Mitch JT,

replying to your last question only :

the $actions.... is only available inside javascript nodes in a flow, so yes, not in your script.

A possible option is to have a javascript node in, let's say the OnInitialize, where you make the function globally available.

for example, something like this

window.executeSomeScreenAction = $actions.SomeScreenAction;

Dorine

2024-03-19 12-46-02
Bruno Gomes

Thank you very much!

2024-12-10 04-40-04
Gitansh Anand

Hi @Mitch JT , here is one more solution, just create variable(s) in a global JS and add that JS as required script in your screen, then in the first JS node assign whatever you want to access in second node to those variable(s) and you will be able to access them.

For example, first create a variable "EventListnerId" in global JS and add this JS in screen as required script, then in the first node instead of using a output variable "EventListnerFunctionId" use the global variable defined above and similarly in the second node instead of using input variable "EventListnerFunctionId" use the global variable.

Thanks
Gitansh Anand

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.