I want to create a reusable block that counts how long a mobile user is inactive. Currently i have this setup. I plan to have a modal that displays whenever the Counter reaches a certain number like 200 and below.

I have a Counter (Integer) that is set at 300. Also i have a ShowModal (Boolean) that is by default false.

This is what is inside my "Counting" action. it basically decrements and checks whether its below a certain number or for this example, its 290.

I also have another action named "ResetCounter". It is only an assign node that sets again the Counter to 300.

This is the javascript of my "OnReady" action. I have set it that every 1 second, it would call the "Counting" action. While on the other hand it calls the "ResetCounter" action. 

And Lastly this is my "OnDestroy" action. 

I also have a Required script which only contains the picture below.

 I created a Required Script since i thought that its the only way to declare it globally. 

Initially while in the mobile screen, everything works fine. When i touch anywhere, the counter resets to 300 as expected. Also when i reach the certain value for counter, my ShowModal changes value. My problem is that whenever i move to the same screen via redirection or another screen, this shows up. 

Upon running it in Google chrome and looking at the Console Logs, these show up. 

My initial theory for the errors is that my OnDestroy cannot reference the same functions i have made in the OnReady.


I think that is the cause since i see it in the Event Listeners in chrome but whenever i try to access it directly, it says its not defined. 

For the second error, i think its related since there is still a running Interval in the background that wasn't successfully cleared. 

My Question is that is my implementation of the OnDestroy Actions correct? Am i Missing something or am i doing something that i shouldn't be doing?

If anyone can help me regardless of how to approach my original goal (Create a Mobile timer for inactivity), or anything related with my approach above, that would be much appreciated. 

Hi Kyle,

One of the problems may be here "I created a Required Script since i thought that its the only way to declare it globally.". Why not defining only in the OnReady of your web block? 


Cheers,

Tiago.

Solution

Hi Kyle,


The function is not defined because you don't have it in scope, when your writing code inside a javascript  node, think of it as it was inside a function(){}.

So when you open the second function on the onDestroy, you won't have the previously defined function available.

There may be more ways of doing it, but either you declare it as a window function (window.MyFucntion = function (/* args */) { /* body */ }), since OutSystems mobile apps are SPA the window object will remain there through out the app, or you assign the function to a local variable of type object. something like:


On the OnDestroy handler just pass the LocalObj as input parameter, this way your reference to the function we'll still be there.

I would also add an if typeof inactivityhandler/LocalObj !== 'undefined' before clearing the interval.

Hope it helps

Cheers

Solution