In SAP Design Studio 1.6, a new component scorecard is introduced. We are going to explain how to use this new component with a couple of blogs. This blog will get you started with the basics of scorecard component. As scorecard component has a lot of advanced features and its usage varies from one scenario to another, it might not be possible to cover the entire list of features.
In this blog, I am going to show the steps of how to create a simple demo application with the scorecard component. I will utilize some of the configuration properties of the scorecard component. In the follow-up blogs, we are going to further explore capabilities of the scorecard component.
In general, the workflow of scorecard creation has the following major actions:
- Assign data source.
- Adjust Row scope definition – Here we pick the dimensions which we have as part of initial view definition of that data source. This will define the granularity of your analysis.
- Example: In the sample data source we have Product, and Calendar Year/Month as dimensions and Net Sales as the measure. If in the row scope I choose “up to Product”, then the output will have each single Product as each row in the scorecard component.
- Define or generate columns based on the row scope defined in the previous step.
- Configure different properties of the scorecard component.
For detailed information of the scorecard component, please refer to the SAP official document.
So, here are the steps of how to create a simple scorecard component.
1. In a newly created Design Studio application, add a data source to the application and set the initial view. Here is the sample data source I am going to use for this scorecard demo.
2. Drag and drop the scorecard component from the Analytic Components view into the layout editor.
3. Assign the data source to the scorecard component.
4. The scorecard component can be configured in the Properties and Additional Properties views. Let’s focus on the Additional Properties first.
In the “Dimension for Row Scope” section, select “up to Product” from the dropdown for “Select Dimension:” The system then chooses which rows from the data source to be displayed as the columns in the scorecard component.
5. Click on the button “Generate Initial Scorecard” to create the initial scorecard automatically. There are three columns in this generated scorecard:
a. Product: dimension from the row scope selection (notice the word “up to” although it does not make any difference in this example)
b. Net Sales: the measure from the data source
c. Net Sales for Calendar Year/Month: trend chart with the measure over the dimension not in the row scope selection from the data source
Note that this automatically generated scorecard is a starting point for you to work with. You can create additional columns from the data source based on your business requirements.
6. Columns can be added, inserted or deleted. Order of the columns can be re-arranged as well.
7. As the scorecard is a highly configurable component, I will not go through all the settings of its properties. Let’s configure some of the properties for this introduction demo application.
Select the “COLUMN_1”. In the “Selected Column Definition” section, navigate to the “Header Layout”. From the “Header Content Alignment” dropdown, select “Left”.
8. For the “COLUMN_2”, in the “Selected Column Definition” section, navigate to the “Column Content”. In the “Cell Content” subsection, click on the "Bind Property (Toggle)" button 
.
If it is not configured yet:
a. Select the “Single Data Cell Value” as the “Binding Type”.
b. In the "Select Data Cell" property, click the "Open Cell Selection Dialog" button 
to bind the data cell for the property “Selected Data Cell”. In our case we will bind the “Totals row” to the cell, which means that we want to aggregate the data based on Calendar Year/Month.
c. Change the value of “Decimal Places” property from 2 to 0.
d. Enter the Euro symbol “€” in the “Prefix” property.
9. For the “COLUMN_3”, in the “Selected Column Definition” section:
a. Select the “Trend Chart, Line” from the “Cell Template” dropdown.
b. Set the value of the “Decimal Places” property to 0.
c. Deselect the “Show Value Count” checkbox so that the number of data points “#6” is not displayed in the chart.
10. Save and run the application.
11. Now, let’s look at the Property view of the scorecard component.
a. Select “Single” from the dropdown of the “Select Type” property.
b. Select Scrollbar” from the dropdown of the “Navigation Mode” property.
c. Run the application.
Notice that a leading column is added in the table of the scorecard component.
A single row can be selected and action can be programmed in the “On Select” event. Also, you can navigate to the additional rows with the scrollbar on he right hand side instead of the paginator at the bottom of the scorecard previously.
As an optional exercise, I would like to see more data points in the column “Net Sales for Calendar Year/Month” as there is a plenty of space in the scorecard to accommodate it. So, I go ahead to clear the filters of the dimension “Calendar Year/Month” in the initial view of the data source.
And here is how the scorecard component looks like.
In summary, this blog shows step-by-step on how to simply configure a scorecard component in SAP Design Studio. I’ve touched some of the basic properties of the scorecard component. More details of the scorecard component configuration will be discussed in the follow-up blogs.
- SAP Managed Tags:
5 Comments
