Hi,
See the below example.
Please let me know for any issues.
Hi,
Use below code in index.html.
<!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="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">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("products");
var view = sap.ui.view({id:"idProduct1", viewName:"products.Product", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Then write this code in your view.
createContent : function(oController) {
var oLayout = new sap.ui.layout.form.SimpleForm("formId",{
title: "Product Maintainance",
content: [
new sap.ui.commons.Label({text: "ID"}),
new sap.ui.commons.TextField("id",{width: '200px', editable: false}),
new sap.ui.commons.Label({text: "Name"}),
new sap.ui.commons.TextField("name",{width: '200px'}),
new sap.ui.commons.Label({text: "Description"}),
new sap.ui.commons.TextField("description",{width: '200px'}),
new sap.ui.commons.Label({text: "Price"}),
new sap.ui.commons.TextField("price",{width: '200px'}),
new sap.ui.commons.Label({text: "Rating"}),
new sap.ui.commons.TextField("rating",{width: '200px'}),
new sap.ui.commons.Label({text: "ReleaseDate"}),
new sap.ui.commons.TextField("date",{width: '200px', value: "2014-12-28T22:22:22"}),
new sap.ui.commons.Label({text: ""}),
new sap.ui.commons.Button({
text: "Save",
width: '100px',
press: function() {
oController.save()
}
})
]
});
var oMatrix = sap.ui.commons.layout.MatrixLayout({
layoutFixed: true,
width: '300px',
columns: 3
});
oMatrix.createRow(
new sap.ui.commons.Button({
text: "Create",
width: '100px',
press: function() {
oController.create();
}
}),
new sap.ui.commons.Button({
text: "Edit",
width: '100px',
press: function() {
oController.edit();
}
}),
new sap.ui.commons.Button({
text: "Delete",
width: '100px',
press: function() {
oController.remove();
}
})
);
//table
var oTable = new sap.ui.table.Table("tableId",{
visibleRowCount: 5,
editable: false
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "ID"}),
visible: true,
template: new sap.ui.commons.TextView({text: "{products>ID}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Name"}),
visible: true,
template: new sap.ui.commons.TextView({text: "{products>Name}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Description"}),
visible: true,
template: new sap.ui.commons.TextView({text: "{products>Description}"})
}));
var oSorter = new sap.ui.model.Sorter("products>Name", true); // sort descending
oSorter.fnCompare = function(value1, value2) {
console.log(value1 + ' - ' + value2);
var val1Mapped = get(value1);
var val2Mapped = get(value2);
console.log(val1Mapped + ' - ' + val2Mapped);
if (val1Mapped < val2Mapped) return -1;
if (val1Mapped == val2Mapped) return 0;
if (val1Mapped > val2Mapped) return 1;
};
oTable.bindRows("products>/Products").sort(oSorter);
var bindEle = [oTable,oLayout, oMatrix];
return bindEle;
}
Then write this code in your controller.
- sap.ui.controller("products.Product", {
/**
* 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 products.Product
*/
onInit: function() {
var oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc");
oModel.oHeaders = {
"DataServiceVersion": "3.0",
"MaxDataServiceVersion": "3.0"
};
sap.ui.getCore().setModel(oModel,"products");
},
/**
* 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 products.Product
*/
// 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 products.Product
*/
onAfterRendering: function() {
$("#formId").hide();
},
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf products.Product
*/
// onExit: function() {
//
// },
mode: 0,
resetForm: function() {
$("#name").val('');
$('#description').val('');
$('#price').val('');
$('#rating').val('');
$('#id').val('');
},
create: function() {
this.mode = 'create';
this.resetForm();
$("#formId").slideDown(300, function() {
var id = sap.ui.getCore().byId('tableId')._getRowCount();
$("#id").val(id);
});
},
edit: function() {
this.mode = 'edit';
var oTable = sap.ui.getCore().byId('tableId');
var selected = oTable.getSelectedIndex();
if(selected ==-1) {
alert("select a row");
}else{
$("#formId").slideDown(function() {
var data = oTable.getModel('products').oData['Products('+ selected +')'];
var id = data.ID;
var description = data.Description;
var price = data.Price;
var rating = data.Rating;
var name = data.Name;
$("#name").val(name);
$("#description").val(description);
$("#price").val(price);
$("#rating").val(rating);
$("#id").val(id);
});
}
},
removeId: 0,
remove: function() {
this.mode = 'delete';
var oTable = sap.ui.getCore().byId('tableId');
var selected = oTable.getSelectedIndex();
if(selected ==-1) {
alert("select a row");
}else{
var data = oTable.getModel('products').oData['Products('+ selected +')'];
this.removeId = data.ID;
this.save();
}
},
save: function() {
var requestObj = {
requestUri: '',
method: '',
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/json;odata=minimalmetadata",
"DataServiceVersion": "3.0",
"MaxDataServiceVersion": "3.0",
"Accept": "application/json;odata=minimalmetadata"
}
};
var newData = {
"odata.type": "ODataDemo.Product",
"ID": $("#id").val(),
"Name": $("#name").val(),
"Description": $("#description").val(),
"ReleaseDate": $("#date").val(),
"Rating": $("#rating").val(),
"Price": $("#price").val()
};
if(this.mode == 'create'){
var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products";
var method = "POST";
requestObj.requestUri = url;
requestObj.method = method;
requestObj.data = newData;
}else if(this.mode == 'edit') {
var id = $("#id").val();
var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products("+id+")";
var method = "PUT";
requestObj.requestUri = url;
requestObj.method = method;
requestObj.data = newData;
}else if(this.mode == 'delete') {
var id = this.removeId;
var url = "proxy/http/services.odata.org/V3/(S(3ngooq0fkelm0nublhbj01xu))/OData/OData.svc/Products("+id+")";
var method = "DELETE";
requestObj.requestUri = url;
requestObj.method = method;
}
OData.request(requestObj, function() {
sap.ui.getCore().getModel('products').refresh();
$("#formId").slideUp();
});
}
});
Regards
Dhananjay
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.