<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>UI5 Demo</title>
<script id="sap-ui-bootstrap"
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.view({
viewName: "sap.ui.demo.wt.App",
type: "JS",
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
], function(Controller, JSONModel) {
"use strict";
return Controller.extend("sap.ui.demo.wt.App", {
onInit: function() {
this.getView().setModel(new JSONModel({
results: [{
Userid: '100',
Name: 'Bob'
}, {
Userid: '200',
Name: 'Joe'
}]
}), "userList");
},
onOkPress: function() {
//this.byId("dialog").close(); // Doesn't work?
sap.ui.getCore().byId("dialog").close();
},
onItemPress: function(event) {
var dialog = sap.ui.getCore().byId("dialog");
var item = event.getSource();
console.log(item);
console.log(item.getBindingContext("userList")); // Undefined??
dialog.setBindingContext(item.getBindingContext("userList"), "userList");
dialog.open();
}
});
});
sap.ui.jsview("sap.ui.demo.wt.App", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf views.project.activityList
*/
getControllerName : function() {
return "sap.ui.demo.wt.App";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf views.user.userList
*/
createContent : function(oController) {
var oTable = new sap.m.Table({
id: "UserTable",
itemPress: [oController.onItemPress, oController],
columns: [
new sap.m.Column({
header: new sap.m.Label({
text: "User ID"
})
}),
new sap.m.Column({
header: new sap.m.Label({
text: "Name"
})
})
]
});
var template = new sap.m.ColumnListItem({
type: "Active",
visible: true,
cells: [
new sap.m.Text({
text: "{userList>Userid}"
}),
new sap.m.Text({
text: "{userList>Name}"
})
]
});
oTable.bindItems("userList>/results", template);
var oDialog = new sap.m.Dialog("dialog", {
title: "Add/Modify Users",
contentWidth: "1em",
content: [
new sap.m.Label({text: "Enter User ID"}),
new sap.m.Input({maxLength: 12, id: "Userid", value: "{userList>Userid}"}),
new sap.m.Label({text: "Name"}),
new sap.m.Input({maxLength: 12, id: "Name", value: "{userList>Name}"}),
new sap.m.Button("okButton",{
text: "OK",
tap: [oController.onOkPress, oController]
}),
]
})
return new sap.m.Page({
title: "User List",
content: [
oTable,
oDialog
]
})
}
});