Skip to Content
Technical Articles
Author's profile photo Sreemoyee Mallick

Newsflash using Timer in SAP Analytic Application

Hello Readers !!

In this blog post, I will talk about how we can create the following Newsflash effect (or any animation effect) in a dashboard by applying Timers.


Animation using Timers

I have used 2 Timers, both have been initialized in Application – onInitialization using Timer.start().

Use Case 1 :


Timer1 in Action

Here, I want to view the details for each country in my list after an interval of 2.5 seconds. For this I have used an array “countries” to store all the countries and a script variable “counter” to keep a count of the iterations. Once the last country in my list is displayed, I am restarting the timer. The script is given below:

var countries = Chart_Key.getDataSource().getMembers("CountryRegion");
		Text_Key.applyText("Key Highlights for "+countries[counter].description);
		Text_Key.applyText("Overall Key Highlights");

Accordingly, I am changing the chart heading for the corresponding country being shown.


Use Case 2 :

Here, I want to view the news highlights in a horizontal slide motion as shown below.


Timer2 in Action

For this, I have used a second Timer and an array PANELS which stores 4 panel containers. The panels contain the charts. Depending on the timer, the panels are shifted to the left and the leftmost panel is shifted to the rightmost end. A script variable ANIMATION_INTERVAL is set to 0.1s to control the Timer runtime. The script for the onTimeout() function is given below:

// One panel container contains 4 horizontal panels.
//PANELS = [Panel_1, Panel_2, Panel_3, Panel_4];


var numOfPanels = PANELS.length;
var moveStep = 0.1; 

var firstPanel = PANELS[0];
var leftMarginOfFirstPanel = firstPanel.getLayout().getLeft().value; 
var panelWidth = firstPanel.getLayout().getWidth().value; 
var padding = 0;

if(leftMarginOfFirstPanel >= moveStep) {
	for(var i = 0 ; i < numOfPanels; i++) {
		var layout = PANELS[i].getLayout();
		layout.setLeft(LayoutValue.create(layout.getLeft().value - moveStep, LayoutUnit.Percent));
{ // Move the first panel to end
	firstPanel.getLayout().setLeft(LayoutValue.create((panelWidth + padding)* numOfPanels, LayoutUnit.Percent));
	for(i = 0 ; i < numOfPanels - 1; i++) 
		PANELS[i] = PANELS[i+1];
	PANELS[i] = firstPanel;


Timers can be used in Analytic Application to create different types of animation effect on Tab strip, Page book, etc based on the user’s requirement.

References –

[Please note – I have used a dummy mocked up dataset to create this blog. The data does not imply real figures in any capacity and are just some random values.]

Hope this article helps. Thanks for reading.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo James Barlow
      James Barlow

      Hi there,

      In use case 2 - what are the layout settings of the 4 panels?
      e.g. in the design menu are they configured to use px or % etc?

      Author's profile photo Sreemoyee Mallick
      Sreemoyee Mallick
      Blog Post Author

      Hello James,

      The layout of the 4 panels are as follows:


      Panel Layout

      Hope this helps.