Timeout / Countdown Timer on CRM WebUI

In my previous post : Session Time out warning message on UI , I wrote about the session warning message popup on WebUI. It was my first work in JS on WebUI. Many people found it helpful. Many found a bug in that. Well, anyone with some JS knowledge could have fixed that.

In this post, i’ll tell you about creating a Timeout Timer on WebUI so that user can see how much time is remaining in the session. This is again achieved by htm page of ‘CRM_UI_FRAME/WorkAreaViewSet ‘

Step 1 : Get the session timeout value from ‘rdisp/gui_auto_logout’ parameter, table : TPFET.

Step 2 : html and JS code :-

<span id="countdown" class="timer" style="display: block; margin: 0px auto; text-align: center;"></span>
<script>
var seconds = <%= ls_proftab-PVALUE %> ;
var start = 0;
function secondPassed() {
    var minutes = Math.round((seconds - 30)/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
    }
document.getElementById('countdown').innerHTML = "Time out in " + minutes + ":" + remainingSeconds;
    if (seconds == 0) {
        document.getElementById('countdown').innerHTML = "Time Up";
        start = 0 ;
    } else {
        seconds--;
        setTimeout(secondPassed, 975);
    }
}
function secondStart() {
seconds = <%= ls_proftab-PVALUE %> ;
    start++;
  if (start == '1')
  { secondPassed() ; }
}
thtmlbRegisterOnLoad(secondStart);
</script>

There was more to this code then just the timer. See my next post for more interesting features.

P.S. : Few portions of the code have been pulled out as that was not relevant here. Correct syntax errors in this JavaScript if any.