Having already dealt with the differences between the responsive and canvas layout in a previous blog post, we will now go one step further and look at the different container widgets in detail. We will look at the special features of the different container widgets and which application scenarios make sense for each widget. We will limit ourselves to the standard containers that are available in every SAC story.
Not all containers are the same
In fact, the SAP Analytics Cloud (SAC) already offers five very different container widgets to choose from in the standard version alone. Each container type has its own special properties, functions and restrictions. It should be noted at this point that the selected page type, i.e. canvas or responsive, has no direct effect on the container functions. This means that container widgets adhere to the rules of the page type, but all widgets in the container adhere to the rules of the container.
Panel - the Swiss army knife of the SAC
Panels are probably the most common container. Like all containers, they can be used to organise and group other widgets, but many visual tricks can also be implemented with panels. In addition, unlike most other container widgets, panels can be nested inside each other or inside other containers.
Panels have no special functions and behave like the canvas layout. All widgets in the panel are aligned via pixels or percentages in the panel. The panels can be designed in the design menu and CSS. As a special feature, it should be noted that only panels support the CSS command ‘box-shadow’.
SAC page structured by panels
Although panels can be addressed in scripting and all basic API commands are available to them, they do not offer a script event themselves. Therefore, no script can be executed specifically by clicking on the panel.
TabStrip - the classic
The TabStrip container is basically the classic container. It always offers a navigation area in which you can switch between the different tabs. The tabstrip and the navigation area can be customised in the design panel. If the options are not enough, you will find what you are looking for in the CSS, as the tab strip provides a surprisingly generous amount of CSS classes for manipulation.
Structure of a tab strip in the SAC
The tab strip can be addressed in scripting, but also has its own ‘on-click’ scripting event. As it has its own API commands such as ‘TABSTRIP.getTab()’ or ‘TABSTRIP.getSelectedKey()’, the scripting can be designed very specifically for individual tabs.
The TabStrip naturally has an unmistakable similarity to the Story Pages. This is due to historical reasons, as the TabStrip originates from the ‘Application’, while Pages were a Story function. Now in Story 2.0, both are available to users and this has a number of advantages. A TabStrip can further subdivide a page and is quite simple to use. However, it still is only a visual tool for arranging and dividing different widgets.
Dashboarding with SAP Analytics Cloud -
Download the Whitepaper here!
PageBook - the tabstrip that never was
The PageBook is basically a tabstrip for mobile devices. It basically offers the same functions, API commands and design settings, but the navigation area is not located at the top and is not displayed with tabs. Instead, there are dots at the bottom that symbolise how many pages are available and which of them is active. As a main component, however, the page book is only suitable for stories that are consumed exclusively on mobile devices, or at least on pages that are only displayed in mobile use.
Dynamic area in a story using a pagebook
However, a pagebook does not have to be used as the main component. It can also be used perfectly as a small dynamic area. The navigation points are then still quite difficult for desktop users to identify, let alone click on. With a little extra effort, the pagebook can also be controlled via scripting with easy-to-understand buttons and icons or with a timer. This opens up new creative possibilities beyond mobile use. For example, a dynamic area can be displayed next to a main chart without having to build a cumbersome panel solution.
Flow Layout Panel - brings responsive rules to the canvas layout
The Flow Layout Panel does not offer any navigation functions and is therefore more similar to a normal panel than a tabstrip or pagebook. In contrast to the standard panel, it has a similar behaviour to lanes in the responsive layout. However, with significantly fewer functions and setting options.
The widgets within a flow layout panel cannot be placed freely, but are simply placed one after the other as long as there is space available. If a widget is deleted or switched to invisible, all widgets move up. Even if the basic logic is similar to the lanes of the Responsive Layout, almost all settings are missing. Only the breakpoints and the responsive rules can be created in the Flow Layout panel. Detailed options such as the direction of the ‘flow’ or the position, size and visibility of the widgets cannot be configured in the rules.
Despite the limitations, the Flow Layout Panel is extremely useful in some application scenarios. Particularly when certain areas of a story need to look good on smaller screens.
Configuration of the responsive rules in the Flow Layout Panel
Section - the somewhat different container
The Section container offers completely different functions to those mentioned so far. The section creates an area that must be provided with at least one filter. Certain or all characteristic values are selected in the filter. All widgets in the section can then be displayed in the characteristic values. This means that if four characteristic values are available, the widgets rotate simultaneously through these four values at the touch of a button.
Section can be used to visualise detailed analyses of certain characteristics across several charts. You can recognise the section by the dotted blue side line and the small control menu for changing the characteristics. However, the creation is a little tedious. As soon as a section container widget is placed on the page, the outline is no longer available. The section is also relatively rigid and can only be adjusted in height. In addition, the widget cannot always be used, currently it is not possible to place sections on responsive layout pages.
Section container widget on a canvas story page
Our Conclusion - something for everyone...
In conclusion, it can be said that many different story scenarios can be covered with the container widgets in the SAC. Each container type has its own strengths and weaknesses. However, by combining the different types and with a little scripting, all weaknesses can be circumvented. Even though the panel is probably the most commonly used container type, the others should not be underestimated. If they are integrated into the story, they become real eye-catchers and offer functions that end users no longer want to do without.
Do you have questions about SAP Analytics Cloud or other topics? Are you trying to build up the necessary expertise in your department or do you need support with a specific issue? Simply get in touch with us - we look forward to exchanging ideas with you!
