Community
Technology Blog Posts by SAP
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

This blog illustrates where to find the template, a step-by-step description of how to customize it and a step-by-step explanation of how to create a logic group from scratch.

 

Where to find the Template?

Find all information about the template in this blog.
 
Here 's a sample story created with the template in just a few clicks.
In the next chapter, you will learn how to customize the template and quickly achieve your desired goal.

Non-SAP managed Example Story.png 

Template Customization

 Step-by Step description how to:
  1. Add Content to Placeholders 
  2. Remove Placeholders and delete Sections or Widgets 
  3. 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. 

Create Widget.png

 

Add desired measures and dimensions.

Add Measures.png

 

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

Select Chart Type.png

 

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.

Remove Widget.png

 

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.

Delete Section new.png

 

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

Copy_Paste_01.png

 

  • 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.

Copy_Paste_02.png

 

  • 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.

Copy_Paste_04.png

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.

Copy_Paste_05.png

 

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

 

Copy_Paste_06.png

 

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.

Copy_Paste_07.png

 

 

 

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.

Create Logic Group 01.png

  •  

    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

Create Logic Group 02.png

 

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

 

Create Logic Group 03.png

 

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.

    Create Logic Group 04.png

     

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
     
     

Create Logic Group 05.png

 

Step 6: Add Flow Layout Panel for Content

  • Select Panel_2
  • Choose Containers > Flow Layout Panel.

 

Create Logic Group 06.png

 

  • 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

Create Logic Group 07.png

 

Step 7: Add Chart Widget

  • Insert a chart widget into the flow layout panel.

Create Logic Group 08.png

 

  • Select chart type and define the measures and dimensions.

Create Logic Group 09.png

 

  • In the styling panel, set Size and Position:

    Width = 50% I  Height = 100%

Create Logic Group 10.png

 

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.

Create Logic Group 11.png

 

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

Create Logic Group 12.png

 

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

Create Logic Group 14.png

 

  • Select chart type and define the measures and dimensions.

Create Logic Group 13.png

 

 

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

Create Logic Group 16.png

 
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.

Create Logic Group 17.png

 

Result

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

Create Logic Group 18.png

 

 

Comment
Labels in this area