Adding a Custom Micro Chart

You may want to get a quick overview of all the bookings for one passenger. The information should be presented in a visually appealing way in the object page header of the Display Customers app, next to the Contact Details section. The user would see at a glance how many bookings have the status "open", or "canceled", or "new".

To achieve this, you can use the comparison micro chart.

First, you will implement a method in the back end to calculate the number of bookings with different statuses. Then, you will create a local JSON model on the front end to retrieve the corresponding numbers from the back end. Next, you will add a custom header section next to the Contact Details section. Note that this has to be done manually. Finally, you will create the micro chart itself.

This exercise contains a simulation displaying all the steps. You can follow the simulation with your own trial account.

1. Implement the method in the back end.

   1. You have already defined the BookingData type in the previous exercise. Now, you will change this type to reflect different booking statuses.

   2. Open the SAP Business Application Studio and choose schema.cds. Add the following code snippet to the BookingData type:

      Code Snippet

      Copy codeSwitch to dark mode

      123456
      type BookingData: {
        TotalBookingsCount: Integer;
        NewBookingsCount: Integer;
        AcceptedBookingsCount: Integer;
        CancelledBookingsCount: Integer;
      }

   3. Open travel-service.cds. You can see the definition of the getBookingDataOfPassenger function you created in the previous exercise. You will also use it in this exercise.

   4. Open travel-service.js. It contains the implementation of the getBookingDataOfPassenger function from the previous exercise. You will enhance it in this exercise.

   5. Add the following code snippet to travel-service.js (overwrite the existing code from the previous exercise):

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011121314151617181920212223242526272829303132
      /**
         * Function import handler: getBookingDataOfPassenger
         * @param CustomerID
         * @returns BookingData
         */
        this.on('getBookingDataOfPassenger', async (req) => {
          const { CustomerID } = req.data
          const allCustomerBookings = await SELECT `BookingStatus_code as status`.from (Booking) .where `to_Customer_CustomerID = ${CustomerID}`
          const bookingData = {
            TotalBookingsCount: 0,
            NewBookingsCount: 0,
            AcceptedBookingsCount: 0,
            CancelledBookingsCount: 0
          }
          allCustomerBookings.forEach((booking) => {
            bookingData.TotalBookingsCount++
            switch (booking.status) {
              case 'N':
                bookingData.NewBookingsCount++
                break
              case 'B':
                bookingData.AcceptedBookingsCount++
                break          
              case 'X':
                bookingData.CancelledBookingsCount++
                break
              default:
                break
            }
          })
          return bookingData;
        });

      This enhances the getBookingDataOfPassenger method so that it calculates the number of different booking statuses in the back end.

2. Create a JSON model in the front end.

   1. As you have adjusted the back-end function, you now also have to adapt the front end method that calls this function. Open PassengerOPExtend.controller.js in SAP Business Application Studio and edit the code as follows:

      Code Snippet

      Copy codeSwitch to dark mode

      123
      sap.ui.define(['sap/ui/core/mvc/ControllerExtension',"sap/ui/core/message/Message","sap/ui/core/MessageType", "sap/ui/model/json/JSONModel",
      ], function (ControllerExtension, Message, MessageType, JSONModel) {
      	'use strict';

      You have declared sap.ui.model.json.JSONModel which you'll use in your controller extension method.

   2. Add the following code snippet to onAfterBinding. Place it after the declaration of oInfoMessage.

      Code Snippet

      Copy codeSwitch to dark mode

      1234567
      						const oPassengerBookingsModel = new JSONModel({
      							totalBookingsCount: 0,
      							newBookingsCount: 0,
      							acceptedBookingsCount: 0,
      							cancelledBookingsCount: 0
      						});
      						this.base.getView().setModel(oPassengerBookingsModel, "passengerBookingsModel");

      This creates a JSONModel and adds it to your view with its given name "passengerBookingsModel".

   3. Add the following code snippet to onAfterBinding. Put it after the line const oContext = oFunction.getBoundContext(); :

      Code Snippet

      Copy codeSwitch to dark mode

      1234
      					oPassengerBookingsModel.setProperty("/totalBookingsCount", oContext.getProperty("TotalBookingsCount"));
      					oPassengerBookingsModel.setProperty("/newBookingsCount", oContext.getProperty("NewBookingsCount"));
      					oPassengerBookingsModel.setProperty("/acceptedBookingsCount", oContext.getProperty("AcceptedBookingsCount"));
      					oPassengerBookingsModel.setProperty("/cancelledBookingsCount", oContext.getProperty("CancelledBookingsCount"));

      This binds the properties of your JSONModel to the corresponding properties of the return parameter of the function import.

   4. Adjust the last code block of onAfterBinding as follows:

      Code Snippet

      Copy codeSwitch to dark mode

      1234
      					if (oContext.getProperty("NewBookingsCount") > 0) {
      						this.message = oBookingTableAPI.addMessage(oWarningMessage);
      						oExtensionAPI.showMessages([oInfoMessage]);
      					}

3. Add a custom header section.

   1. Open manifest.json and add the following code under "PassengerObjectPage"/"options"/"settings"/"content":

      Code Snippet

      Copy codeSwitch to dark mode

      12345678910111213
                                      "header": {
                                          "facets": {
                                              "CustomHeaderFacetContentBased1": {
                                                  "template": "sap.fe.cap.customer.ext.fragment.BookingStatus",
                                                  "title": "{i18n>bookingStatus}",
                                                  "visible": "true",
                                                  "position": {
                                                      "placement": "After",
                                                      "anchor": "ContactDetails"
                                                  }
                                              }
                                          }
                                      },

      You have declared a new custom header facet next to the Contact Details header facet.

   2. Open i18n>i18n.properties. Here, you can add some text to the UI that should be translated.

   3. Add the following code snippet:

      Code Snippet

      Copy codeSwitch to dark mode

      12
      #XTIT: Custom header title
      bookingStatus=Booking Status

      This adds the title of your custom header section.

4. Create the micro chart.

   1. Right-click on the fragment folder and choose New File.

   2. Create a new file called BookingStatus.fragment.xml and add the following code for your micro chart:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011
      <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros" xmlns:mc="sap.suite.ui.microchart">
          <VBox id="BookingStatusOverview" displayInline="true">
              <mc:ComparisonMicroChart size="S" maxValue="{passengerBookingsModel>/totalBookingsCount}">
                  <mc:data>
                      <mc:ComparisonMicroChartData title="{i18n>bookingStatusNew}" value="{passengerBookingsModel>/newBookingsCount}" color="sapUiChartPaletteSemanticCritical" />
                      <mc:ComparisonMicroChartData title="{i18n>bookingStatusAccepted}" value="{passengerBookingsModel>/acceptedBookingsCount}" color="sapUiChartPaletteSemanticGood" />
                      <mc:ComparisonMicroChartData title="{i18n>bookingStatusCancelled}" value="{passengerBookingsModel>/cancelledBookingsCount}" color="sapUiChartPaletteSemanticBad" />
                  </mc:data>
              </mc:ComparisonMicroChart>      
          </VBox>
      </core:FragmentDefinition>

      You have added asap.m.VBox. It is the container for sap.suite.ui.microchart.ComparisonMicroChart. For more information, check the API reference.

   3. You have bound the micro chart data to the corresponding properties of theJSONModel. You have also added the three label texts for the micro chart. For more information, check the API reference.

   4. You can see errors for the micro chart and its data items saying that IDs are missing. Use a quickfix to generate the necessary IDs.

   5. Finally, add the three label texts to the i18n.properties file:

      Code Snippet

      Copy codeSwitch to dark mode

      1234567891011
      #XTIT: Custom header title
      bookingStatus=Booking Status
      
      #XTIT: Custom micro chart legend
      bookingStatusNew=New
      
      #XTIT: Custom micro chart legend
      bookingStatusAccepted=Accepted
      
      #XTIT: Custom micro chart legend
      bookingStatusCancelled=Cancelled

5. Check the results.

   1. Switch to the app window.

   2. You can see the newly added Booking Status section with the comparison micro chart in the object page header, next to the Contact Details section.