Configuring Micro Charts to Visualize Key Figures

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.

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.

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.

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

   Copy codeSwitch to dark mode

   1
   TotalSupplPrice : Decimal(16, 3);

   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

   Copy codeSwitch to dark mode

   12345678
    /**
      * 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})
   }

4. Update the method this.after ( 'UPDATE', 'BookingSupplement.drafts') in travel-service.js:

   Code Snippet

   Copy codeSwitch to dark mode

   123456789101112
   /**
      * Update the Travel's TotalPrice when a Supplement's Price is modified.
      */
    this.after ('UPDATE', 'BookingSupplement.drafts', 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} `
       await this._update_totals_supplement (booking)
       return this._update_totals4 (travel)
     }})

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

      Copy codeSwitch to dark mode

      123456789101112131415161718192021222324252627
      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,
              }, ],
          }
      );

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.