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
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
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
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!