SAP Analytics Cloud ( SAC ) has introduced new widgets in Application designers such as Timer, Tab Strip, Panel etc. Here in this blog , we will be talking about the tab strip and timer widget and it’s use case.
Tab Strip:
As name implies, Tab Strip is a container widget that is used to view tabbed pages. We can add multiple tabs and place widgets within each tab. It acts as its own separate canvas. By default, the tab strip comes with 2 tabs but we can add as many from the builder panel and change text for each Tab.
Tab Script has scripting events onSelect which will be executed whenever the end-user changes the tab.
Timer:
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:
In this blog, we will add a tab strip widget and create 4 tabs. In each tab we will add charts. And then we will create an application where its tabs/pages change automatically when user clicks on Play button and stops whenever he/she wants by clicking on stop button.
Addition to this we will add two right and left helper button for manually changing the tabs from left to right or right to left.
Now, lets go and see how it can be used in SAC:
I hope you have basic understanding of SAP Analytics cloud , application designer and how applications can be created in it.
Pre-requisite for learning SAP Analytics designer is to have understanding of Javascript.
Step 1: Open SAC, From the top select Create and then go to Analytic Application.
Step 2: Add a tab strip widget into Canvas area of application. Add multiple charts in each of the tabs.
** I have used a shape to hide the header of the tab strip.
Step 3 : I have added 4 images in the canvas :
Step 4 : create the timer object : Timer_1 :
Step 5 : Now Create functions leftToRight() and rightToLeft() which will be invoked when pressing the above buttons that will change the tabs from left to right or right to left.
Step 7 : Add scripts for each of the buttons to perform actions:
Play Button :
Start the timer object which will invoke the Timer_1 function.
Stop Button :
Stops the timer.
Left Button :
triggers the function leftToRight() in order to change the tabs manually from left position to right.
Right Button :
triggers the function rightToLeft() in order to change the tabs manually from right position to left
Now in the timer function, we need to define the interval for which the tabs changes automatically.
Here is the demo :
Conclusion :
With SAP Analytics Cloud Analytics Designer you can create applications for data analysis to meet sophisticated business requirements. It provides a dedicated development environment with advanced scripting capabilities.
Tab Strip:
As name implies, Tab Strip is a container widget that is used to view tabbed pages. We can add multiple tabs and place widgets within each tab. It acts as its own separate canvas. By default, the tab strip comes with 2 tabs but we can add as many from the builder panel and change text for each Tab.
Tab Script has scripting events onSelect which will be executed whenever the end-user changes the tab.
Timer:
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
In this blog, we will add a tab strip widget and create 4 tabs. In each tab we will add charts. And then we will create an application where its tabs/pages change automatically when user clicks on Play button and stops whenever he/she wants by clicking on stop button.
Addition to this we will add two right and left helper button for manually changing the tabs from left to right or right to left.
Now, lets go and see how it can be used in SAC:
I hope you have basic understanding of SAP Analytics cloud , application designer and how applications can be created in it.
Pre-requisite for learning SAP Analytics designer is to have understanding of Javascript.
Step 1: Open SAC, From the top select Create and then go to Analytic Application.
Step 2: Add a tab strip widget into Canvas area of application. Add multiple charts in each of the tabs.
** I have used a shape to hide the header of the tab strip.
Step 3 : I have added 4 images in the canvas :
- Play Button
- Stop Button
- Right Button
- Left Button
Step 4 : create the timer object : Timer_1 :
Step 5 : Now Create functions leftToRight() and rightToLeft() which will be invoked when pressing the above buttons that will change the tabs from left to right or right to left.
function leftToRight() {
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_4");
}
else if (key === "Tab_4")
{
TabStrip_1.setSelectedKey("Tab_1");
}
}
Function rightToLeft() {
var key = TabStrip_1.getSelectedKey();
if (key === "Tab_4")
{
TabStrip_1.setSelectedKey("Tab_3");
}
else if (key === "Tab_3")
{
TabStrip_1.setSelectedKey("Tab_2");
}
else if (key === "Tab_2")
{
TabStrip_1.setSelectedKey("Tab_1");
}
else if (key === "Tab_1")
{
TabStrip_1.setSelectedKey("Tab_4");
}
}Step 7 : Add scripts for each of the buttons to perform actions:
Play Button :
Start the timer object which will invoke the Timer_1 function.
Timer_1.Start(0);Stop Button :
Stops the timer.
Timer_1.Stop();Left Button :
triggers the function leftToRight() in order to change the tabs manually from left position to right.
PageHelper.leftToRight();Right Button :
triggers the function rightToLeft() in order to change the tabs manually from right position to left
PageHelper.rightToLeft();Now in the timer function, we need to define the interval for which the tabs changes automatically.
Here is the demo :
Conclusion :
With SAP Analytics Cloud Analytics Designer you can create applications for data analysis to meet sophisticated business requirements. It provides a dedicated development environment with advanced scripting capabilities.
- SAP Managed Tags:
1 Comment
