<!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>
<style>
.LabelStyle{
font-size: 0.975rem;
margin-top: 15px;
}
</style>
<script>
var app = new sap.m.SplitApp("splitApp");
var master = sap.ui.view({id:"master", viewName:"sap.ui.demo.wt.MasterView", type:sap.ui.core.mvc.ViewType.JS});
app.addMasterPage(master);
var detail = sap.ui.view({id:"detail", viewName:"sap.ui.demo.wt.DetailView", type:sap.ui.core.mvc.ViewType.JS});
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 */
sap.ui.jsview("sap.ui.demo.wt.MasterView", {
getControllerName : function() {
return "sap.ui.demo.wt.MasterView";
},
createContent : function(oController) {
var oList = new sap.m.List("oList",{mode : "SingleSelectMaster",
showSeparators : "All",
swipeDirection : "Both",
rememberSelections : false,
selectionChange : $.proxy(this.getController().onSelectionChange, this.getController()),
updateFinished: $.proxy(this.getController().onUpdateFinished, this.getController())
});
var oTemplate = new sap.m.StandardListItem({
title : "{Product}",
description : "{Weight}",
icon : "sap-icon://product",
type : "Navigation"
});
var oSorter = new sap.ui.model.Sorter("Product", false, false);
oList.bindItems("/",oTemplate,oSorter);
var oPage = new sap.m.Page({title:"Products", content:[oList]});
return oPage;
}
});
sap.ui.controller("sap.ui.demo.wt.MasterView", {
onInit: function() {
var dataObject = [
{Product: "Power Projector 4713", Weight: "1467"},
{Product: "Gladiator MX", Weight: "321"},
{Product: "Hurricane GX", Weight: "588"},
{Product: "Webcam", Weight: "700"},
{Product: "Monitor Locking Cable", Weight: "40"},
{Product: "Laptop Case", Weight: "1289"}];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(dataObject);
sap.ui.getCore().setModel(oModel);
},
onSelectionChange: function(oEvent) {
var oContext = oEvent.getParameter("listItem").getBindingContext().getObject();
sap.ui.getCore().getModel().setProperty("/ProductSelected", oContext.Product);
sap.ui.getCore().getModel().setProperty("/WeightSelected", oContext.Weight);
},
onUpdateFinished: function(oEvent) {
var oList = oEvent.getSource();
var oFirstItem = oEvent.getSource().getItems()[0];
oList.setSelectedItem(oFirstItem);
var oContext = oFirstItem.getBindingContext().getObject();
sap.ui.getCore().getModel().setProperty("/ProductSelected", oContext.Product);
sap.ui.getCore().getModel().setProperty("/WeightSelected", oContext.Weight);
}
});
sap.ui.jsview("sap.ui.demo.wt.DetailView", {
getControllerName : function() {
return "sap.ui.demo.wt.DetailView";
},
createContent : function(oController) {
var oHBox = new sap.m.HBox({justifyContent:"SpaceAround",
items:[new sap.m.Label({text:"Product Selected"}).addStyleClass("LabelStyle"),
new sap.m.Input({value:"{/ProductSelected}", enabled:false}),
new sap.m.Label({text:"Weight Selected"}).addStyleClass("LabelStyle"),
new sap.m.Input({value:"{/WeightSelected}", enabled:false})]})
var oPage = new sap.m.Page({title:"Product Detail", content:[oHBox]});
return oPage;
}
});
sap.ui.controller("sap.ui.demo.wt.DetailView", {
onInit: function() {
},
onAfterRendering: function() {
},
});