Client Side Timer

I want to detect when a user has been inactive (e.g. hasn’t edited a form field) for 10 minutes. How would I do that in Wappler?

You can use the action scheduler for this. What is it you plan to do when the timer reaches ten minutes?

Fab, thanks @brad, I’ll give that a go!

My plan when it fires is to give the user another 30 seconds to finish their booking or form edit and then close what they are doing - because their action will be locking the use of a resource that another user may wish to use.

Add this to your head

<script src="https://cdn.jsdelivr.net/gh/h-wang/idle@master/src/idle.min.js"></script>

And this to your head after loading the js or at the end of body. Whatever suits your app best.

<script type="text/javascript">
    //_idle('url', '/demo/logout.html');
    //_idle('escape', ['/demo/logout.html']);
    _idle('callback', function(){alert('You are idle dude')});
    _idle('interval', 5000);
    _idle('debug', false);
</script>

Reload page. Don’t do anything. Wait 5 seconds. Profit.

Documentation here:

3 Likes

My example for a client-side timer only with Wappler, Maybe it will be helpful to someone:

<div class="container">

    <div class="row">

        <div class="col">Timer: {{var_timer.value}}</div>

    </div>

</div>

<dmx-value id="var_min" dmx-bind:value="10"></dmx-value>

<dmx-value id="var_sec" dmx-bind:value="59"></dmx-value>

<dmx-value id="var_timer" dmx-bind:value="((var_min.value < 10) ? '0' : '')+(var_min.value)+':'+((var_sec.value <  10) ? '0' : '')+(var_sec.value)"></dmx-value>

<dmx-scheduler id="scheduler_timer"

    dmx-on:tick="run({condition:{if:`(var_min.value == 0) &amp;&amp; (var_sec.value == 0)`,then:{steps:[{run:{action:`scheduler_timer.stop()`}},{alert:{message:'STOPPED'}}]},else:{steps:{condition:{if:`var_sec.value == 0`,then:{steps:[{run:{action:`var_sec.setValue(59)`}},{run:{action:`var_min.setValue(var_min.value - 1)`}}]},else:{steps:{run:{action:`var_sec.setValue(var_sec.value - 1)`}}}}}}}})"

    delay="1">

</dmx-scheduler>
1 Like

We do this with Scheduler, if no activity in 600s it shows a screen saver with a warning (some great css animations out there). No intervention after another 45s releases any resource and forwards on to another page (but, stores their input into local storage for if they wish to return). Based on variables and if the resource is still available will auto-fill/populate the form for them, if otherwise requests new input.