Using Extension Points

At times, you may have a special requirement that cannot be achieved with the standard tools, such as using annotations. To achieve this, you will need to add your own code.

In this exercise, you will add a custom column to the Booking Supplements table on the subobject page. It will help the users choose when to serve their in-flight meal. To do this, you will create a custom column and add the SegmentedButton control to it.

For more information, see the API reference at sap.m.SegmentedButton - API Reference - Demo Kit - SAPUI5 SDK (ondemand.com).

You will first add a new property to your CAP data model to ensure the UI-side selection is persisted in the back end. Then, you will use the Page Editor to add a custom column in the UI.

Next, you will add the SegmentedButton control. Finally, you will implement a method in the controller extension for updating the new property.

For more information and samples, see sap.m.SegmentedButton - Samples - Demo Kit - SAPUI5 SDK (ondemand.com).

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

1. Add a new property to the Booking entity which will persist the choice of the meal time.

   1. Open the db/schema.cds file.

   2. Add the following code snippet at the end of the file:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1234567
      entity MealOptionDeliveryPreference: CodeList {
        key code : String enum {
          SoonAfterTakeoff = 'S';
          Midflight = 'M';
          Late = 'L';
        } default 'M'
      };

   3. Add a new property DeliveryPreference to the BookingSupplement entity which is an association to the previously defined MealOptionDeliveryPreference entity. It will persist the user choice.

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      1
      DeliveryPreference : Association to MealOptionDeliveryPreference;

2. Create a new file sap.fe.cap.travel-MealOptionDeliveryPreference.csv in the db/data folder and add the following code snippet to it:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234
   code;name;descr
   S;SoonAfterTakeoff;Delivery as early as possible after the take-off
   M;Midflight;Not too early not too late
   L;Late;Late in the flight while still allowing you to finish the meal or drink before the landing

3. Add a custom column to the Booking Supplements table on the subobject page using the Page Editor.

   1. Open the Page Editor for the travel_processor app.

   2. Select Booking Object Page > Booking Supplements > Table > Columns > Add Custom Column.

   3. Add Serving Time of Meals to the header text of the new column.

   4. Select the globe icon and Apply to add localization.

   5. Add ServingTimeOfMeals to the Column Fragment Name.

   6. Choose Product Price from the Anchor Column dropdown menu.

   7. Select True in Generate Event Handler Controller.

   8. A new custom column Serving Time of Meals has been added to the Columns section.

4. Add the XML code for the custom column content to the app/travel_processor/webapp/ext/fragment/ServingTimeOfMeals.fragment.xml. This file has been generated by the Page Editor and includes some initial XML code.

   1. Substitute the XML code with this code snippet:

      Code Snippet

      Copy code

      Copy code

      Switch to dark mode

      Switch to dark mode

      123456789101112
      <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
          <SegmentedButton core:require="{handler: 'sap/fe/cap/travel/ext/fragment/ServingTimeOfMeals'}" id="SB1" 
              selectionChange="handler.onSelectionChange" 
              enabled="{ui>/isEditable}"
              selectedKey="{= ${DeliveryPreference_code}}">
              <items>
                  <SegmentedButtonItem id="_IDGenSegmentedButtonItem1" text="{i18n>early}" key="S" />
                  <SegmentedButtonItem id="_IDGenSegmentedButtonItem2" text="{i18n>mid}" key="M" />
                  <SegmentedButtonItem id="_IDGenSegmentedButtonItem3" text="{i18n>late}" key="L" />
              </items>
          </SegmentedButton>
      </core:FragmentDefinition>

   As you can see in the API documentation, sap.m.SegmentedButton control has an aggregation items of type sap.m.SegmentedButtonItem. The latter is derived from the sap.ui.core.Item and you can use any of its artifacts, like properties. In the code snippet above you have used its key and text properties.

   You can use a selectionChange event of sap.m.SegmentedButton in the XML fragment and bind it to the method which you will implement in your custom controller. The method will update the property in the back end after the selection changes on the UI side.

   You can see two properties of sap.m.SegmentedButton being used in the XML fragment: enabled and selectedKey. The selectedKey property of sap.m.SegmentedButton is bound to the value of DeliveryPreference_code you introduced in the back end. It influences which key of the segmented button is selected.

   Enabled is another property of the sap.m.SegmentedButton. In the code snippet above the enabled, control property is bound to the value of the ui model's property isEditable. The Ui model is an SAPUI5 JSON model containing UI information. It is managed by SAP Fiori elements. You are not allowed to change its values but you may access it from your custom fragments and custom controllers and you may evaluate its public property isEditable. If it is set to true, the application is in edit mode. In this case, the segmented button is enabled.

5. In the file explorer, open the app/travel_processor/webapp/i18n/i18n.properties file and paste the texts for the threeSegmentedButtonItems you previously added to the XML fragment.

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234567891011121314
   #XCOL: Custom column header text
   servingTimeOfMeals=Serving Time of Meals
   
   #XTIT: Delivery preference of the Meal during the flight
   deliveryPreference=Delivery Preference
   
   #XTIT: Early time of meal delivery during the flight
   early=early
   
   #XTIT: Mid time of meal delivery during the flight
   mid=mid
   
   #XTIT: Later time of meal delivery during the flight
   late=late

6. Open app/travel_processor/webapp/ext/fragment/ServingTimeOfMeals.js and paste this code snippet:

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   12345678910111213
   sap.ui.define([
       "sap/m/MessageToast"
   ], function(MessageToast) {
       'use strict';
   
       return {
          onSelectionChange: function(oEvent) {
               var sNewDeliveryPreferenceCode = oEvent.getParameter("item").getKey();
               var oSegmBtn = oEvent.getSource();
               oSegmBtn.getBindingContext().setProperty("DeliveryPreference_code", sNewDeliveryPreferenceCode);
          }
       };
   });

   The method onSelectionChange will be called once the segmented button selection changes.

7. Switch to the app. You can see a new column in the Booking Supplements table. It is read-only in the display mode.

   1. Navigate to the object page to change to the Edit mode.

   2. Select Edit on the top right of the object page.

   3. Select the first row in the Bookings table.

   4. Select "early" for the first meal and "late" for the second meal.

   5. Select Apply on the bottom right of the subobject page.

   6. Select Save on the object page.

8. Select the first row in the Bookings table. Notice that your selection of meal times has been saved and you have added a custom column to the subobject page table.

   The Page Editor helps you position your custom control on the page by selecting an anchor element and positioning your custom element in respect to it (before or after). The Page Editor adds the corresponding settings to the manifest.json file. The code snippet below has been generated by the Page Editor.

   Code Snippet

   Copy code

   Copy code

   Switch to dark mode

   Switch to dark mode

   1234567891011121314
                               "controlConfiguration": {
                                   "to_BookSupplement/@com.sap.vocabularies.UI.v1.LineItem": {
                                       "columns": {
                                           "ServingTimeOfMeals": {
                                               "header": "{i18n>servingTimeOfMeals}",
                                               "position": {
                                                   "anchor": "DataField::Price",
                                                   "placement": "After"
                                               },
                                               "template": "sap.fe.cap.travel.ext.fragment.ServingTimeOfMeals"
                                           }
                                       }
                                   }
                               }