Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
1,836
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");
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/142a436d0f2a4e97a9af1...

[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.
3 Comments
Labels in this area