SAP Learning Journey

Creating Charts

Objectives
After completing this lesson, you will be able to:

After completing this lesson, you will be able to:

  • List the annotations for defining charts in object pages

Charts

OData Service with Analytic Function

A smart chart control sends an aggregate request to the back end service by sending the $select OData parameter.

A normal entity set will return all records only with fields in $select, but an analytic entity set will return an aggregated result considering the fields in $select.

To define an analytic entity set, add an @defaultAggregation annotation to fields that you need to aggregate (normally these are amount or quantity fields).

The generated entity set has the following differences compared to a normal entity set:

  • A generated ID field is used as primary key instead of key of the CDS view.
  • When accessed by $select, the engine tries to determine if the fields in $select are attributes or measures according to @defaultAggregation, and then calculates the aggregated measures grouped by attributes in $select.

A typical scenario is to define the CDS view for the list report, the object page as a normal entity set, and that the CDS view represents detailed level entry as an analytic entity set. Then, create a 1 to * association from master level entity to detail level entity. Then the user can get summarized detail data from the object page.

Note
Another method of creating an analytic OData service is Analytic Query. For detailed information on Analytic Query, refer to course S4H410.

Add @UI.Chart Annotation

An @UI.Chart annotation is used to define a smart chart. In the chartType property, you can specify the type of chart. You need to specify measures and dimensions.

The @UI.Chart term is also available in local annotation. Normally @UI.Chart is defined in an analytic CDS view.

Adding a Reference Facet

A reference facet should be created as a direct child of @UI.facet with type #CHART_REFERENCE and reference to the @UI.Chart annotation through an association.

Micro Bullet Chart

A Micro Bullet chart is used to evaluate a key figure by entering its actual value, minimum value, max value, forecast value, and target value together, and then showing the criticality by the color. It is useful to get insight among target, plan, and actual, and is widely used in analytic scenarios.

The bullet chart can be used as a header facet in the object page.

Example of a Bullet Chart

Like smart charts, the creation of micro chart involves @UI.facet and @UI.chart.

In contrast to smart charts, a micro chart has more detailed insight to a point of data. So that @UI.dataPoint is involved in the creation of a micro chart, as @UI.chart does not contain all of the detailed information for a point of data. The evaluated value should be the only member in the @UI.chart.measure and it must link to a @UI.datapoint annotation through measureAttributes. All other values (max,min,target,forecast … ) are assigned in @UI.dataPoint.

Create Charts in Object Pages

Business Example

In this exercise, you will work on a list report about product master data. In the object page of this report, you will add a column chart to display the total gross amount for each customer. For this purpose, you need two associated CDS views. One for a product list, and another for the chart based on sales data. Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Create and Activate Two CDS Views with the Source Code from Template Files

Steps

  1. Log in to the S4D SAP system using ABAP Development Tools for Eclipse (ADT).

    1. Perform this step as shown in a previous exercise.

  2. Create a blank CDS view using the following information:

    First CDS View Information

    FieldValue
    NameZCDS_UX403_CHART_##
    DescriptionUX403 add chart in object page

    1. Perform this step as shown in a previous exercise.

  3. Copy the source code of the text file N:\UX403\Templates\UX403_Exercise14_Template1.txt into the code editor of the CDS view ZCDS_UX403_CHART_## and replace all instances of ## in the source code. Then activate it.

    1. Perform this step as shown in a previous exercise.

  4. Create a blank CDS view using the following information:

    Second CDS View Information

    FieldValue
    NameZCDS_UX403_CHART_D_##
    DescriptionUX403 add chart in object page – data

    1. Perform this step as shown in a previous exercise.

  5. Copy the source code of the text file N:\UX403\Templates\UX403_Exercise14_Template2.txt into the code editor of the CDS view ZCDS_UX403_CHART_D_## and replace all instances of ## in the source code. Then activate it.

    1. Perform this step as shown in a previous exercise.

Task 2: Expose your CDS View ZCDS_UX403_CHART_## as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_CHART_## and reactivate it.

    1. Perform this step as shown in a previous exercise.

  2. Publish your new OData service on the S4D SAP system. Use the /N/IWFND/MAINT_SERVICE transaction.

    1. Perform this step as shown in a previous exercise.

Task 3: Create an SAP Fiori Elements Application from the OData Service Generated by the CDS View

Steps

  1. Log in to your SAP Business Application Studio.

    1. Perform this step as shown in a previous exercise.

  2. Create an SAP Fiori elements project using the following information:

    SAP Fiori Elements Project Information

    FieldValue
    TemplateList Report Page
    SAP SystemS4D_100
    OData serviceZCDS_UX403_CHART_##_CDS
    Main entityZCDS_UX403_CHART_##
    Module namechart.student##
    Application titleUX403 add chart in object page
    DescriptionUX403 add chart in object page.

    1. Perform this step as shown in a previous exercise.

  3. Test the application. Choose Go to display the products. Select a product and notice that information is displayed on the Object Page.

    1. Perform this step as shown in a previous exercise.

Task 4: Create a Column Chart in the CDS View ZCDS_UX403_CHART_D_## which Represents the Detailed Data

Steps

  1. In ADT, open the CDS view ZCDS_UX403_CHART_D_##.

    1. Perform this step as shown in a previous exercise.

  2. Add an annotation to set the GrossAmount field default aggregation method to #SUM.

    1. Add a @DefaultAggregation: #SUM annotation to the GrossAmount field.

  3. Add an annotation to create a column chart in this view, use CustomerName as a dimension and GrossAmount as a measure. Set the title and description to Gross Amount by Customer.

    1. Add a @UI.chart annotation for the view using the following information:

      Properties and Values for the @UI.chart annotation

      PropertyValue
      titleGross Amount By Customer
      descriptionGross Amount By Customer
      chartType#COLUMN
      dimensions[ 'CompanyName' ]
      measures[ 'GrossAmount' ]

    2. Your implementation should look like the following figure:

  4. Save your changes and reactivate the CDS view.

    1. Perform this step as shown in a previous exercise.

Task 5: Create a Facet in the CDS View ZCDS_UX403_CHART_## and Reference it to the Chart Created in Previous Task

Steps

  1. In ADT, open the CDS view ZCDS_UX403_CHART_##.

    1. Perform this step as shown in a previous exercise.

  2. Create a 1 to * association to the CDS view ZCDS_UX403_CHART_D_## and name it _Sales. The condition of the association should be the Product field.

    1. Define the association after select from SEPM_I_Product: association [*] to ZCDS_UX403_CHART_D_00 as _Sales on $projection.Product = _Sales.Product.

    2. Your implementation should look like the following figure:

  3. Expose your association to enable external access.

    1. Expose the association _Sales at the end of the projection list. Remember to add a comma to the end of the previous line.

    2. Your implementation should look like the following figure:

  4. Add a facet with type #CHART_REFERENCE at the root level of facets. Set the label to Chart. Reference the facet to the chart you have created through association _Sales.

    1. Add a facet to the @UI.Facet array, using following information:

      Properties and Values for the Chart Reference Facet

      PropertyValue
      labelChart
      type#CHART_REFERENCE
      targetElement_Sales
      position20

    2. Your implementation should look like the following figure:

  5. Save your changes and reactivate the CDS view.

    1. Perform this step as shown in a previous exercise.

Task 6: Run and Test your Application

Steps

  1. Test your application. Choose Go to display the products. Select a product and notice that the column chart is displayed on the Object Page.

    1. Perform this step as shown in a previous exercise.

Log in to track your progress & complete quizzes