Add data to Detail and DetailDetail

d3xter666 · Jun 8, 2017 · 14b4107 · 14b4107
1 parent 41b4d04
commit 14b4107
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 13 deletions.
diff --git a/webapp/controller/Detail.controller.js b/webapp/controller/Detail.controller.js
@@ -1,19 +1,45 @@
 sap.ui.define([
 	"jquery.sap.global",
-	"sap/ui/core/mvc/Controller"
-], function (jQuery, Controller) {
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/model/json/JSONModel"
+], function (jQuery, Controller, JSONModel) {
 	"use strict";
 
 	return Controller.extend("ui5confUI5Conf.controller.Detail", {
 		onInit: function () {
+			this.getRouter().attachRouteMatched(this._handleRouteChanged.bind(this));
 		},
+		_itemDetail: null,
+		_handleRouteChanged: function (oEvent) {
+			var oView = this.oView,
+				oModel = this.oView.getModel(),
+				oData = oModel.getData(),
+				sProductId = oEvent.getParameter("arguments")["detail-item"],
+				oItemData = oData["ProductCollection"].filter(function (oCurItem) {
+					return oCurItem.ProductId === sProductId;
+				})[0];
+
+			this._itemDetail = sProductId;
+
+			if (oItemData) {
+				oView.setModel(new JSONModel(oItemData), "detail");
+			}
+		},
+
 		getRouter: function () {
 			return sap.ui.core.UIComponent.getRouterFor(this);
 		},
-		handlePress: function () {
+		handlePress: function (oEvent) {
+			var sId = oEvent.getParameter("id"),
+				oSelectedItem = sap.ui.getCore().byId(sId),
+				// It's important to point that we're getting the second model, not the default one
+				oModel = oSelectedItem.getModel("detailDetail"),
+				sPath = oSelectedItem.getBindingContextPath(),
+				oData = oModel.getProperty(sPath);
+
 			this.getRouter().navTo("detailDetailName", {
-				"detail-detail-item": "item-inner1",
-				"detail-item": "item1"
+				"detail-detail-item": oData.ProductId,
+				"detail-item": this._itemDetail
 			});
 		},
 		toggleFooter: function () {

diff --git a/webapp/controller/DetailDetail.controller.js b/webapp/controller/DetailDetail.controller.js
@@ -1,11 +1,31 @@
 sap.ui.define([
 	"jquery.sap.global",
-	"sap/ui/core/mvc/Controller"
-], function (jQuery, Controller) {
+	"sap/ui/core/mvc/Controller",
+	"sap/ui/model/json/JSONModel"
+], function (jQuery, Controller, JSONModel) {
 	"use strict";
 
 	return Controller.extend("ui5confUI5Conf.controller.DetailDetail", {
 		onInit: function () {
+			this.getRouter().attachRouteMatched(this._handleRouteChanged.bind(this));
+		},
+		getRouter: function () {
+			return sap.ui.core.UIComponent.getRouterFor(this);
+		},
+		_itemDetail: null,
+		_handleRouteChanged: function (oEvent) {
+			var oView = this.oView,
+				// Be aware to fetch the proper model!
+				oModel = this.oView.getModel("detailDetail"),
+				oData = oModel.getData(),
+				sProductId = oEvent.getParameter("arguments")["detail-detail-item"],
+				oItemData = oData["ProductCollection"].filter(function (oCurItem) {
+					return oCurItem.ProductId === sProductId;
+				})[0];
+
+			if (oItemData) {
+				oView.setModel(new JSONModel(oItemData), "detail");
+			}
 		},
 		toggleFooter: function () {
 			var oObjectPageLayout = this.getView().byId("ObjectPageLayout");

diff --git a/webapp/manifest.json b/webapp/manifest.json
@@ -62,6 +62,10 @@
 			"": {
 				"type": "sap.ui.model.json.JSONModel",
 				"uri": "model/products.json"
+			},
+			"detailDetail": {
+				"type": "sap.ui.model.json.JSONModel",
+				"uri": "model/products_less.json"
 			}
 		},
 		"resources": {

diff --git a/webapp/model/products_less.json b/webapp/model/products_less.json
@@ -0,0 +1,42 @@
+{
+  "title" : "Products List",
+  "showFooter" : false,
+  "headerExpanded": true,
+  "titleClickable": true,
+  "ProductCollection": [
+    {
+      "ProductId": "1239102",
+      "Name": "Power Projector 4713",
+      "Category": "Projector",
+      "SupplierName": "Titanium"
+    },
+
+    {
+      "ProductId": "K47322.1",
+      "Name": "Hurricane GX",
+      "Category": "Graphics Card",
+      "SupplierName": "Red Point Stores"
+    },
+
+    {
+      "ProductId": "P1239823",
+      "Name": "Monitor Locking Cable",
+      "Category": "Accessory",
+      "SupplierName": "Technocom"
+    },
+
+    {
+      "ProductId": "214-121-828",
+      "Name": "Laptop Case",
+      "Category": "Accessory",
+      "SupplierName": "Red Point Stores"
+    },
+
+    {
+      "ProductId": "OP-38800002",
+      "Name": "High End Laptop 2b",
+      "Category": "Laptop",
+      "SupplierName": "Titanium"
+    }
+  ]
+}
diff --git a/webapp/view/Detail.view.xml b/webapp/view/Detail.view.xml
@@ -10,10 +10,14 @@
 		<uxap:headerTitle>
 			<uxap:ObjectPageHeader objectImageURI="sap-icon://product"
 								   objectImageShape="Square"
+								   objectTitle="{detail>/Name}"
+								   objectImageAlt="{detail>/Name}"
+								   objectSubtitle="{detail>/Category}"
 								   isObjectIconAlwaysVisible="false"
 								   isObjectTitleAlwaysVisible="false"
 								   isObjectSubtitleAlwaysVisible="false">
-				<uxap:actions>
+
+			<uxap:actions>
 					<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down" type="Emphasized"/>
 					<uxap:ObjectPageHeaderActionButton icon="sap-icon://show" type="Emphasized"/>
 					<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true" hideText="false" type="Emphasized" press="toggleFooter"/>
@@ -22,6 +26,8 @@
 		</uxap:headerTitle>
 		<uxap:headerContent>
 			<layout:VerticalLayout>
+				<Text text="{detail>/ProductId}"/>
+				<Text text="{detail>/SupplierName}"/>
 			</layout:VerticalLayout>
 			<layout:VerticalLayout>
 				<Label text="{i18n>detail.header.dispatch}"/>
@@ -39,7 +45,6 @@
 				<uxap:subSections>
 					<uxap:ObjectPageSubSection>
 						<uxap:blocks>
-							<Button text="Go To Next Page" press="handlePress"/>
 							<Text text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mi ipsum. Quisque a odio neque. Duis dapibus mi porttitor ipsum interdum viverra. Ut non semper metus. Aliquam id tortor et eros semper tincidunt ut vitae augue. Pellentesque sed tincidunt mi, quis tempus libero. Nullam eget euismod erat, nec laoreet diam. Etiam ornare vel est vel lobortis. Cras blandit, arcu condimentum laoreet hendrerit, leo odio tristique lorem, vitae tempus felis lorem sed enim. Sed ac tempus tellus, eget ullamcorper dolor. Mauris molestie justo nulla, eu vulputate ligula rutrum efficitur. Etiam bibendum nisl ut bibendum vehicula."/>
 						</uxap:blocks>
 					</uxap:ObjectPageSubSection>
@@ -49,7 +54,7 @@
 				<uxap:subSections>
 					<uxap:ObjectPageSubSection>
 						<uxap:blocks>
-							<Table id="idProductsTable" inset="false">
+							<Table id="idProductsTable" inset="false" items="{path: 'detailDetail>/ProductCollection'}">
 								<columns>
 									<Column minScreenWidth="Tablet" demandPopin="true">
 										<Text text="{i18n>master.Name}"/>
@@ -62,8 +67,11 @@
 									</Column>
 								</columns>
 								<items>
-									<ColumnListItem vAlign="Middle">
+									<ColumnListItem vAlign="Middle" type="Navigation" press="handlePress">
 										<cells>
+											<ObjectIdentifier title="{detailDetail>Name}" text="{detailDetail>ProductId}"/>
+											<Text text="{detailDetail>Category}"/>
+											<Text text="{detailDetail>SupplierName}"/>
 										</cells>
 									</ColumnListItem>
 								</items>

diff --git a/webapp/view/DetailDetail.view.xml b/webapp/view/DetailDetail.view.xml
@@ -10,18 +10,25 @@
 		<uxap:headerTitle>
 			<uxap:ObjectPageHeader objectImageURI="sap-icon://product"
 								   objectImageShape="Square"
+								   objectTitle="{detail>/Name}"
+								   objectImageAlt="{detail>/Name}"
+								   objectSubtitle="{detail>/Category}"
 								   isObjectIconAlwaysVisible="false"
 								   isObjectTitleAlwaysVisible="false"
 								   isObjectSubtitleAlwaysVisible="false">
+
 				<uxap:actions>
-					<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down"  type="Emphasized"/>
+					<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down" type="Emphasized"/>
 					<uxap:ObjectPageHeaderActionButton icon="sap-icon://show" type="Emphasized"/>
-					<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true" hideText="false" type="Emphasized" press="toggleFooter"/>
+					<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true"
+													   hideText="false" type="Emphasized" press="toggleFooter"/>
 				</uxap:actions>
 			</uxap:ObjectPageHeader>
 		</uxap:headerTitle>
 		<uxap:headerContent>
 			<layout:VerticalLayout>
+				<Text text="{detail>/ProductId}"/>
+				<Text text="{detail>/SupplierName}"/>
 			</layout:VerticalLayout>
 			<layout:VerticalLayout>
 				<Label text="{i18n>detail.header.dispatch}"/>
@@ -34,6 +41,19 @@
 				<Label text="San Jose, USA"/>
 			</layout:VerticalLayout>
 		</uxap:headerContent>
+		<uxap:sections>
+			<uxap:ObjectPageSection>
+				<uxap:subSections>
+					<uxap:ObjectPageSubSection>
+						<uxap:blocks>
+							<Text text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vel mi ipsum. Quisque a odio neque. Duis dapibus mi porttitor ipsum interdum viverra. Ut non semper metus. Aliquam id tortor et eros semper tincidunt ut vitae augue. Pellentesque sed tincidunt mi, quis tempus libero. Nullam eget euismod erat, nec laoreet diam. Etiam ornare vel est vel lobortis. Cras blandit, arcu condimentum laoreet hendrerit, leo odio tristique lorem, vitae tempus felis lorem sed enim. Sed ac tempus tellus, eget ullamcorper dolor. Mauris molestie justo nulla, eu vulputate ligula rutrum efficitur. Etiam bibendum nisl ut bibendum vehicula."/>
+							<Text text="Proin nibh elit, dapibus in mauris sed, euismod tincidunt quam. Integer commodo nibh scelerisque felis consectetur rhoncus. Suspendisse potenti. Nam fermentum augue quis vehicula finibus. Duis urna nunc, pharetra ut orci vitae, ultricies tempus enim. Sed sed risus in risus venenatis rhoncus ac non tellus. Curabitur consequat, ante vitae pharetra dictum, ex nunc vulputate odio, ac dignissim orci dolor in arcu. Vestibulum tellus risus, semper et ipsum quis, hendrerit luctus libero. Suspendisse pharetra enim vel maximus feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mattis massa non turpis posuere semper. Morbi mollis lacinia velit, non pulvinar ex cursus nec. Nam dapibus, lectus eget malesuada faucibus, tellus libero consequat enim, eu accumsan augue sem nec sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;"/>
+							<Text text="Quisque quis felis et diam ultricies facilisis. Nullam vehicula, quam quis euismod mattis, enim ante efficitur elit, eu porttitor elit nunc quis mauris. Donec lacinia convallis dui ac dictum. Vivamus tincidunt tortor augue, at varius sem feugiat ut. Proin eleifend ligula sed neque laoreet interdum. Vivamus sit amet interdum elit. Mauris laoreet mattis quam, et tristique velit ultricies dictum. Morbi efficitur nunc ac mauris interdum, et tincidunt ligula vestibulum. Curabitur quis turpis eleifend, sodales erat quis, tempus ipsum. Integer luctus facilisis ante id condimentum. Phasellus imperdiet, sapien vel ultricies hendrerit, sapien ante placerat risus, eu condimentum justo odio sed lacus. Vivamus quis est lobortis, volutpat turpis eget, scelerisque arcu."/>
+						</uxap:blocks>
+					</uxap:ObjectPageSubSection>
+				</uxap:subSections>
+			</uxap:ObjectPageSection>
+		</uxap:sections>
 		<uxap:footer>
 			<OverflowToolbar>
 				<ToolbarSpacer/>