<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m'
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-bindingSyntax='complex'
data-sap-ui-resourceroots='{"sap.otuniyi.sample": "./"}'
data-sap-ui-frameOptions="trusted">
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
showLogout: false,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.otuniyi.sample",
height: "100%",
width: "100%",
settings: {
id: "sample"
},
propagateModel: true
})
}).placeAt("content");
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>
/* Styles go here */
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.otuniyi.sample",
"type": "application",
"i18n": "i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"view": {
"uri": "data.json",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "sap.otuniyi.sample/data.json",
"annotations": []
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_bluecrystal"]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.otuniyi.sample.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.otuniyi.sample.i18n"
}
},
"view": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
},
"dataSource": "view"
}
},
"resources": {
"css": [{
"uri": "style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "sap.otuniyi.sample",
"controlId": "rootControl",
"viewType": "XML",
"async": true,
"bypassed": {
"target": ["master", "notFound"]
}
},
"routes": [{
"name": "master",
"pattern": "",
"target": ["master"]
}, {
"name": "detail",
"pattern": "masterList/:detailID:",
"target": ["master", "detail"]
}, {
"name": "subDetail",
"pattern": "masterList/:detailID:/titlesProperties/:subDetailID:",
"target": ["master", "subDetail"]
}],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": "0"
},
"detail": {
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": "1"
},
"subDetail": {
"viewName": "SubDetail",
"controlAggregation": "detailPages",
"viewLevel": "2"
},
"detailObjectNotFound": {
"viewName": "DetailObjectNotFound",
"viewId": "detailObjectNotFound"
},
"detailNoObjectsAvailable": {
"viewName": "DetailNoObjectsAvailable",
"viewId": "detailNoObjectsAvailable"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"],
function(UIComponent, JSONModel) {
"use strict";
return UIComponent.extend("sap.otuniyi.sample.Component", {
metadata: {
manifest: "json"
},
init: function() {
var oModel = new JSONModel("data.json");
this.setModel(oModel);
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
this.getRouter().attachTitleChanged(function(oEvent) {
document.title = oEvent.getParameter("title");
});
}
});
}, true);
<View xmlns="sap.m">
<SplitApp id="rootControl"></SplitApp>
</View>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" controllerName="sap.otuniyi.sample.Detail"
xmlns:semantic="sap.m.semantic">
<semantic:DetailPage id="page" title="{i18n>detailTitle}" navButtonPress="onNavBack">
<semantic:content>
<List id="DetailsId" items="{titlesProperties}" headerText="Buttons" updateFinished="onListUpdateFinished"
noDataText="No detail Data" selectionChange="onSelectionChange" class="sapUiResponsiveMargin">
<items>
<StandardListItem title="{subDetailID}" type="Active" press="onSelectionChange"/>
</items>
</List>
</semantic:content>
</semantic:DetailPage>
</mvc:View>
<mvc:View controllerName="sap.otuniyi.sample.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:semantic="sap.m.semantic">
<semantic:MasterPage id="page" title="Contents">
<semantic:content>
<List id="list" items="{view>/masterList}" mode="{= ${device>/system/phone} ? 'None' : 'SingleSelectMaster'}"
busyIndicatorDelay="{masterView>/delay}" noDataText="{masterView>/noDataText}" growing="true" growingScrollToLoad="true"
selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
<items>
<StandardListItem title="{titleName}" type="Active" press="onSelectionChange" description="{titleServer}"/>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</mvc:View>
{
"masterList": [{
"detailID": 0,
"titleName": "Master 1",
"description": "001",
"icon": "sap-icon://alert",
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
"caption": "Caption for Image 0"
}, {
"subDetailID": 1,
"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
"caption": "Caption for Image 1"
}, {
"subDetailID": 2,
"imageURL": "https://cdns.tblsft.com/sites/default/files/sap_0.png",
"caption": "Caption for Image 2"
}, {
"subDetailID": 3,
"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
"caption": "Caption for Image 3"
}]
}, {
"detailID": 1,
"titleName": "Master 2",
"description": "002",
"icon": "sap-icon://alert",
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://zdnet1.cbsistatic.com/hub/i/r/2017/04/26/eafa2cae-0958-4fb9-b3ef-4d163a131fab/resize/370xauto/de25fbce832bfb55481e02f411d88be3/sap-cloud-logo.png",
"caption": "Caption for Image 4"
}]
}, {
"detailID": 2,
"titleName": "Master 3",
"description": "003",
"icon": "sap-icon://alert",
"titlesProperties": [{
"subDetailID": 0,
"imageURL": "https://en.wikipedia.org/wiki/SAP_SE#/media/File:SAP_2011_logo.svg",
"caption": "Caption for Image 5"
}, {
"subDetailID": 1,
"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
"caption": "Caption for Image 6"
}]
}]
}
<mvc:View controllerName="sap.otuniyi.sample.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:semantic="sap.m.semantic">
<semantic:MasterPage id="page" title="Contents">
<semantic:content>
<List id="list" items="{/masterList}" mode="SingleSelectMaster"
noDataText="No List Found" growing="true" growingScrollToLoad="true" selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
<items>
<StandardListItem title="{titleName}" type="Active" press="onSelectionChange" icon="{icon}" description="{description}"/>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</mvc:View>
sap.ui.define( ["sap/ui/core/mvc/Controller", "sap/ui/Device"], function (Controller, Device) {
"use strict";
return Controller.extend("sap.otuniyi.sample.Master", {
onInit : function () {
this.getOwnerComponent().getRouter().getRoute("master").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
if(!Device.system.phone) {
this.getOwnerComponent().getRouter()
.navTo("detail", {detailID: 0}, true);
}
},
onSelectionChange: function(oEvent) {
var sdetailID = oEvent.getSource().getSelectedItem().getBindingContext().getProperty("detailID");
this.getOwnerComponent().getRouter()
.navTo("detail",
{detailID:sdetailID},
!Device.system.phone);
}
});
}, true);
appTitle = "Page Title"
appDescription = "Sample App"
detailTitle="Detail Page"
sap.ui.define( ["sap/ui/core/mvc/Controller", "sap/ui/Device"], function (Controller, Device) {
"use strict";
return Controller.extend("sap.otuniyi.sample.Detail", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
this._detailID = oEvent.getParameter("arguments").detailID;
this.getView().bindElement("/masterList/" + this._detailID);
},
onSelectionChange: function(oEvent) {
var bReplace = !Device.system.phone;
var sID = oEvent.getSource().getBindingContext().getProperty("subDetailID");
this.getOwnerComponent().getRouter().navTo("subDetail", {
detailID: this._detailID,
subDetailID: sID
}, !bReplace);
}
});
}, true);
sap.ui.define( ["sap/ui/core/mvc/Controller", "sap/ui/core/routing/History", "sap/ui/Device"], function (Controller, History, Device) {
"use strict";
return Controller.extend("sap.otuniyi.sample.SubDetail", {
onInit : function () {
this.getOwnerComponent().getRouter().getRoute("subDetail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
var detailID = oEvent.getParameter("arguments").detailID;
var subDetailID = oEvent.getParameter("arguments").subDetailID;
this.getView().bindElement("/masterList/" + detailID + "/titlesProperties/"+subDetailID);
},
onNavBack : function () {
var sPreviousHash = History.getInstance().getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
this.getOwnerComponent().getRouter()
.navTo("detail",
{detailID:0}, !Device.system.phone);
}
}
});
}, true);
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:semantic="sap.m.semantic" controllerName="sap.otuniyi.sample.SubDetail">
<semantic:DetailPage title="{caption}" showNavButton="true" navButtonPress="onNavBack">
<semantic:content>
<VBox>
<items>
<Image src="{imageURL}" densityAware="false" width="50rem">
<layoutData>
<FlexItemData growFactor="1"/>
</layoutData>
</Image>
<Text text="{caption}"/>
</items>
</VBox>
</semantic:content>
</semantic:DetailPage>
</mvc:View>