<!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() {
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);
In response to question:
"Not able to display data in detail page using splitcontainer in sapui5?"
https://stackoverflow.com/questions/53058269/not-able-to-display-data-in-detail-page-using-splitcontainer-in-sapui5
<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="{i18n>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="Description"/>
<Input value="{testModel>Description}"></Input>
</form:fields>
</form:FormElement>
</form:formElements>
</form:FormContainer>
</form:formContainers>
</form:Form>
</semantic:content>
</semantic:DetailPage>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/Device"], function(Controller, Device) {
"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: "/testCollection/" + this._sId,
model: "testModel"
});
}
});
}, 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: 0
}, true);
}
},
onSelectionChange: function(oEvent) {
var sNum = oEvent.getSource().getSelectedItem().getBindingContext("testModel").getProperty("id");
this.getOwnerComponent().getRouter().navTo("detail", {
detailID: sNum
}, false);
}
});
}, true);
<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>
<ScrollContainer height="35rem" width="100%" horizontal="false" vertical="true" focusable="false">
<List id="list" items="{testModel>/testCollection}" mode="SingleSelectMaster" noDataText="No List Found" growing="true" growingScrollToLoad="true"
selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
<items>
<StandardListItem title="{testModel>Description}" type="Active" press="onSelectionChange" description="{testModel>Number}"/>
</items>
</List>
</ScrollContainer>
</semantic:content>
</semantic:MasterPage>
</mvc:View>
{
"_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": {
"testModel": {
"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"
}
},
"testModel": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
},
"dataSource": "testModel"
}
},
"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": "testCollection/:detailID:",
"target": ["master", "detail"]
}],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "masterPages",
"viewLevel": "0"
},
"detail": {
"viewName": "Detail",
"controlAggregation": "detailPages",
"viewLevel": "1"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}
{
"testCollection": [{
"id": 0,
"Description": "Test Description1",
"Status": "Completed",
"Number": 10021
}, {
"id": 1,
"Description": "Test Description2",
"Status": "Completed",
"Number": 10025
}]
}
<View xmlns="sap.m">
<SplitApp id="rootControl"></SplitApp>
</View>