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?
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
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
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
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.
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
![[ Google Lab ] Google Stitch：Google 對於 UI/UX 的 AI 全新體驗模式 (Google I/O 2025系列報導)](https://cdn-images-1.medium.com/max/1640/1*Gqr0qwv7WFHeYg0KL80ZrA.png)
