ex7

Exercise 7 - Guided Development: Adding Building Block Chart

In this exercise, we will learn how to use Guided Development to add a chart building block to the object page custom section. You will also learn how to implement the chart's selection event handler in order to show additional information on the UI. The chart building block to be added to the custom section will show aggregated bookings per customer for all airlines, complementing the Customer VIP Status scenario.
File db/Schema.cds (1) contains view BookedFlights and an association to it in entity Travel (2) which we will use as data source for the chart.

In order for the chart to retrieve data, the service requires oData V4 aggregate transformation capabilities.
In file app/capabilities.cds (3) you can find the corresponding aggregation capabilities annotations (4).

Annotation explanation:

• Collection Transformations lists all supported transformations for the entity container.
• Collection GroupableProperties contains the properties of the annotated entity that can be used in a groupby transformation.
• Collection AggregatableProperties contains the properties of the annotated entity that can be used for aggregation
• Collection Analytics.AggregatedProperties defines the aggregate expression with an aggregation method for the aggregatable property.

Exercise 7.1 - Use Guided Development to Add Building Block Chart

(5) Click on .

(6) Click on Open Application Information .

(7) Click on tile Open Guided Development.

(8) Enter Chart Building Block in the search field and click on the corresponding guide (9).

(10) Click Start Guide.

Set the following property values:

(11) CDS File:

(12) Service:

(13) Entity:

(14) Chart Qualifier: BookedFlights

(15) Dimensions Entity Property:

(16) Click .

(17) Second Dimensions Entity Property:

(18) For the second dimension AirlineID, switch Dimension Role to Series.

(19) Measures Entity Property: .

(20) Click .

(21) The annotation is applied to annotation file app/managetravels/annotations.cds.

The annotation defines the chart type, the measure and the dimensions to be used for visualization of the aggregated data.
The aggregated property CountFlights is defined as the measure.
Properties to_Customer_Customer_ID and AirlineID are defined as the grouping dimensions.
The aggregation result for the current Travel's bookings is enriched with aggregated bookings data for all other airlines.
This is done in a custom handler in file srv/travel-service.js, section Exercise 7: Custom Section Chart Building Block.

(22) Move to step 2 of the development guide by clicking .

Set the following property values:

(23) View or Fragment File:

(24) Building Block ID: myChart

(25) Service: TravelService.

(26) Entity:

(27) Navigation Path: to_BookedFlights

(28) Chart Qualifier:

(29) Aggregation Path:
This defines the position in the XML Fragment where the reference to building block Chart is to be added.

(30) Selection Change Function:

handler.onChartSelectionChanged

We will implement the handler in the next exercise.

(31) Chart Personalization: select Type and Item

In the snippet preview pane, you can now check the properties defined for the building block Chart:

• id of the chart control
• contextPath defining the absolute path from root entity Travel and association to_BookedFlights
• metaPath defining the relative path to the UI.Chart annotation in the metamodel
• personalization for chart configuration options
• selection mode set to single selection

(32) Click .

(33) Click .

Open file app/managetravels/webapp/ext/fragment/CustomSection.fragment.xml.
In the UI, the chart shall be shown next to the table in the same container, sharing the space mutually.

(34) Change the default span of the grid control to

defaultSpan='L6 M6 S12'

(35) Switch the order of lines macros:Chart and macros:Table so that the Chart will be displayed to the left.

(36) Switch to the browser preview window. The chart is shown next to the table.

Exercise 7.3: Implementing the Chart's Selection Change Handler

The chart building block API allows implementing a selection change handler which is triggered when a chart segment is selected.
We will use the event to show additional information in a small popover.
The popover fragment sample is provided in the project.
We need to move it to the app folder in order to make usage of it.

Open project folder app/test-resources/ext/fragment.
Drag and drop file Popover.fragment.xml (37) to folder app/managetravels/webapp/ext/fragment (38).

(39) Confirm dialog by clicking .

Now we need to add the Popover fragment as a dependent control to the Custom Sections grid control.
Go back to file app/managetravels/webapp/ext/fragment/CustomSection.fragment.xml
(40) Add the following xml snippet as shown in the screenshot below.

  <l:dependents>
    <core:Fragment fragmentName="sap.fe.cap.managetravels.ext.fragment.Popover" type="XML"/>			
  </l:dependents>	

Now we need to implement the chart selection event handler. (41) Open file app/managetravels/webapp/ext/CustomSection.js.
The file was created along with the custom section we added in exercise 6.
Replace the file content with the following code snippet.

sap.ui.define(["sap/ui/model/json/JSONModel"], function (JSONModel) {
    "use strict";
    return {
        onChartSelectionChanged: function (oEvent) {
            var oView = this.editFlow.getView();
            var oPopupModel = oView.getModel("popup");
            var oPopover = oEvent.getSource().getParent().getDependents()[0];            
            if (oEvent.getParameter("selected")) {
                if (!oPopupModel) {
                    oPopupModel = new JSONModel();
                    oView.setModel(oPopupModel, "popup");
                }
                oPopupModel.setData(oEvent.getParameter("data")[0].data, true);
                // open popover at selected chart segment
                oPopover.openBy(
                    oEvent.getParameter("data")[0].target
                );
            }
        }
    };
});

Exercise 7.4 Testing the Chart's Event Handler

Switch to the preview browser tab.
(42) Select a chart segment in order to display the popover with additional information about the VIP Customer program per airline.

We will now check for other flight connections for the customer's preferred airlines according to the aggregated bookings shown in the chart.
(43) Click .

In this example, customer Gueldenpfennig (000553) has a preference for Sunset Wings which is shown with the most bookings to in the chart.
Clicking (44) opens a dropdown list with flight connections for the same flight date.

(45) Select a list item for the customer's preferred airline.

(46) Click .

Verify that the both the chart (47) and the micro chart table column (48) have been updated.

Summary

We've now successfully added a @UI.Chart annotation to the service and added the chart building block to the custom section's XML fragment by using Guided Development.
We've implemented the chart's event handler in order to show a popover with additional information when a chart segment is selected.

Continue to - Exercise 8 - Flexible Programming Model: Changing the Edit Flow by Implementing a Controller Extension