In the previous blog in this series, we learned about Data Analyzer. In this blog, let us learn about container widgets and how to use them in Analytics Designer.

* * *

Container Widgets

In Analytics Designer, there are three types of widgets that can hold other widgets.

1. Panel
2. Popup
3. Tab Strip

Popup is the container widget that is available for a long time. You can check out the blog here that explains how to use popups in detail.

Panel Widget

The panel will be the most used container widget due to its simplicity. The panel is a simple canvas. Once you add a panel to the main canvas, you can place additional widgets within the panel. The widgets can be rearranged within the panel and the positions will become relative to the panel widget. i.e. consider a chart with left margin as 20px, once it is added within the panel, it will be placed 20px from the left edge of the panel instead of the main canvas.

If the size of the widgets within the panel exceeds the size of the panel, then scroll bars appear by default. You can disable the scroll bar from the Styling panel. You can also drag and drop widgets within Panel in the layout view.

Please note that if you delete a panel widget, all other widgets within the panel will be deleted. Also, please note that the panel widget does not have any script event.

Tab Strip Widget

As the name implies, Tab Strip is a container widget that is used to show tabbed views. You can add multiple tabs and place widgets within each tab. Tabs act as its own separate canvas like a panel. You can configure the Tab Strip within the builder panel where you will be able to add multiple tabs and change the text for each tab.

Unlike Panel, Tab Strip has a scripting event onSelect which will be executed whenever the end-user selects or changes a tab. Both Panel and Tab Strip can be placed within one another and a nested layout can be created as well.

Script Functions

For both Panel and Tab Script, certain script functions are available. You can only change the visibility and layout of the Panel. For a Tab Strip, apart from changing visibility and layout, you can also get the key of the selected tab or change the selected tab. The function getTab will return the object ‘Tab’ when you pass the key or ID of the tab. It can be further used to get the title of the tab or change it.

Aligning Widgets

When you multi-select the widgets using the CTRL button, you can see the alignment options in the quick menu. Horizontally you can align the widgets to left, center or right. Vertically you can align the widgets at the top, middle or bottom. This will be more useful when you want to align the widgets within a container widget.

In the next blog, we will discuss in detail about building a Responsive Layout.

Click here to evaluate if SAP Analytics Cloud is right for you. To know about the Analytic Applications of SAP Analytics Cloud, please check out our blog series here.