<!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>
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() {
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 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 items="{ODataManifestModel>/Products}" mode="SingleSelectMaster" noDataText="No Data Available" growing="true"
growingScrollToLoad="true" selectionChange="onSelectionChange">
<items>
<ObjectListItem title="{ODataManifestModel>ProductName}" type="Active" icon="sap-icon://user-settings" press="onSelectionChange"/>
</items>
</List>
</semantic:content>
</semantic:MasterPage>
</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" xmlns:form="sap.ui.layout.form"
controllerName="sap.otuniyi.sample.Detail" xmlns:semantic="sap.m.semantic">
<semantic:DetailPage id="page" title="detailTitle" navButtonPress="onNavBack">
<semantic:content>
<form:Form >
<form:layout>
<form:ResponsiveGridLayout columnsM="1" columnsL="1" labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2"/>
</form:layout>
<form:formContainers>
<form:FormContainer>
<form:formElements>
<form:FormElement>
<form:fields>
<Label id="DescriptionLabel" text="Product ID"/>
<Input value="{ODataManifestModel>ProductID}"></Input>
</form:fields>
<form:fields>
<Label id="DescriptionLabel1" text="Product Name"/>
<Input value="{ODataManifestModel>ProductName}"></Input>
</form:fields>
</form:FormElement>
</form:formElements>
</form:FormContainer>
</form:formContainers>
</form:Form>
</semantic:content>
</semantic:DetailPage>
</mvc:View>
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sap.otuniyi.sample",
"type": "application",
"i18n": "",
"title": "",
"description": "",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"ODataManifestModel": {
"uri": "https://cors-anywhere.herokuapp.com/https://services.odata.org/V2/Northwind/Northwind.svc/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"localUri": "",
"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"
}
},
"ODataManifestModel": {
"type": "sap.ui.model.odata.v2.ODataModel",
"dataSource": "ODataManifestModel"
}
},
"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"]
}
},
"routes": [{
"name": "master",
"pattern": "",
"target": ["master"]
}, {
"name": "detail",
"pattern": "details/:detailID:",
"target": ["master", "detail"]
}],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": "0"
},
"detail": {
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": "1"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}
sap.ui.define(["sap/ui/core/mvc/Controller"], function(Controller) {
"use strict";
return Controller.extend("sap.otuniyi.sample", {
onInit: function() {
this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
},
_onRouteMatched: function(oEvent) {
this._sId = oEvent.getParameter("arguments").detailID;
this.getView().bindElement({
path: "/" + this._sId,
model: "ODataManifestModel"
});
}
});
}, true);
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: "Products(1)"
}, true);
}
},
onSelectionChange: function(oEvent) {
var sNum = oEvent.getSource().getSelectedItem().getBindingContext("ODataManifestModel").sPath.substr(1);
this.getOwnerComponent().getRouter().navTo("detail", {
detailID: sNum
}, false);
}
});
}, true);