<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{"view": "./"}'
data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<!-- by Denise Nepraunig @denisenepraunig -->
<!-- example for a SAPUI5 MVC XML view with JSON data from a file
and data binding based on the demokit example from sapui5:
https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.m.Table/samples
-->
<script>
// Best practice would be to set this stuff up in an Component.js
// but let's not over-complicate stuff for demonstration purposes
// http://scn.sap.com/community/developer-center/front-end/blog/2014/12/10/sap-ui5-with-local-json-model
//sap.ui.localResources("view");
var app = new sap.m.App({initialPage:"idApp1"});
var view = sap.ui.view({id:"idApp1",
type:sap.ui.core.mvc.ViewType.JS,
viewName:"view.main"});
app.addPage(view);
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("view.main", {
/** 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 list.page
*/
getControllerName : function() {
return "view.main";
},
/** 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 list.page
*/
createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Company Details",
});
var oItemTemplate = new sap.ui.core.Item({
key: "{key}",
text: "{text}"
});
var combobox = new sap.m.ComboBox("cmb1",{
items: [ {
"key" : "*",
"text" : "All Data"
},
{
"key" : "SAP",
"text" : "SAP"
},
{
"key" : "ITelO",
"text" : "ITelO"
}
],
template: oItemTemplate,
selectionChange: [oController,oController.Selection]
});
var combobox1 = new sap.m.ComboBox("cmb2",{
items: [ {
"key" : "name",
"text" : "Jian"
},
{
"key" : "SAP",
"text" : "SAP"
},
{
"key" : "ITelO",
"text" : "ITelO"
}
],
template: oItemTemplate,
selectionChange: [oController,oController.Selection]
});
var oLabel= new sap.m.Label("lbl",{
text: "Select a Value"
});
var oTable = new sap.m.Table({
id : "Countries",
mode: sap.m.ListMode.None,
columns: [
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "ID"
})
}),new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Company Id"
})
}),new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "First Name"
})
}),new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Last Name"
})
}),
new sap.m.Column({
width: "1em",
header: new sap.m.Label({
text: "Delete"
})
})
],
items:[
]
});
var template = new sap.m.ColumnListItem({
id : "first_template",
type: "Navigation",
visible: true,
selected: true,
cells: [
new sap.m.Label({
text: "{Id}"
}),
new sap.m.Label({
text: "{CompanyId}"
}),
new sap.m.Label({
text: "{FirstName}"
}),
new sap.m.Label({
text: "{LastName}"
}),
new sap.m.Button({text:"Delete",press:[oController,oController.delet]})
]
});
// var obutton = new sap.m.Button({text:"SORT",press:[oController,oController.sort]});
var oFilters = null;
oTable.bindItems("/Employees", template, null, oFilters);
oPage.addContent(oLabel);
oPage.addContent(combobox);
oPage.addContent(combobox1);
// oPage.addContent(obutton);
oPage.addContent(oTable);
return oPage;
}
});
sap.ui.controller("view.main", {
/**
* 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 bars.page
*/
// onInit: function() {
//
// },
onInit: function() {
var oModel = new sap.ui.model.odata.ODataModel("https://cors-anywhere.herokuapp.com/http://companylistdemo.hana.ondemand.com/refapp-companylist-web/companylist.svc/", false);
var id = sap.ui.getCore().byId("Countries");
id.setModel(oModel);
sap.ui.getCore().byId("Countries").bindItems("/Employees",sap.ui.getCore().byId("first_template"), null, null);
},
Selection : function(evt) {
var oFilters=null;
// var sorter = new sap.ui.model.Sorter("Id",true,false,false);
var oSelectedKey = evt.oSource.getValue();//sap.ui.getCore().byId("cmb1").getSelectedItem().getKey();
if(!(oSelectedKey=="*"))
var oFilters = [ new sap.ui.model.Filter("CompanyId","EQ", oSelectedKey),
// new sap.ui.model.Filter("FirstName","EQ", oSelectedKey)
];
sap.ui.getCore().byId("Countries").bindItems("/Employees",sap.ui.getCore().byId("first_template"), null, oFilters);
},
Selection : function(evt) {
var oFilters=null;
var sorter = new sap.ui.model.Sorter("Id",true,false,false);
var oSelectedKey = sap.ui.getCore().byId("cmb1").getSelectedItem().getKey();
if(!(oSelectedKey=="*"))
var oFilters = [ new sap.ui.model.Filter("CompanyId","EQ", oSelectedKey)];
sap.ui.getCore().byId("Countries").bindItems("/Employees",sap.ui.getCore().byId("first_template"), sorter, oFilters);
},
delet:function(oEvent){
var dlg = new sap.m.Dialog({text:"title"});
dlg.open();
var oItem = oEvent.getSource().getParent();
var oTable = oItem.getParent();
var oIndex = oTable.indexOfItem(oItem);
if (oIndex !== -1) {
var m = oTable.getModel();
var data = m.getProperty("/Employees");
var removed = data.splice(oIndex, 1);
m.setProperty("/Employees", data);
alert(JSON.stringify(removed[0]) + 'is removed');
} else {
alert('Please select a row');
}
},
sort:function(evt){
var id = sap.ui.getCore().byId("Countries");
// var sort = new
alert();
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf bars.page
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf bars.page
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf bars.page
*/
// onExit: function() {
//
// }
});