Timer in Web Dynpro ABAP

Timer is a very essential UI element in many applications and creating a timer in Web Dynpro ABAP seems to be a little critical task in the versions prior to NetWeaver 7.1 where Island technologies are not allowed and only Iframe is available. Recently, I got an acquaintance with this problem and I ended up at a solution which I wish to share here as it would be useful for many. My solution uses Iframe and Javascript to create a timer. However, there are two of the main problem that one can face. One is the TimedTrigger component itself. It fires an action at every n second from when the previous action was fired but not from the start of execution of the application. Second, refreshing the Iframe will reload the HTML page resulting in resetting the timer. I have tried to provide a solution for both here.

First create a Web Dynpro ABAP Component and create the following context node either in Component Controller or View Controller as per your requirement.

IFRAME_SRC - STRING
END_TIME - TIMS
TRIG_DELAY - I

Now add an Iframe UI Element in the layout wherever you want to place your timer and bind the src property of the component with the IFRAME_SRC attribute of the context node. Now we are going to create a HTML page and import it into the Webdynpro environment as a MIME object. The source of the HTML file is as follows. This code will create a count down timer of minutes and seconds. You may not need to change this code if you are implementing a count down timer.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script type="text/javascript">

var minute=5;
var second=10;

function init()
{
    var query = window.location.search;
    minute = query.substring(query.indexOf("min=")+4,query.indexOf("&"));
    second = query.substring(query.indexOf("sec=")+4);
    if(second<10)
        second = "0".concat(second);
    document.getElementById('min').innerHTML = minute;
    document.getElementById('sec').innerHTML = second;
    window.setInterval(timerUpdate,1000);
}

function timerUpdate()
{
    var secstr;
    second--;
    if(second<0)
    {
        second=59;
        minute--;
    }
    if(second<10)
        secstr = "0".concat(second);
    else
        secstr = second;
    document.getElementById('min').innerHTML = minute;
    document.getElementById('sec').innerHTML = secstr;
}

</script>
</head>

<body onload="init();">
<span id="min">0</span>:<span id="sec">0</span>
</body>
</html>

Save the above file as ’timer.html’ and import it into the Webdynpro environment.

Create a new TimedTrigger element in the layout and bind the delay property of the element to the TRIG_DELAY context attribute.

When you want to start the timer, store the time at which the timer should end in the END_TIME attribute of context. In my case, I’m doing this process in WDDOINIT method.

method WDDOINIT .

  data endtime type t.

  endtime = sy-uzeit + ( 60 * 2 ).

  wd_context->set_attribute
   ( exporting name = 'END_TIME' value = endtime ).

  wd_context->set_attribute
   ( exporting name = 'IFRAME_SRC' value = 'timer.html?min=1&sec=0' ).

  wd_context->set_attribute
   ( exporting name = 'iframe_visible' value = abap_true ).

endmethod.

WDDOMODIFYVIEW method will be called whenever the screen is updated. So, we are going to handle the problems here. First, we are passing the correct remaining time through query to the HTML file. Second, we are updating the remaining number of seconds in the to the TimedTrigger element.

method WDDOMODIFYVIEW .

  data: timerem type tims,
        endtime type tims,
        iframe_src type string,
        min type string,
        sec type string,
        delay type i.

  wd_context->get_attribute( exporting name = 'END_TIME'
                             importing value = endtime ).

  timerem = endtime - sy-uzeit.

  move timerem+2(2) to min.

  if timerem+4(1) = '0'.
    move timerem+5(1) to sec.
  else.
    move timerem+4(2) to sec.
  endif.

  concatenate 'timer.html?min=' timerem+2(2)
                '&sec=' sec into iframe_src.

  wd_context->set_attribute(
      exporting name = 'IFRAME_SRC' value = iframe_src ).
  
  delay = ( timerem+2(2) * 60 ) + timerem+4(2).
  
  wd_context->set_attribute(
      exporting name = 'TRIG_DELAY' value = delay ).

endmethod.

Now write the action that want to perform on the OnAction of the TimedTrigger UI Element. The timer is ready!

fareez.info

Timer in Web Dynpro ABAP