cancel
Showing results for 
Search instead for 
Did you mean: 

Display Timer in CRM Webui

hematietz
Discoverer
0 Kudos

Hi Experts,

We have a requirement to Show a timer in our BSP. From below blog i understand I can directly use HTML instead of HTMLB.

https://blogs.sap.com/2017/05/27/dipslay-count-down-in-webclient-ui/comment-page-1/#comment-450113

Below is my Code which if I run individually in HTML, works fine. But if I integrate in BSP( HTML page of the view) then Buttons are shown but “time” span id is only shown as “***”. If anyone can suggest, would be great help! Thanks in Advance!


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en” lang=“en”>
<head>
<script TYPE=“text/javascript” src=“Rothballer/jquery.min.js”></script>
<script TYPE=“text/javascript” src=“Rothballer/jquery-ui.min.js”></script>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
</head>

<body onload=“showTime();”>
<span id=“time”></span>
<input type=“button” value=“start” onclick=“startTimer();”>
<input type=“button” value=“stop” onclick=“stopTimer();”>
<SCRIPT LANGUAGE=“JavaScript” TYPE=“text/javascript”>

var clsStopwatch = function() {
// Private vars
var startAt = 0; // Time of last start / resume. (0 if not running)
var lapTime = 0; // Time on the clock when last stopped in milliseconds

var now = function() {
return (new Date()).getTime();
};

// Public methods
// Start or resume
this.startTimer = function() {
startAt = startAt ? startAt : now();
};

// Stop or pause
this.stopTimer = function() {
// If running, update elapsed time otherwise keep it
lapTime = startAt ? lapTime + now() – startAt : lapTime;
startAt = 0; // Paused
};

// Reset
this.resetTimer = function() {
lapTime = startAt = 0;
};

// Duration
this.time = function() {
return lapTime + (startAt ? now() – startAt : 0);
};
};

var x = new clsStopwatch();
var $time;
var clocktimer;

function pad(num, size) {
var s = “0000” + num;
return s.substr(s.length – size);
}

function formatTime(time) {
var h = m = s = ms = 0;
var newTime = ”;

h = Math.floor( time / (60 * 60 * 1000) );
time = time % (60 * 60 * 1000);
m = Math.floor( time / (60 * 1000) );
time = time % (60 * 1000);
s = Math.floor( time / 1000 );
ms = time % 1000;

newTime = pad(h, 2) + pad(m, 2) + pad(s, 2) ;
return newTime;
}

function showTime() {
$time = document.getElementById(‘time’);
update();

}

function update() {
$time.innerHTML = formatTime(x.time());
}

function startTimer() {
clocktimer = setInterval(“update()”, 1);
x.startTimer();
}

function stopTimer() {
x.stopTimer();
clearInterval(clocktimer);
}

function resetTimer() {
stopTimer();
x.resetTimer();
update();
}
</SCRIPT>
</body>
</html>

Accepted Solutions (0)

Answers (0)