Hi,

I have been checking the other post about the topic but I am just not sure how to apply some of the solutions suggested to my case.

Invalid call of the 'ShowPopup' client action of the 'MainFlow.ScreenABC' 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. Consider removing this call by using the 'On Destroy' event of the screen/block or moving your logic to a global client action.

I have a web block whose purpose is just to count a timer and when it expires, show a Popup saying so. Put it into several pages and you will get this error triggering a timeout and moving into another page with the block.

Not sure how to 'remove this call using OnDestroy' or 'move it to global action' especially that the action it itself is just toggling a boolean value (hide/show popup basically).

Hi Juan,

Can you please share how you are implementing timr? Is it using setTimeout javascript function?

Got the codes from the web:


var blinkTab = function(message) {
  var oldTitle = document.title,                                                           /* save original title */
      timeoutId,
      blink = function() { document.title = document.title == message ? ' ' : message; },  /* function to BLINK browser tab */
      clear = function() {                                                                 /* function to set title back to original */
        clearInterval(timeoutId);
        document.title = oldTitle;
        window.onmousemove = null;
        timeoutId = null;
      };
 
  if (!timeoutId) {
    timeoutId = setInterval(blink, 1000);
    window.onmousemove = clear;                                                            /* stop changing title on moving the mouse */
  }
};

var inactivityTime = function() {
    var expiretime;
    var continuetime;
   
    window.onload = resetTimer();
    window.addEventListener('load', resetTimer, true);
    var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
    events.forEach(function(name) {
        document.addEventListener(name, resetTimer, true);
    });

    function redirectToHome() {
        window.location.replace('/test/home');
    }
   
    function expireTimer() {
        $actions.ShowPopup(true);
        blinkTab('Timeout Expiring');
        continuetime = setTimeout(redirectToHome, $parameters.ExpireTime*1000);
    }

    function resetTimer() {
        clearTimeout(expiretime);
        clearTimeout(continuetime);
        expiretime = setTimeout(expireTimer, $parameters.IdleTime*1000);
        // 1000 milliseconds = 1 second
    }
};

inactivityTime();

Great that you have resolved it. So you just have to use clearTimer to reset the time you were creating.

Nikhil Gaur wrote:

Great that you have resolved it. So you just have to use clearTimer to reset the time you were creating.

Nope, I mean that is that codes I have. Not the solution. :)

The customer agreed to remove that blinking message on the tab. Back to the codes with the popup message, the popup still show but behind the scenes there are javascript error as posted in the original message.

Not sure if we can tag this one as resolved since it works as expected but there are js errors behind.



Juan Carlos Elorde wrote:

Nikhil Gaur wrote:

Great that you have resolved it. So you just have to use clearTimer to reset the time you were creating.

Nope, I mean that is that codes I have. Not the solution. :)

The customer agreed to remove that blinking message on the tab. Back to the codes with the popup message, the popup still show but behind the scenes there are javascript error as posted in the original message.

Not sure if we can tag this one as resolved since it works as expected but there are js errors behind.



If you are trying to trigger clear timer in onDestroy even of the block then this problem will occur because when we redirect to other screen then onInitialize event of the block in new screen will be called first after that onDestroy event of the block on previous screen get called. (This I have just checked and noticed)

To solve your problem you can add js in onInitialize event of your block like below

if(typeof myTimer != "undefined") {
    clearTimeout(myTimer);
}
myTimer = setTimeout(function(){ $actions.CallEvent(); }, 5000);

It will first check if timer exists or not. If exists then it will clear the timer then set new timer else it will set the timer directly. 

So when you open page first time it will set the timer and when you redirect to other page it will gain get called and clears first timer and set new one.

I tried it in my block and added on multiple screen and it worked like a charm.

I was able to apply the change however we still got the error:

I put the codes you have suggested in mine:

To clarify, the intended behavior is happening as expected. However, I am just concerned about the javascript errors. That if there are other custom javascripts, it may not work due to this.

Thanks,

JC

Well I need to take back what I said. This error seems to cause the timer firing out in the pages that doesn't have the block. I guess I really need to figure out how to kill the timer.

HI Juan,

You can still use the cleartimeout in the ondestroy event of the block so when you redirect to the page without block your timer will be cleared from ondestroy.

Nikhil Gaur wrote:

HI Juan,

You can still use the cleartimeout in the ondestroy event of the block so when you redirect to the page without block your timer will be cleared from ondestroy.

I am loading the JS along its variables in the OnReady. The problem is, the OnDestroy doesn't know the script and its variables. Thus, it throws an error 'expiretime is not defined'. Tried instantiating the variable again in the OnDestroy but I think the application treats it as another instance of it.

I also don't think I can put the JS in the Required Scripts of the block since I have parameters to it.


Juan Carlos Elorde wrote:

Nikhil Gaur wrote:

HI Juan,

You can still use the cleartimeout in the ondestroy event of the block so when you redirect to the page without block your timer will be cleared from ondestroy.

I am loading the JS along its variables in the OnReady. The problem is, the OnDestroy doesn't know the script and its variables. Thus, it throws an error 'expiretime is not defined'. Tried instantiating the variable again in the OnDestroy but I think the application treats it as another instance of it.

I also don't think I can put the JS in the Required Scripts of the block since I have parameters to it.


Hi Juan,

If you want to create javascript variable in one block and access in other then instead of defining it using var you can directly define.


Do this

expitetime = 30;

instead of

var expiretime = 30;


Then you will be able to access in ondestroy.