Skip to Content

Display count down in WebClient UI

First let’s have a look at what is achieved: Once you click work center “Jerry count down”, the count down is displayed with a small animation.
The steps to build this application are almost the same as Step by step to create Bar Chart in Webclient UI.
1. Create a new WebUI component with a view main.htm:
Paste the following source code for the created view:
<!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 src="count/jquery.lwtCountdown-1.0.js"></script>
  <link rel="Stylesheet" type="text/css" href="count/main.css"></link>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Countdown demo</title>
</head>
<body>
  <div id="container">
    <h1>Jerry's count down demo</h1>
    <h2 class="subtitle">Time left for year 2017</h2>

    <div id="countdown_dashboard">
      <div class="dash weeks_dash">
        <span class="dash_title">weeks</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
      </div>

      <div class="dash days_dash">
        <span class="dash_title">days</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
      </div>

      <div class="dash hours_dash">
        <span class="dash_title">hours</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
      </div>

      <div class="dash minutes_dash">
        <span class="dash_title">minutes</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
      </div>

      <div class="dash seconds_dash">
        <span class="dash_title">seconds</span>
        <div class="digit">0</div>
        <div class="digit">0</div>
      </div>
    </div>
    <script language="javascript" type="text/javascript">
      jQuery(document).ready(function() {
        $('#countdown_dashboard').countDown({
          targetDate: {
            'day':    31,
            'month':  11,
            'year':   2017,
            'hour':   23,
            'min':    59,
            'sec':    59
          }
        });
      });
    </script>
  </div>
</body>
</html>
As you see I hard code the last second of year 2017 as the time to count down here, feel free to replace with your own date and time.
2. Go to tcode SE80, tab MIME Repository, create a new folder named count and import these nine files. You can download the files from my github.
3. Create a new work center and put the ui component into it.
Please find step by step about how to achieve it from this wiki page How to add an custom UI component into a new work center.
3 Comments
You must be Logged on to comment or reply to a post.
  • Hi Jerry,

    We have a requirement to Show a timer in our BSP. Below is my Code which if run individually in HTML works fine. But if I integrate in BSP then Buttons are shown but “time” span id is only shown as “***”. Can you please kindly have a look and suggest.

     


    <!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 “0000” + num;
    return s.substr(s.length – size);
    }

    function formatTime(time) {
    var h = m = = 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);
    = 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>

     

    Thanks in Advance!

    Hema