SAP Analytics Cloud - Best Practices

[MarcZauritz]

Please note that this article is part of a Dashboard Design Best-Practices blog series,
created to assist you in designing and building meaningful dashboards with SAP Analytics Cloud.
Click here to open the Dashboard Design Best-Practices blog series hub page in a new window

The focus in this blog is about Best-Practices when building  analytical applications in SAP Analytics Cloud.
If you don't have the template yet, you'll find the necessary information on how to get it in this blog post.

 -> The available links always open in a new browser tab.

Best-Practices

1. Template Layout Types
2. Layout Settings in SAC
3. How are the SAC components nested in the Outline structure? 
4. How users can indicate the Linked Analysis relation on a page?  
5. Theme CSS Options
6. Add Spacing between widgets in Logic Groups 
7. Hide Icon on Input controls 
8. Activate "Group Data"- Function for widgets
9. Set "View Time" Settings 
10. Performance Consoderations

 

1. Template Layout Types

With the new version of the SAC Fiori template, 4 pages within the template are now available.
The templates differ mainly in their layout and two different header types: Floating and Sticky Header

Floating Header (Template 1/ 2/ 4)

The floating header disappears when scrolling down, has rounded corners and a spacing of 16px to the edges or nearby layout components. It is a space-saving solution if certain information must not always be visible. 

Sticky Header  (Template 3)

The sticky header stays always visible at the top, even when the user scrolls through the content.
The header has no rounded corners and no padding to the left, right and top.
Use the subtitle section to show information that relates to the whole page. 
E.g. instructions, explanatory text, meaning of abbreviations, time periods, special conditions, etc.

The 2 headers can be used for all kind of scenarios like Start/ Home/ Sub/ Detail Pages

Template 1:

This template contains all the different combinations of widgets. (See also Dashboard Design Patterns Blog)
Starting with the Info Group and Control Group on Top and different characteristics of Logic Groups and single widgets with or without Input Controls. You can quickly copy and paste them or simply delete if you don't need them. 

Template 2:

Unlike Template 1, the Info Group is positioned vertically.  The info group, also called KPI row, usually provides an high-level overview on the most important numbers at a glance. Depending on the use case, this positioning may be a better alternative.

Template 3:

Template 3 differs from the others by the use of a "sticky header" and a "Collapse/ Expand Logic Group" Function.

 

Template 4:

Template 4 is intended for so-called exploration scenarios. A filter row and two chart types offer a quick way to to drill down
information using the Linked Analysis functionality in SAC and then display the details of the selection in a table.

2. Layout Settings in SAC

When creating a dashboard, you have a practical way to control the layout behavior of your app elements.
Use the device selection at the bottom of the SAC Canvas to simulate the possible screen size.

Make sure that the content is displayed appropriately on the end devices that the end user will be using.
The content should work visually up to a resolution of 1920x1080.

3. How are the SAC components nested in the Outline structure?

Element Order in Outline
While the contents of the individual sections, which are on one level, are arranged from top to bottom, the presentation in the outline is reversed. Therefore, what is at the top visually is at the bottom in the outline structure.

Visualized Page Structure

The next image shows the individual patterns of Template_1.
You can find more information in the Layout Patterns Blog Article.

To better understand the template structure, the structural elements as well as the relevant components of the Template_1 and their usage in the SAC outline are shown in the next picture:

Fiori Card Design
To achieve the Fiori card design on e.g. a panel, the CSS class name “card” is used in the styling panel of the respective panel. 

4. How users can indicate the Linked Analysis relation on a page?

Linked Analysis gives the user the ability to define, which other chart widgets in the analysis are affected when applying selections while browsing hierarchical data. However, to give the user a clear understanding of which widgets on the page will be affected, two scenarios are possible.

Scenario 1: 
Linked Analysis on complete page content
If a data point selection in one widget affects all other widgets on the page, it is possible to use panels for each individual widget. Since the selection affects the entire page, it is not necessary to group visually.

Scenario 2: 
Linked Analysis on parts of the page
If a data point selection in a widget only affects some widgets on the page, this should be visually indicated to the user. For this purpose, a (Logical Group) Panel should be used as a visual bracket of the related and influenced content

 

5. Theme CSS Options

When using the Fiori Morning Horizon theme, CSS classes are used from the beginning.
The Global Default Class Name "saptheme" is set automatically.

For further customization options at the component level, use the CSS class name for the corresponding component which can be found in the following table.

Title	Widget Type	CSS Class Name
Page Title	Text	page__title
Page Subtitle	Text	page__subtitle
Page Description Title	Text	page__desc__title
Page Description	Text	page__desc__content
Link	Text	link
Negative Text	Text	text--negative
Critical Text	Text	text--critical
Positive Text	Text	text--positive
Informative Text	Text	text--information
Neutral Text	Text	text--neutral
Fiori Card	Flow Layout Panel, Panel	card
Emphasized Button	Button	button--emphasized

6. Add Spacing between widgets in Logic Groups 

There is currently no option to set a padding between individual widgets.
Therefore, it can happen that widgets within a logical group are visually very close to each other.

 To avoid this, there is a workaround by adding invisible borders to the widget.

Step 1 
Select the first widget, open the styling panel in the right panel and select “Right Border”, no color value and a Line Width of 8px.

 

 

 

 

 

 

Step 2
Select the second widget in the middle, add “Left and Right Borders", no color value and a Line Width of 8px.

Step 3
Select the third widget, add “Left Border", no color value and a Line Width of 8px.

Result
The result is a clearer separation of the different widgets.

7. Hide Icon on Input controls 

Initial State
SAC first displays an additional icon when a filter or input control is created. 
For reasons of simplicity, we recommend hiding this icon. 

How-To
Open the context menu of the filter widget, navigate to the header icon ("Show/Hide -Group)
and deselect the checkmark.

Result

8. Activate "Group Data"- Function for widgets

9. Set "View Time" Settings

We recommend to use the "Present Mode" as default mode for analytical pages

1. Open Side Panel by selecting the "Story Settings" icon and the corresponding sub-items in the SAC toolbar.

2. Select “Present Mode” in the Navigation Panel and click the Done Button.
-> Do not forget to save the story.

 

 

 

 

 

 

10. Performance Considerations

Performance of the dashboard has a big impact on the user experience. When designing and building the dashboard, consider the factors that affect the performance. In general, the performance gets poorer with more data and data that needs to be loaded simultaneously.

Reduce the amount of data used

• If specific data is not required in the dashboard, consider
  not showing it and then don’t include the data in the model. 

Do aggregations early, before calculations

• Aggregating data before it is loaded into the SAC model results in many fewer rows in the model, which means SAC will require less computing time to process those rows when creating the charts. 

Use the most performant model for your requirements

• Typically, an acquired data model is faster than live connections.
  If you don’t need live data, consider an acquired data model. 
• Typically, an analytical model is faster than a planning model.
  If you don’t need a planning model, consider an analytical model. 

Consider the number of expensive widgets that are shown on one story page
A detailed guide on widget weights can be found on the SAP Analytics Cloud Help:
https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/00f68c2e08b941f081002fd3691d86a7/fbe339efda1241b5a3f46...

Further Performance related Resources:
https://help.sap.com/docs/SAP_ANALYTICS_CLOUD/00f68c2e08b941f081002fd3691d86a7/af18d0772605480ca6f20...

https://learning.sap.com/learning-journeys/managing-performance-in-sap-analytics-cloud