<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
var app = new sap.m.SplitApp("splitApp");
var master = sap.ui.xmlview({id:"master", viewName:"sap.ui.demo.wt.MasterView"});
app.addMasterPage(master);
var detail = sap.ui.xmlview({id:"detail", viewName:"sap.ui.demo.wt.DetailView"});
app.addDetailPage(detail);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */
<mvc:View
controllerName="sap.ui.demo.wt.MasterView"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page title="Master Page">
<content>
<List id="oList" mode="SingleSelectMaster" selectionChange="onSelect"
updateFinished="onUpdateFinished"
items="{
path: '/'
}" >
<ObjectListItem
title="{Product}"
number="{Weight}"
type = "Navigation" />
</List>
</content>
</Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.wt.MasterView", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
var dataObject = [{
Product: "Power Projector 4713",
Weight: "1467",
Material: "Computer",
Availability: "Available"
}, {
Product: "Gladiator MX",
Weight: "321",
Material: "Product",
Availability: "Out of Stock"
}, {
Product: "Hurricane GX",
Weight: "588",
Material: "Product",
Availability: "Available"
}, {
Product: "Webcam",
Weight: "700",
Material: "Computer",
Availability: "Out of Stock"
}, {
Product: "Monitor Locking Cable",
Weight: "40",
Material: "Product",
Availability: "Out of Stock"
}, {
Product: "USB Stick 16 GByte",
Weight: "75",
Material: "Product",
Availability: "Available"
}, {
Product: "Deskjet Super Highspeed",
Weight: "85",
Material: "Printer",
Availability: "Out of Stock"
}, {
Product: "Laser Allround Pro",
Weight: "2134",
Material: "Printer",
Availability: "Available"
}, {
Product: "Flat S",
Weight: "760",
Material: "Monitor",
Availability: "Available"
}, {
Product: "Flat Medium",
Weight: "85",
Material: "Monitor",
Availability: "Out of Stock"
}];
var model = new sap.ui.model.json.JSONModel();
model.setData(dataObject);
sap.ui.getCore().setModel(model);
},
onSelect: function(oEvent){
var oContext = oEvent.getParameter("listItem").getBindingContext();
var oDetail = sap.ui.getCore().byId("detail");
oDetail.setBindingContext(oContext);
},
onUpdateFinished: function(oEvent) {
var that = this;
var oList = this.getView().byId("oList");
var oItems = oList.getItems();
var oItem = oItems[0];
oList.setSelectedItem(oItem);
var oContext = oItem.getBindingContext();
var oDetail = sap.ui.getCore().byId("detail");
oDetail.setBindingContext(oContext);
var oLength = oItems.length;
var i=0;
setInterval(function(){
i++;
if(i >= oLength){
clearInterval();
}else{
var oItem = oItems[i];
oList.setSelectedItem(oItem);
var oPage = oList.getParent();
oPage.scrollToElement(oItem);
var oContext = oItem.getBindingContext();
var oDetail = sap.ui.getCore().byId("detail");
oDetail.setBindingContext(oContext);
}
}, 2000);
}
});
<mvc:View
controllerName="sap.ui.demo.wt.DetailView"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<Page
title="Detail Page"
class="marginBoxContent" >
<content>
<ObjectHeader id="oHeader" title="{Product}" number="{Weight}" />
</content>
</Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.wt.DetailView", {
onInit: function() {
}
});