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");
if(counter<countries.length-1)
	{
		Text_Key.applyText("Key Highlights for "+countries[counter].description);
		Chart_Key.getDataSource().setDimensionFilter("CountryRegion",countries[counter].id);
		Timer_Region.start(2.5);
		counter++;
	}
else
	{
		Text_Key.applyText("Overall Key Highlights");
		Chart_Key.getDataSource().removeDimensionFilter("CountryRegion");
		Timer_Region.start(2.5);
		counter=0;
	}

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];

Timer_Panel.stop();

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));
	}
} 
else 
{ // 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;
	
	
}

Timer_Panel.start(ANIMATION_INTERVAL);

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 – https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/00f68c2e08b941f081002fd3691d86a7/142a436d0f2a4e97a9af15853ca9b739.html?q=timer

[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.