goody

webapp/controller/Details.controller.js

@@ -0,0 +1,30 @@
+sap.ui.define(["mvcapp00124/controller/BaseController"], function (Controller) {
+    "use strict";
+    /**
+     * @param {typeof sap.ui.core.mvc.Controller} Controller
+     */
+
+    return Controller.extend("mvcapp00124.controller.Details", {
+        onInit: function () {
+            // bind the function _onRouteMatched to the event of navigating to the pattern "flights"
+            this.getOwnerComponent()
+                .getRouter()
+                .getRoute("flights")
+                .attachPatternMatched(this._onRouteMatched, this);
+        },
+
+        _onRouteMatched: function (oEvent) {
+            // get the flight id which was navigated to
+            let sFlightId = oEvent.getParameter("arguments").flightId;
+
+            // get the flight data
+            let oData = this.getOwnerComponent().getModel().getData();
+
+            // search for the flightId in the flight data
+            let iIndex = oData.Flight.findIndex((oFlight) => oFlight.flightId === sFlightId);
+
+            // bind the view to the selected flight
+            this.getView().bindElement("/Flight/" + iIndex);
+        },
+    });
+});

webapp/manifest.json

@@ -97,6 +97,10 @@
           "name": "flightList",
           "pattern": "flightList",
           "target": "flightList"
+        }, {
+          "name": "flights/{flightId}",
+          "pattern": "flights",
+          "target": "flights"
         }
       ],
       "targets": {
@@ -111,6 +115,12 @@
           "viewName": "main",
           "controlId": "app",
           "viewLevel": 1
+        },
+        "flights": {
+          "viewId": "details",
+          "viewName": "details",
+          "controlId": "app",
+          "viewLevel": 2
         }
       }
     },

webapp/view/Details.view.xml

@@ -0,0 +1,39 @@
+<mvc:View
+    controllerName="mvcapp00124.controller.Details"
+    xmlns:mvc="sap.ui.core.mvc"
+    xmlns="sap.m"
+    displayBlock="true"
+    height="100%"
+    busyIndicatorDelay="0"
+    xmlns:f="sap.ui.layout.form"
+>
+    <Page id="page">
+        <content>
+            <VBox class="sapUiSmallMargin">
+                <f:SimpleForm
+                    id="flightDetails"
+                    title="Flight Details"
+                >
+                    <f:content>
+                        <Label text="Flight ID" />
+                        <Text text="{flightId}" />
+                        <Label text="From" />
+                        <Text text="{from}" />
+                        <Label text="To" />
+                        <Text text="{to}" />
+                        <Label text="Date" />
+                        <Text text="{date}" />
+                        <Label text="Time" />
+                        <Text text="{time}" />
+                        <Label text="Status" />
+                        <Text text="{status}" />
+                        <Label text="Planned Arrival" />
+                        <Text text="{plannedArrival}" />
+                        <Label text="Information" />
+                        <Text text="{info}" />
+                    </f:content>
+                </f:SimpleForm>
+            </VBox>
+        </content>
+    </Page>
+</mvc:View>