Add detail pages to FlexibleColumnLayout and enable routing

d3xter666 · Jun 8, 2017 · 1e1ca9e · 1e1ca9e
1 parent a78a26f
commit 1e1ca9e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/webapp/controller/Master.controller.js b/webapp/controller/Master.controller.js
@@ -101,6 +101,18 @@ sap.ui.define([
 		},
 		onToggleFooter: function () {
 			this.getPage().setShowFooter(!this.getPage().getShowFooter());
+		},
+		handleItemPress: function (oEvent) {
+			var sId = oEvent.getParameter("id"),
+				oSelectedItem = sap.ui.getCore().byId(sId),
+				oModel = oSelectedItem.getModel(),
+				sPath = oSelectedItem.getBindingContextPath(),
+				oData = oModel.getProperty(sPath);
+
+			this.getRouter().navTo("detailName", {"detail-item": oData.ProductId});
+		},
+		getRouter: function () {
+			return sap.ui.core.UIComponent.getRouterFor(this);
 		}
 	});
 });
diff --git a/webapp/view/Detail.view.xml b/webapp/view/Detail.view.xml
@@ -3,5 +3,5 @@
 		  xmlns="sap.m"
 		  displayBlock="true"
 		  height="100%">
-	<Button text="Test" press="handlePress"/>
+	<Button text="Go To Next Page" press="handlePress"/>
 </mvc:View>
diff --git a/webapp/view/DetailDetail.view.xml b/webapp/view/DetailDetail.view.xml
@@ -3,5 +3,5 @@
 		  xmlns="sap.m"
 		  displayBlock="true"
 		  height="100%">
-	<Text text="The end"/>
+	<Text text="Last Page"/>
 </mvc:View>
diff --git a/webapp/view/Master.view.xml b/webapp/view/Master.view.xml
@@ -82,7 +82,7 @@
 					</Column>
 				</columns>
 				<items>
-					<ColumnListItem vAlign="Middle">
+					<ColumnListItem vAlign="Middle" type="Navigation" press="handleItemPress">
 						<cells>
 							<ObjectIdentifier title="{Name}" text="{ProductId}"/>
 							<Text text="{Category}"/>