Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
0 Kudos
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:

[video width="1920" height="1080" mp4="https://blogs.sap.com/wp-content/uploads/2020/03/00270efcabf1f0e9228fcc116e618d05-img.mp4"][/video]

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

Timer_1.start(ANIMATION_INTERVAL);

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

               

                Util_Animation.doAnimation();

}

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.

[video width="1920" height="1080" mp4="https://blogs.sap.com/wp-content/uploads/2020/03/bcd1e31929496dc8af49cfde2f651905-img.mp4"][/video]

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")

            {

                        TabStrip_1.setSelectedKey("Tab_2");

            }

else if (key === "Tab_2")

            {

                        TabStrip_1.setSelectedKey("Tab_3");

                       

            }

else if (key === "Tab_3")

            {

                        TabStrip_1.setSelectedKey("Tab_1");            

            }

 

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

2 Comments