SAP Analytics Cloud – Templates Best Practices

Estimated read time 12 min read

This article is part of a blog series on Dashboard Design BestPractices, 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. 

Blog Content

1. Where to get the Template?
2. Template Customization (Step-by-step explanation)
3. Build a Logical Group (Step-by-step explanation)

 

1. Where to get the Template?

There could be 3 different reasons why you would like to use the template

1. You are a partner/customer who wants to build Insight App?
Currently, a SAP managed template is not available.
You can find out how you can still get the template in this blog.

2. You are a partner/customer who wants to use the template to build applications
without the need to start from scratch?
Open Blog Post

3. You are an SAP internal Dev Team which are building Insight Apps?
Contact us

Template Variants
You have the choice between three different templates which differ mainly in their layout structure.
Please note that the individual contents basically serve as placeholders, which you can simply deleted if not needed or copied to use them elsewhere in the story.

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.  

Here´s an example of how an application based on the template can look like just by adding the data sources to the widgets with a few clicks.          

 

Template 2

Unlike Template 1, the InfoGroup is positioned vertically. This means it remains permanently visible while scrolling, and the visualizations normally found underneath it are brought more into focus.
Depending on the use case, this positioning may be a better alternative.

 

Template 3

Template 3 contains a “sticky header.” This means that the content area rolls away underneath while scrolling. It’s structured as a composite, and the title and subtitle can be customized accordingly.

 

2. Template Customization

 Step-by Step description how to:
Add Content to Placeholders Remove Placeholders and delete Sections or Widgets Adjust Page Content 

 

1. Add Content to Placeholders

Select the button in the placeholder and choose the model you want to use in the dialog that appears. 

 

Add desired measures and dimensions.

 

A specific chart type is predefined for each placeholder. 
However, this can be changed in the Builder Panel.

 

2. Remove Placeholders and delete Sections or Widgets 

To remove a placeholder, select the placeholder, select the three dots and
choose “Remove” from the context menu. Due to the underlying container structure,
the remaining content adapts automatically.

 

To delete an entire section within the template, you can also use the option to delete it from the outline. 
The layout automatically adjusts after deletion.

 

3. Add Page Content

There are various ways to add more content to the page.The easiest way is to copy and paste existing content and then adapt it. 

Step-by Step Example: Copy and Paste a Single Chart in a Logic Group

In the outline, select the panel with the chart that you want to copy

 

Use either the keyboard shortcuts “Ctrl + C” on Windows or “Command + C” on Mac, or the Copy function in the toolbar.In the outline, select the section where you want to paste the content.

 

To paste, use either the keyboard shortcuts “Ctrl + V” on Windows or “Command + V” on Mac, or the Paste function in the toolbar.

After content has been added, you can adjust it in the builder or styling panel.

Example 2:

Step-by Step Example: Copy Existing Logic Group

Select the panel with the logic group that you want to copy, then use the copy functions as described in Example 1.

 

Select the section where you want to paste the logic group,
then use the paste functions as described in Example 1.

 

 

The FlowLayoutPanel automatically positions the added Logic Group downwards.
Remember, 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.

 

 

 

Build a Logic Group from Scratch

Step 1: Create New Story

Go to your SAP Analytics Cloud tenant.Select Canvas.

Step 2: Add a Panel to the Page

In the toolbar, select the add button > Containers > Panel.

 

In the styling panel, adopt the values for Size and Position:
Width = 100% I  Height = 400px I  Left = 0px I  Right = auto I  Top = 0px I  Bottom = auto

 

Step 3: Add Card Panel in Existing Panel

Add an additional panel to the first panel. To use the Fiori Horizon theme for the panel, enter “card” under CSS Class Name in the styling panel.

Set the Size and Position:
Width = auto I  Height = auto I  Left = 16px I  Right = 16px I  Top = 16px I  Bottom = 8px

 

 

Step 4: Add Panel for Logic Group Header

Add an additional panel for the header text to the previous panel.To get a visual separator, in the CSS Class Name field in the styling panel, add “logic-group__header”.Set Size and Position: Width = auto I  Height = 48px I  Left = 0px I  Right = 0px I  Top = 0px I  
Bottom = auto Set Corner Radius to 0px.

 

Step 5: Add Text Element to Header Panel

Choose Text and enter the name of your logic group.To use the Fiori Horizon theme for the header text, in the CSS Class Name field in the styling panel,
add “logic-group__title”.Set Size and Position:
Width = auto I  Height = auto I  Left = 16px I  Right = individually I  Top = 10px I  Bottom = 0px

 
 

 

Step 6: Add Flow Layout Panel for Content

Select Panel_2Choose Containers > Flow Layout Panel.

 

 

In the styling panel, set Size and Position for the Flow Layout Panel:

Width = auto I  Height = auto I  Left = 16px I  Right = 16px I  Top = 58px I  Bottom = 8px

 

Step 7: Add Chart Widget

Insert a chart widget into the flow layout panel.

 

Select chart type and define the measures and dimensions.

 

In the styling panel, set Size and Position:

Width = 50% I  Height = 100%

 

Step 8: Copy and paste chart widget

Select the chart that you want to copy.

Use the Copy function in the toolbar or use the
keyboard shortcuts “Ctrl + C” on Windows or “Command + C” on Mac.

 

Select the flow layout panel where you want to paste the chart to.

 

Use the Paste function in the toolbar or use the keyboard shortcuts “Ctrl + V” on Windows or “Command + V” on Mac.

 

Select chart type and define the measures and dimensions.

 

 

If you wanted to create a logic group with two chart widgets, this is the result.

 
To add more charts to the logic group, repeat the steps, but you may need to adjust the width of each chart as needed. For example, if you have three widgets side by side, use 33% for every chart widget.

 

Result

 Congratulations! Your logic group should now look something like this.

 

 

 

​ This article is part of a blog series on Dashboard Design BestPractices, 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. Blog Content1. Where to get the Template?2. Template Customization (Step-by-step explanation)3. Build a Logical Group (Step-by-step explanation) 1. Where to get the Template?There could be 3 different reasons why you would like to use the template1. You are a partner/customer who wants to build Insight App?Currently, a SAP managed template is not available.You can find out how you can still get the template in this blog.2. You are a partner/customer who wants to use the template to build applicationswithout the need to start from scratch?Open Blog Post3. You are an SAP internal Dev Team which are building Insight Apps?Contact usTemplate VariantsYou have the choice between three different templates which differ mainly in their layout structure.Please note that the individual contents basically serve as placeholders, which you can simply deleted if not needed or copied to use them elsewhere in the story.Template 1This 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.  Here´s an example of how an application based on the template can look like just by adding the data sources to the widgets with a few clicks.           Template 2Unlike Template 1, the InfoGroup is positioned vertically. This means it remains permanently visible while scrolling, and the visualizations normally found underneath it are brought more into focus.Depending on the use case, this positioning may be a better alternative. Template 3Template 3 contains a “sticky header.” This means that the content area rolls away underneath while scrolling. It’s structured as a composite, and the title and subtitle can be customized accordingly. 2. Template Customization Step-by Step description how to:Add Content to Placeholders Remove Placeholders and delete Sections or Widgets Adjust Page Content  1. Add Content to PlaceholdersSelect the button in the placeholder and choose the model you want to use in the dialog that appears.  Add desired measures and dimensions. A specific chart type is predefined for each placeholder. However, this can be changed in the Builder Panel. 2. Remove Placeholders and delete Sections or Widgets To remove a placeholder, select the placeholder, select the three dots andchoose “Remove” from the context menu. Due to the underlying container structure,the remaining content adapts automatically. To delete an entire section within the template, you can also use the option to delete it from the outline. The layout automatically adjusts after deletion. 3. Add Page ContentThere are various ways to add more content to the page.The easiest way is to copy and paste existing content and then adapt it. Step-by Step Example: Copy and Paste a Single Chart in a Logic GroupIn the outline, select the panel with the chart that you want to copy Use either the keyboard shortcuts “Ctrl + C” on Windows or “Command + C” on Mac, or the Copy function in the toolbar.In the outline, select the section where you want to paste the content. To paste, use either the keyboard shortcuts “Ctrl + V” on Windows or “Command + V” on Mac, or the Paste function in the toolbar.After content has been added, you can adjust it in the builder or styling panel.Example 2:Step-by Step Example: Copy Existing Logic GroupSelect the panel with the logic group that you want to copy, then use the copy functions as described in Example 1. Select the section where you want to paste the logic group,then use the paste functions as described in Example 1.  The FlowLayoutPanel automatically positions the added Logic Group downwards.Remember, 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.   Build a Logic Group from ScratchStep 1: Create New StoryGo to your SAP Analytics Cloud tenant.Select Canvas.Step 2: Add a Panel to the PageIn the toolbar, select the add button > Containers > Panel. In the styling panel, adopt the values for Size and Position:Width = 100% I  Height = 400px I  Left = 0px I  Right = auto I  Top = 0px I  Bottom = auto Step 3: Add Card Panel in Existing PanelAdd an additional panel to the first panel. To use the Fiori Horizon theme for the panel, enter “card” under CSS Class Name in the styling panel.Set the Size and Position:Width = auto I  Height = auto I  Left = 16px I  Right = 16px I  Top = 16px I  Bottom = 8px  Step 4: Add Panel for Logic Group HeaderAdd an additional panel for the header text to the previous panel.To get a visual separator, in the CSS Class Name field in the styling panel, add “logic-group__header”.Set Size and Position: Width = auto I  Height = 48px I  Left = 0px I  Right = 0px I  Top = 0px I  Bottom = auto Set Corner Radius to 0px. Step 5: Add Text Element to Header PanelChoose Text and enter the name of your logic group.To use the Fiori Horizon theme for the header text, in the CSS Class Name field in the styling panel,add “logic-group__title”.Set Size and Position:Width = auto I  Height = auto I  Left = 16px I  Right = individually I  Top = 10px I  Bottom = 0px   Step 6: Add Flow Layout Panel for ContentSelect Panel_2Choose Containers > Flow Layout Panel.  In the styling panel, set Size and Position for the Flow Layout Panel:Width = auto I  Height = auto I  Left = 16px I  Right = 16px I  Top = 58px I  Bottom = 8px Step 7: Add Chart WidgetInsert a chart widget into the flow layout panel. Select chart type and define the measures and dimensions. In the styling panel, set Size and Position:Width = 50% I  Height = 100% Step 8: Copy and paste chart widgetSelect the chart that you want to copy.Use the Copy function in the toolbar or use thekeyboard shortcuts “Ctrl + C” on Windows or “Command + C” on Mac. Select the flow layout panel where you want to paste the chart to. Use the Paste function in the toolbar or use the keyboard shortcuts “Ctrl + V” on Windows or “Command + V” on Mac. Select chart type and define the measures and dimensions.  If you wanted to create a logic group with two chart widgets, this is the result. To add more charts to the logic group, repeat the steps, but you may need to adjust the width of each chart as needed. For example, if you have three widgets side by side, use 33% for every chart widget. Result Congratulations! Your logic group should now look something like this.     Read More Technology Blog Posts by SAP articles 

#SAP

#SAPTechnologyblog

You May Also Like

More From Author