Using Data Visualization

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

After completing this lesson, you will be able to:

  • Identify different ways to visualize data in a list report and an object page

Data Visualization

There are several methods to visualize your data in a list report and on an object page.

We will look at the annotations for criticality and rating indicator and progress bar.

Criticality

Criticality can be used in any data field displayed on a list report and an object page. It also works with other annotations with DataField as datatype like UI.fieldGroup and UI.Identification.

If you are using local annotation, criticality is an optional attribute for DataField, you can either set it to a static value or reference it to a property.

Steps to use criticality in list report by writing CDS view are:

Note
You can use the Theme Designer to change these default colors by adjusting the theme. For detailed information on the Theme Designer, refer to UX100.

Rating Indicator and Progress Bar

For rating and progress data, you can use the rating indicator and the progress bar.

To use those controls, set your @UI.lineItem (also apply to @UI.fieldGroup, @UI.identification, and other annotations refer to a DataField) to the type of #AS_DATAPOINT. Then, add a @UI.dataPoint annotation and set the visualization property to @RATING or #PROGRESS.

By default, the rating indicator has five stars and the progress bar is set to 100 as the target. You can customize those further by setting the value of the targetValue property.

Visualize the List Report

Business Example

In this exercise, you will start from a list report that displays a list of product stock with quantities. You need to add a status field to the display stock level in different colors. Use the criticality concept to display fields using different colors.

Replace all instances of ## with the group number your trainer assigned to you.

Task 1: Create and Activate a CDS View with the Source Code from a Template File

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:

    CDS View Information

    FieldValue
    NameZCDS_UX403_VIS_##
    DescriptionUX403 data visualization in list report
    1. Perform this step as shown in a previous exercise.

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

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

Task 2: Expose your CDS View as an OData Service

Steps

  1. Add an @OData.publish: true annotation to your CDS view ZCDS_UX403_VIS_## and activate 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_VIS_##_CDS
    Main entityZCDS_UX403_VIS_##
    Module namedatavis.student##
    Application titleUX403 data visualization in list report
    DescriptionUX403 data visualization in list report.
    1. Perform this step as shown in a previous exercise.

  3. Test the application. Choose Go to display the stock levels of the products.

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

Task 4: Modify your CDS View and Add Annotations to Create a Status Field with Criticality

Steps

  1. Create a new integer field StockLevelCritical. Set the value to 3 if the quantity is greater than the LotSizeQuantity field, set it to 2 if the quantity is between LotSizeQuantity and MinimumStockQuantity, and set it to 1 if the quantity is less than MinimumStockQuantity. Make this field a hidden field.

    1. Create the new field StockLevelCriticalafter the StockLevel field with the following code: case when Quantity > LotSizeQuantity then 3 when Quantity > MinimumStockQuantity then 2 else 1 end as StockLevelCritical.

    2. Add the @UI.hidden: true annotation for the StockLevelCritical field.

    3. Your implementation should look like the following figure:

  2. Set the criticality of the StockLevel field with reference to the StockLevelCritical field. Then, reactivate your CDS view.

    1. Add the @UI.lineItem.criticality: 'StockLevelCritical' annotation for the StockLevel field.

    2. Your implementation should look like the following figure:

    3. Save your changes and activate your CDS view.

Task 5: Run and Test your Application

Steps

  1. Test your application. Note the color of the Stock Level column.

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

Log in to track your progress & complete quizzes