<!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://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"demo": "./"
}'>
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("table");
var view = sap.ui.view({id:"idRow1", viewName:"demo.Row", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */
sap.ui.jsview("demo.Row", {
/** 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 table.Row
*/
getControllerName : function() {
return "demo.Row";
},
/** 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 demo.Row
*/
createContent : function(oController) {
var aData = [
{ID: 1, Name: "Al", Age: 32, Salary: 100000},
{ID: 2, Name: "Andy", Age: 28, Salary: 75000},
{ID: 3, Name: "Anita", Age:25, Salary: 45000},
{ID: 4, Name: "Doris", Age: 24, Salary: 35000},
{ID: 5, Name: "Doris", Age: 22, Salary: 15000}
];
var oTable2 = new sap.ui.table.Table("tableId",{
visibleRowCount: 8,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.Single,
navigationMode: sap.ui.table.NavigationMode.Paginator
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Action"}),
template: new sap.ui.layout.HorizontalLayout({
content : [
new sap.ui.commons.Button({
text: "ADD",
press: function(oEvent) {oController.Add(oEvent); }
}),
new sap.ui.commons.Button({
text: "EDIT",
press: function(oEvent) {oController.Edit(oEvent); }
}),
new sap.ui.commons.Button({
text: "DELETE",
press: function(oEvent) {oController.Delete(oEvent); }
})]
}),
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ID"}),
template: new sap.ui.commons.TextField("colId",{editable:false}).bindProperty("value", "ID"),
sortProperty: "ID",
filterProperty: "ID",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Name"}),
template: new sap.ui.commons.TextField("colName",{editable:false}).bindProperty("value", "Name"),
sortProperty: "Name",
filterProperty: "Name",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Age"}),
template: new sap.ui.commons.TextField("colAge",{editable:false}).bindProperty("value", "Age"),
sortProperty: "Age",
filterProperty: "Age",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Salary"}),
template: new sap.ui.commons.TextField("colSalary",{editable:false}).bindProperty("value", "Salary"),
sortProperty: "Salary",
filterProperty: "Salary",
width: "400px"
}));
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable2.setModel(oModel2);
oTable2.bindRows("/modelData");
var oLabel = new sap.ui.commons.Label({text:"Filter by Name:"});
var oComboBox = new sap.ui.commons.ComboBox({change:function(oEvent){
oController.onChange(oEvent);
}});
var oListItem = new sap.ui.core.ListItem({text:"{Name}", key:"{Name}"});
oComboBox.setModel(oModel2);
oComboBox.bindAggregation("items", {path:"/modelData", template: oListItem});
var oHLayout = new sap.ui.layout.HorizontalLayout({content:[oLabel,oComboBox]});
var oLayout = new sap.ui.layout.VerticalLayout({content:[oHLayout,oTable2]});
return oLayout;
}
});
sap.ui.controller("demo.Row", {
/**
* 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.Row
*/
// onInit: function() {
//
// },
/**
* 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 table.Row
*/
// 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 table.Row
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf table.Row
*/
// onExit: function() {
//
// }
Add:function(oEvent){
var oDialog1 = new sap.ui.commons.Dialog("Dialog", {
modal: true,
closed: function(oControlEvent){
sap.ui.getCore().getElementById('Dialog').destroy();
}
});
oDialog1.setTitle("ADD NEW ROW");
var oLayout = new sap.ui.commons.layout.MatrixLayout({
columns: 2,
width: "100%"
});
var oLabel= new sap.ui.commons.Label({text: "ID"});
var oTF=new sap.ui.commons.TextField("empid",{width: '200px'});
oLayout.createRow(oLabel, oTF);
var oLabel=new sap.ui.commons.Label({text: "NAME"});
var oTF= new sap.ui.commons.TextField("empname",{width: '200px'});
oLayout.createRow(oLabel, oTF);
var oLabel=new sap.ui.commons.Label({text: "AGE"});
var oTF=new sap.ui.commons.TextField("empage",{width: '200px'});
oLayout.createRow(oLabel, oTF);
var oLabel=new sap.ui.commons.Label({text: "SALARY"});
var oTF=new sap.ui.commons.TextField("empsal",{width: '200px'});
oLayout.createRow(oLabel, oTF);
oDialog1.addContent(oLayout);
oDialog1.addButton(new sap.ui.commons.Button({text: "SAVE", press:function(){
var aData = [
{ID: 1, Name: "Al", Age: 32, Salary: 100000},
{ID: 2, Name: "Andy", Age: 28, Salary: 75000},
{ID: 3, Name: "Anita", Age:25, Salary: 45000},
{ID: 4, Name: "Doris", Age: 24, Salary: 35000},
{ID: 5, Name: "Doris", Age: 22, Salary: 15000}
];
var id = sap.ui.getCore().getControl("empid").getValue();
var name = sap.ui.getCore().getControl("empname").getValue();
var age = sap.ui.getCore().getControl("empage").getValue();
var sal = sap.ui.getCore().getControl("empsal").getValue();
console.log(id);
console.log(name);
console.log(age);
console.log(sal);
alert("SUCESSFULLY SAVE");
aData.unshift({"ID":id,"Name":name,"Age":age,"Salary":sal});
var oModel = new sap.ui.model.json.JSONModel();
var oTable=sap.ui.getCore().byId("tableId");
oModel.setData({modelData: aData});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
oDialog1.close();}}));
oDialog1.open();
},
Edit:function(oEvent){
var iRowIndex = oEvent.getSource().getParent().getParent().getIndex();
var cxt = sap.ui.getCore().byId('tableId').getContextByIndex(iRowIndex);
var path = cxt.sPath;
var oObject = sap.ui.getCore().byId('tableId').getModel().getProperty(path);
var oDialog1 = new sap.ui.commons.Dialog("Dialog", {
modal: true,
closed: function(oControlEvent){
sap.ui.getCore().getElementById('Dialog').destroy();
}
});
oDialog1.setTitle("EDIT");
var oLayout = new sap.ui.commons.layout.MatrixLayout({
columns: 2,
width: "100%"
});
var oLabel= new sap.ui.commons.Label({text: "ID:"});
var oTF=new sap.ui.commons.TextField("id",{width: '200px',value:oObject.ID,editable: false});
oLayout.createRow(oLabel, oTF);
var oLabel1=new sap.ui.commons.Label({text: "NAME:"});
var oTF1= new sap.ui.commons.TextField("name",{width: '200px',value:oObject.Name});
oLayout.createRow(oLabel1, oTF1);
var oLabel2=new sap.ui.commons.Label({text: "AGE:"});
var oTF2=new sap.ui.commons.TextField("age",{width: '200px',value:oObject.Age});
oLayout.createRow(oLabel2, oTF2);
var oLabel3=new sap.ui.commons.Label({text: "SALARY:"});
var oTF3=new sap.ui.commons.TextField("salary",{width: '200px',value:oObject.Salary});
oLayout.createRow(oLabel3, oTF3);
oDialog1.addContent(oLayout);
oDialog1.addButton(new sap.ui.commons.Button({text: "Update", press:function(){
var aData = [
{ID: 1, Name: "Al", Age: 32, Salary: 100000},
{ID: 2, Name: "Andy", Age: 28, Salary: 75000},
{ID: 3, Name: "Anita", Age:25, Salary: 45000},
{ID: 4, Name: "Doris", Age: 24, Salary: 35000},
{ID: 5, Name: "Doris", Age: 22, Salary: 15000}
];
var id = sap.ui.getCore().getControl("id").getValue();
var name = sap.ui.getCore().getControl("name").getValue();
var age = sap.ui.getCore().getControl("age").getValue();
var sal = sap.ui.getCore().getControl("salary").getValue();
console.log(id);
console.log(name);
console.log(age);
console.log(sal);
aData.unshift({"ID":id,"Name":name,"Age":age,"Salary":sal});
var oModel = new sap.ui.model.json.JSONModel();
var oTable=sap.ui.getCore().byId("tableId");
oModel.setData({modelData: aData});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
oDialog1.close();
}}));
oDialog1.open();
},
Delete:function(oEvent)
{
var tbl=sap.ui.getCore().byId("tableId");
var idx = tbl.getSelectedIndex();
if (idx !== -1) {
var m = tbl.getModel();
var data = m.getData();
var removed = data.modelData.splice(idx, 1);
m.setData(data);
alert(JSON.stringify(removed[0]) + 'is removed');
} else {
alert('Please select a row');
}
},
onChange: function(oEvent){
var oValue = oEvent.getParameter("selectedItem").getText();
var aFilters = [];
if (oValue && oValue.length > 0) {
var filter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.EQ, oValue);
aFilters.push(filter);
}
// update list binding
var list = sap.ui.getCore().byId("tableId");
var binding = list.getBinding("rows");
binding.filter(aFilters, "Application");
}
});