Skip to content

Commit 14b4107

Browse files
d3xter666d3xter666
committed
Add data to Detail and DetailDetail
1 parent 41b4d04 commit 14b4107

6 files changed

Lines changed: 133 additions & 13 deletions

File tree

‎webapp/controller/Detail.controller.js‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,45 @@
11
sap.ui.define([
22
"jquery.sap.global",
3-
"sap/ui/core/mvc/Controller"
4-
], function (jQuery, Controller) {
3+
"sap/ui/core/mvc/Controller",
4+
"sap/ui/model/json/JSONModel"
5+
], function (jQuery, Controller, JSONModel) {
56
"use strict";
67

78
return Controller.extend("ui5confUI5Conf.controller.Detail", {
89
onInit: function () {
10+
this.getRouter().attachRouteMatched(this._handleRouteChanged.bind(this));
911
},
12+
_itemDetail: null,
13+
_handleRouteChanged: function (oEvent) {
14+
var oView = this.oView,
15+
oModel = this.oView.getModel(),
16+
oData = oModel.getData(),
17+
sProductId = oEvent.getParameter("arguments")["detail-item"],
18+
oItemData = oData["ProductCollection"].filter(function (oCurItem) {
19+
return oCurItem.ProductId === sProductId;
20+
})[0];
21+
22+
this._itemDetail = sProductId;
23+
24+
if (oItemData) {
25+
oView.setModel(new JSONModel(oItemData), "detail");
26+
}
27+
},
28+
1029
getRouter: function () {
1130
return sap.ui.core.UIComponent.getRouterFor(this);
1231
},
13-
handlePress: function () {
32+
handlePress: function (oEvent) {
33+
var sId = oEvent.getParameter("id"),
34+
oSelectedItem = sap.ui.getCore().byId(sId),
35+
// It's important to point that we're getting the second model, not the default one
36+
oModel = oSelectedItem.getModel("detailDetail"),
37+
sPath = oSelectedItem.getBindingContextPath(),
38+
oData = oModel.getProperty(sPath);
39+
1440
this.getRouter().navTo("detailDetailName", {
15-
"detail-detail-item": "item-inner1",
16-
"detail-item": "item1"
41+
"detail-detail-item": oData.ProductId,
42+
"detail-item": this._itemDetail
1743
});
1844
},
1945
toggleFooter: function () {

‎webapp/controller/DetailDetail.controller.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,31 @@
11
sap.ui.define([
22
"jquery.sap.global",
3-
"sap/ui/core/mvc/Controller"
4-
], function (jQuery, Controller) {
3+
"sap/ui/core/mvc/Controller",
4+
"sap/ui/model/json/JSONModel"
5+
], function (jQuery, Controller, JSONModel) {
56
"use strict";
67

78
return Controller.extend("ui5confUI5Conf.controller.DetailDetail", {
89
onInit: function () {
10+
this.getRouter().attachRouteMatched(this._handleRouteChanged.bind(this));
11+
},
12+
getRouter: function () {
13+
return sap.ui.core.UIComponent.getRouterFor(this);
14+
},
15+
_itemDetail: null,
16+
_handleRouteChanged: function (oEvent) {
17+
var oView = this.oView,
18+
// Be aware to fetch the proper model!
19+
oModel = this.oView.getModel("detailDetail"),
20+
oData = oModel.getData(),
21+
sProductId = oEvent.getParameter("arguments")["detail-detail-item"],
22+
oItemData = oData["ProductCollection"].filter(function (oCurItem) {
23+
return oCurItem.ProductId === sProductId;
24+
})[0];
25+
26+
if (oItemData) {
27+
oView.setModel(new JSONModel(oItemData), "detail");
28+
}
929
},
1030
toggleFooter: function () {
1131
var oObjectPageLayout = this.getView().byId("ObjectPageLayout");

‎webapp/manifest.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
"": {
6363
"type": "sap.ui.model.json.JSONModel",
6464
"uri": "model/products.json"
65+
},
66+
"detailDetail": {
67+
"type": "sap.ui.model.json.JSONModel",
68+
"uri": "model/products_less.json"
6569
}
6670
},
6771
"resources": {

‎webapp/model/products_less.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"title" : "Products List",
3+
"showFooter" : false,
4+
"headerExpanded": true,
5+
"titleClickable": true,
6+
"ProductCollection": [
7+
{
8+
"ProductId": "1239102",
9+
"Name": "Power Projector 4713",
10+
"Category": "Projector",
11+
"SupplierName": "Titanium"
12+
},
13+
14+
{
15+
"ProductId": "K47322.1",
16+
"Name": "Hurricane GX",
17+
"Category": "Graphics Card",
18+
"SupplierName": "Red Point Stores"
19+
},
20+
21+
{
22+
"ProductId": "P1239823",
23+
"Name": "Monitor Locking Cable",
24+
"Category": "Accessory",
25+
"SupplierName": "Technocom"
26+
},
27+
28+
{
29+
"ProductId": "214-121-828",
30+
"Name": "Laptop Case",
31+
"Category": "Accessory",
32+
"SupplierName": "Red Point Stores"
33+
},
34+
35+
{
36+
"ProductId": "OP-38800002",
37+
"Name": "High End Laptop 2b",
38+
"Category": "Laptop",
39+
"SupplierName": "Titanium"
40+
}
41+
]
42+
}

‎webapp/view/Detail.view.xml‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,14 @@
1010
<uxap:headerTitle>
1111
<uxap:ObjectPageHeader objectImageURI="sap-icon://product"
1212
objectImageShape="Square"
13+
objectTitle="{detail>/Name}"
14+
objectImageAlt="{detail>/Name}"
15+
objectSubtitle="{detail>/Category}"
1316
isObjectIconAlwaysVisible="false"
1417
isObjectTitleAlwaysVisible="false"
1518
isObjectSubtitleAlwaysVisible="false">
16-
<uxap:actions>
19+
20+
<uxap:actions>
1721
<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down" type="Emphasized"/>
1822
<uxap:ObjectPageHeaderActionButton icon="sap-icon://show" type="Emphasized"/>
1923
<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true" hideText="false" type="Emphasized" press="toggleFooter"/>
@@ -22,6 +26,8 @@
2226
</uxap:headerTitle>
2327
<uxap:headerContent>
2428
<layout:VerticalLayout>
29+
<Text text="{detail>/ProductId}"/>
30+
<Text text="{detail>/SupplierName}"/>
2531
</layout:VerticalLayout>
2632
<layout:VerticalLayout>
2733
<Label text="{i18n>detail.header.dispatch}"/>
@@ -39,7 +45,6 @@
3945
<uxap:subSections>
4046
<uxap:ObjectPageSubSection>
4147
<uxap:blocks>
42-
<Button text="Go To Next Page" press="handlePress"/>
4348
<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."/>
4449
</uxap:blocks>
4550
</uxap:ObjectPageSubSection>
@@ -49,7 +54,7 @@
4954
<uxap:subSections>
5055
<uxap:ObjectPageSubSection>
5156
<uxap:blocks>
52-
<Table id="idProductsTable" inset="false">
57+
<Table id="idProductsTable" inset="false" items="{path: 'detailDetail>/ProductCollection'}">
5358
<columns>
5459
<Column minScreenWidth="Tablet" demandPopin="true">
5560
<Text text="{i18n>master.Name}"/>
@@ -62,8 +67,11 @@
6267
</Column>
6368
</columns>
6469
<items>
65-
<ColumnListItem vAlign="Middle">
70+
<ColumnListItem vAlign="Middle" type="Navigation" press="handlePress">
6671
<cells>
72+
<ObjectIdentifier title="{detailDetail>Name}" text="{detailDetail>ProductId}"/>
73+
<Text text="{detailDetail>Category}"/>
74+
<Text text="{detailDetail>SupplierName}"/>
6775
</cells>
6876
</ColumnListItem>
6977
</items>

‎webapp/view/DetailDetail.view.xml‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,25 @@
1010
<uxap:headerTitle>
1111
<uxap:ObjectPageHeader objectImageURI="sap-icon://product"
1212
objectImageShape="Square"
13+
objectTitle="{detail>/Name}"
14+
objectImageAlt="{detail>/Name}"
15+
objectSubtitle="{detail>/Category}"
1316
isObjectIconAlwaysVisible="false"
1417
isObjectTitleAlwaysVisible="false"
1518
isObjectSubtitleAlwaysVisible="false">
19+
1620
<uxap:actions>
17-
<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down" type="Emphasized"/>
21+
<uxap:ObjectPageHeaderActionButton icon="sap-icon://pull-down" type="Emphasized"/>
1822
<uxap:ObjectPageHeaderActionButton icon="sap-icon://show" type="Emphasized"/>
19-
<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true" hideText="false" type="Emphasized" press="toggleFooter"/>
23+
<uxap:ObjectPageHeaderActionButton text="{i18n>detail.header.ToggleFooter}" hideIcon="true"
24+
hideText="false" type="Emphasized" press="toggleFooter"/>
2025
</uxap:actions>
2126
</uxap:ObjectPageHeader>
2227
</uxap:headerTitle>
2328
<uxap:headerContent>
2429
<layout:VerticalLayout>
30+
<Text text="{detail>/ProductId}"/>
31+
<Text text="{detail>/SupplierName}"/>
2532
</layout:VerticalLayout>
2633
<layout:VerticalLayout>
2734
<Label text="{i18n>detail.header.dispatch}"/>
@@ -34,6 +41,19 @@
3441
<Label text="San Jose, USA"/>
3542
</layout:VerticalLayout>
3643
</uxap:headerContent>
44+
<uxap:sections>
45+
<uxap:ObjectPageSection>
46+
<uxap:subSections>
47+
<uxap:ObjectPageSubSection>
48+
<uxap:blocks>
49+
<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."/>
50+
<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;"/>
51+
<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."/>
52+
</uxap:blocks>
53+
</uxap:ObjectPageSubSection>
54+
</uxap:subSections>
55+
</uxap:ObjectPageSection>
56+
</uxap:sections>
3757
<uxap:footer>
3858
<OverflowToolbar>
3959
<ToolbarSpacer/>

0 commit comments

Comments
 (0)