Jason Yang

Jason Yang

Jason Yang is the Product Owner in the SAC Analytics Designer development team with over 10+ years of experience in Business Analytics.

Keep in touch

Subscribe for the latest news, updates, tips and more delivered right to your inbox.

Subscribe to updates



Connect with us

In this blog I would like to introduce the new Timer object in Analytics Designer. Timer object enables you to start a timer to trigger timing events. By leveraging the feature of a timer, you can realize different scenarios such as:

  • create animations
  • send notifications to end users regularly
  • refresh your analytics application in a certain interval of time

To further delve into its usage, I will share two samples for your reference. You can download the samples from the bottom of this blog.

Script APIs:

Timer_1.start(delayInSeconds: number): void

Timer_1.stop(): void

Timer_1.isRunning(): boolean

Timer_1.onTimeout // event

Sample 1. Create Animation

Let’s look at the demo first:

In this demo, we add animation to the header above, making the widgets shift from right to left repeatedly.

We use Timer + Layout API.

//Start a timer


//To make the Widget moving, the Layout API is used to dynamically change the position of the widget.

// These are the 4 panels we want to apply animation to

PANELS = [Panel_10, Panel_11, Panel_12, Panel_13];

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;




Sample 2. Automatically play the application

This is an interesting requirement coming from customer. This customer wants an application that is displayed in a big screen with its pages automatically played in turn similar as a page book and can be manually stopped at will.

We can do it with Timer + TabStrip.

In order to make a TabStrip widget look like a page book, a small tip is to hide the header of the Tabstrip for example using a shape, then use API TabStrip_1.setSelectedKey(TabID) to dynamicly “slide” the tab.

Then start a timer to repeat this action.

//Here’s the code sample to switch and slide the tabs.

var key = TabStrip_1.getSelectedKey();

if (key === "Tab_1")




else if (key === "Tab_2")





else if (key === "Tab_3")





Hope this blog could give you some inspirations when you meet similar use cases.

Enjoy your exploration with Analytics Designer!

  • Sample applications(based on release 2019.20): link
  • Documentation: link

SAP Analytics Cloud earns a top ranking from BARC

See how SAP Analytics Cloud performed in the world’s largest survey of Business Intelligence software users.