Exercise 7 - Guided Development: Adding Building Block Chart

app/managetravels/annotations.cds

@@ -231,3 +231,37 @@ annotate service.Booking with @(
         ],
     }
 );
+annotate service.BookedFlights with @(
+    UI.Chart #BookedFlights : {
+        $Type : 'UI.ChartDefinitionType',
+        Title : 'Bookings per Airline',
+        ChartType : #Column,
+        Dimensions : [
+            to_Customer_CustomerID,
+            AirlineID,
+        ],
+        DimensionAttributes : [
+            {
+                $Type : 'UI.ChartDimensionAttributeType',
+                Dimension : to_Customer_CustomerID,
+                Role : #Category,
+            },
+            {
+                $Type : 'UI.ChartDimensionAttributeType',
+                Dimension : AirlineID,
+                Role : #Series,
+            },
+        ],
+        MeasureAttributes : [
+            {
+                $Type : 'UI.ChartMeasureAttributeType',
+                Measure : BookingUUID,
+                Role : #Axis1,
+            },
+        ],
+        Measures : [
+            BookingUUID,
+        ],
+    }
+);
+

app/managetravels/webapp/ext/fragment/CustomSection.fragment.xml

@@ -1,20 +1,15 @@
-<core:FragmentDefinition
- xmlns:core='sap.ui.core'
- xmlns='sap.m'
- xmlns:l='sap.ui.layout'
- xmlns:macros='sap.fe.macros'
->
-<VBox core:require="{handler: 'sap/fe/cap/managetravels/ext/fragment/CustomSection'}">  
- <MessageStrip
-   text='All bookings for travel {TravelID} got confirmed by the agency.'
-   showIcon='true'
-   class='sapUiSmallMarginBottom'>
- </MessageStrip>     
- <l:Grid hSpacing='1' containerQuery='true'
-   defaultSpan='L12 M12 S12'>
-  <l:content>
-	<macros:Table metaPath="to_Booking/@com.sap.vocabularies.UI.v1.LineItem" id="bookingTable"></macros:Table>
-  </l:content>
- </l:Grid>
-</VBox>
+<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:macros="sap.fe.macros">
+    <VBox core:require="{handler: 'sap/fe/cap/managetravels/ext/fragment/CustomSection'}">
+        <MessageStrip text="All bookings for travel {TravelID} got confirmed by the agency." showIcon="true" class="sapUiSmallMarginBottom">
+        </MessageStrip>
+        <l:Grid hSpacing="1" containerQuery="true" defaultSpan="L6 M6 S12">
+		  	<l:dependents>
+				<core:Fragment fragmentName="sap.fe.cap.managetravels.ext.fragment.Popover" type="XML"/>			
+			</l:dependents>
+            <l:content>
+                <macros:Chart id="myChart" metaPath="@com.sap.vocabularies.UI.v1.Chart#BookedFlights" contextPath="/Travel/to_BookedFlights" personalization="Type,Item" selectionMode="Single" selectionChange="handler.onChartSelectionChanged"/>
+                <macros:Table metaPath="to_Booking/@com.sap.vocabularies.UI.v1.LineItem" id="bookingTable"/>
+            </l:content>
+        </l:Grid>
+    </VBox>
 </core:FragmentDefinition>

app/managetravels/webapp/ext/fragment/CustomSection.ts

@@ -1,13 +1,37 @@
 import ExtensionAPI from 'sap/fe/core/ExtensionAPI';
 import UI5Event from 'sap/ui/base/Event';
 import MessageToast from 'sap/m/MessageToast';
+import Popover from 'sap/m/Popover';
+import JSONModel from 'sap/ui/model/json/JSONModel';
+
+interface paramType {
+    data: object;
+    target: object;
+}
 
 /**
- * Generated event handler.
- *
- * @param this reference to the 'this' that the event handler is bound to.
+ * @param this reference to the Fiori elements ExtensionAPI.
  * @param event the event object provided by the event provider
  */
-export function onPress(this: ExtensionAPI, event: UI5Event) {
-    MessageToast.show("Custom handler invoked.");
+export function onChartSelectionChanged(this: ExtensionAPI, event: UI5Event<Record<string, any>>) {
+    if (event.getParameter("selected")) {
+        //get element in the context of the custom section fragment
+        //access popover control via stable id
+        const element = this.byId("sap.fe.cap.managetravels::TravelObjectPage--fe::CustomSubSection::CustomSection--myPopover");
+        if (element instanceof Popover) {  
+            let popupModel = element.getModel("popup") as JSONModel;
+
+            if (!popupModel) {
+                popupModel = new JSONModel();
+                element.setModel(popupModel, "popup");
+            }
+            //Direct parameter access possible as chart is set to single selection mode
+            const param = (event.getParameter("data") as [paramType])[0];
+            popupModel.setData(param.data, true);
+            // open popover at selected chart segment
+            element.openBy(
+                param.target as HTMLElement, true
+            );
+        }
+    }
 }