Configuring Micro Charts to Visualize Key Figures

Objectives

After completing this lesson, you will be able to:

  • Visualize semantically-colored representations of the customer-defined key figures and thresholds

Micro Charts

You can visualize a number of data points as micro charts in table cells, both in the list report and on the object page. They are non-interactive. You can display changes in the data in an easy and condensed way. You can choose from different types of micro charts, such as area, bullet, line, radial, and stacked bar micro charts.

Different Micro Charts

A micro chart will not display any title, description, measure labels or footers while used in a table column. By default, the micro chart has a size "XS". You can change the size by adding a corresponding setting to the manifest.json file. For more information, see Adding a Micro Chart to a Table. You can use SAP Fiori tools to create a new column containing a micro chart. You can choose between using guided development (the Add a Smart Micro Chart to a Table guide) and the Page Editor.

Add a Bullet Micro Chart to the Table Column

You may want to provide an overview of the total amount of supplements per booking without having to navigate to each booking's detailed page. To do this, you can use a bullet micro chart.

The micro chart is displayed in the booking table on the object page. It has a predefined target and two thresholds. Its bar chart will show a different color, depending on the value for each booking. This provides a quick overview of the values for each booking without having to navigate to the sub-object page.

Task Flow

First, you will introduce and implement a new property in the Booking entity called Total Amount of Supplements.

Then, you'll use the application modeler to add a new column containing a bullet micro chart to the Booking table.

Finally, you will update the .csv file containing the initial app data to include the new property and add the relevant values for existing bookings.

Prerequisites

You have completed the exercise Add a Progress Indicator Column to the Table in the unit Configuring the Content of Table Columns (lesson: Creating a Visual Representation of a Progress Indicator). Alternatively, you can check out its solution branch: solution/add-progress-indicator-to-table-column.

Watch the Simulation and Perform the Steps

This exercise contains a simulation that takes you through all the steps described below. You can follow the simulation and perform the steps using your own trial account.

Steps

  1. Open the selected travel's object page.

  2. Switch to SAP Business Application Studio and add the following code snippet to the Booking entity definition (line 37 of db/schema.cds):

    Code snippet
    TotalSupplPrice : Decimal(16, 3);
    Expand

    This adds a new property TotalSupplPrice to the entity Booking. It displays the total price of all supplements in the booking.

  3. Open srv/travel-service.js to implement a method called _update_totals_supplement; this will update the TotalSupplPrice property:

    Code snippet
     /**
       * Update the Booking's TotalSupplPrice
       */
    this._update_totals_supplement = async function (booking) {
        const { totals } = await SELECT.one `coalesce (sum (Price),0) as totals` .from (BookingSupplement.drafts) .where
         `to_Booking_BookingUUID = ${booking}`
        return  UPDATE (Booking.drafts, booking) .with({TotalSupplPrice: totals})
    }
    Expand
  4. Update the method this.after ( 'PATCH', 'BookingSupplement') in travel-service.js:

    Code snippet
    /**
       * Update the Travel's TotalPrice when a Supplement's Price is modified.
       */
      this.after ('PATCH', 'BookingSupplement', async (_,req) => { if ('Price' in req.data) {
        // We need to fetch the Travel's UUID for the given Supplement target
        const { booking } = await SELECT.one `to_Booking_BookingUUID as booking` 
    .from (BookingSupplement.drafts).where({BookSupplUUID:req.data.BookSupplUUID})
        const { travel } = await SELECT.one `to_Travel_TravelUUID as travel` .from (Booking.drafts)
          .where `BookingUUID = ${booking} `
          // .where `BookingUUID = ${ SELECT.one `to_Booking_BookingUUID` .from (req._target) }`
          //> REVISIT: req._target not supported for subselects -> see tests
          await this._update_totals_supplement (booking)
        return this._update_totals4 (travel)
      }})
    Expand
  5. Use the page editor to add a new column with a bullet micro chart to the table on the object page.

    1. Select webapp > Show Page Map and click the pencil icon on Object Page.
    2. Expand Bookings > Table > Columns and select the plus icon to add a new column. Choose Chart Column and Bullet as the chart type.
    3. Choose TotalSupplPrice as a Value and enter 120 as the Maximum Value. Select Add.
    4. Note that a new column TotalSupplPrice has been added. Change its title to Supplements and select the globe icon to add the text to i18n.properties.
    5. Select Edit in source file to check the annotations generated by the page editor.
    6. You can see the generated annotations @UI.DataPoint and @UI.Chart. Add the values as shown in the code snippet below:
      Code snippet
      annotate TravelService.Booking with @(
          UI.DataPoint #TotalSupplPrice: {
              Value                 : TotalSupplPrice,
              MinimumValue          : 0,
              MaximumValue          : 120,
              TargetValue           : 100,
              Visualization         : #BulletChart,
              //  Criticality : TotalSupplPrice, // it has precedence over criticalityCalculation => in order to have the criticality color do not use it
              CriticalityCalculation: {
                  $Type                 : 'UI.CriticalityCalculationType',
                  ImprovementDirection  : #Maximize,
                  DeviationRangeLowValue: 20,
                  ToleranceRangeLowValue: 75
              }
          },
          UI.Chart #TotalSupplPrice    : {
              ChartType        : #Bullet,
              Title            : 'total supplements',
              AxisScaling      : {$Type: 'UI.ChartAxisScalingType', },
              Measures         : [TotalSupplPrice, ],
              MeasureAttributes: [{
                  DataPoint: '@UI.DataPoint#TotalSupplPrice',
                  Role     : #Axis1,
                  Measure  : TotalSupplPrice,
              }, ],
          }
      );
      Expand
  6. Open sap.fe.travel-Booking.csv. This file contains initial app data for the entity Booking. As you have added a new property TotalSupplPrice to this entity, you also have to update this file with a new column TotalSupplPrice. The column will contain the values for existing bookings.

    1. Copy and replace the sap.fe.cap.travel-Booking.csv file from the Github repository at db/data/sap.fe.cap.travel-Booking.csv. This file contains the TotalSupplPricecolumn with the updated values.

  7. Switch back to the app window and check the results.

    1. Select a travel to navigate to its object page.

    2. You can see the new column in the Bookings table. It displays the total sum of Supplements per booking visualized as a bullet micro chart.

Result

You have learned how to add and configure a bullet micro chart to a table column.

Note

Log in to track your progress & complete quizzes