<!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 */
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"
}];
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 oList = oEvent.getSource();
var oFirstItem = oEvent.getSource().getItems()[0];
oList.setSelectedItem(oFirstItem);
var oContext = oFirstItem.getBindingContext();
var oDetail = sap.ui.getCore().byId("detail");
oDetail.setBindingContext(oContext);
}
});
sap.ui.controller("sap.ui.demo.wt.DetailView", {
/**
* 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() {
},
onPress: function(oEvent){
var oMode = oEvent;
var oList = sap.ui.getCore().byId("master--oList");
var oItem = oList.getSelectedItem();
var oContext = oItem.getBindingContext();
var oListItemData = oContext.getObject();
sap.m.MessageToast.show(oListItemData.Product+" has been Approved");
var oPath = oContext.getPath();
//Get the Index
var idx = parseInt(oPath.slice(-1));
var oModel = oList.getModel().getData();
if (idx !== -1) {
var m = oList.getModel();
var data = m.getData();
var removed = data.splice(idx, 1);
m.setData(data);
} else {
alert('Please select a row');
}
oList.getModel().setProperty("/", oModel);
oList.removeSelections();
var oDetail = sap.ui.getCore().byId("detail");
var oHeader = this.getView().byId("oHeader");
oDetail.setBindingContext(null);
oHeader.setBindingContext(null);
}
});
<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>
<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>
<footer>
<Bar>
<contentRight>
<Button text="Approve" type="Accept" press="onPress" />
</contentRight>
</Bar>
</footer>
</Page>
</mvc:View>