OData Batch call Operations

[Ganesh_POLA]

In this blog post belongs to multiple HTTP requests were sent in a single call like Multiple GET, POST, PATCH, DELETE operations using SAP UI5 Application.

Prerequisites: 

• OData Service


• Sap UI5 Application 

 

URL: /sap/opu/odata/sap/your service Name/ Entity Set name.

View Code:

<content>

<Table items="{path:'tableModel>/EmpdataSet'}" id="table" mode="MultiSelect" class="printClass1" updateFinished="onUpdateFinished">

<headerToolbar>

<Toolbar>

<Title text="Items ({path:'tableModel>/tabbleItems'} of {path:'tableModel>/tabbleItems'})"/>

<ToolbarSpacer ></ToolbarSpacer>

<Button text="ADD" icon="" type="Emphasized" press="openCreateFrag"></Button>

<Button text="" icon="sap-icon://edit" type="Emphasized" press="openUpdateFrag"></Button>

<Button text="" type="Emphasized" icon="sap-icon://delete" press="MultiDelete"></Button>

</Toolbar>

</headerToolbar>

<columns>

<Column demandPopin="true" minScreenWidth="Tablet" width="6rem" >

<Label text="{i18n>Employeeid}"></Label>

</Column>

<Column demandPopin="true" minScreenWidth="Tablet" width="6rem" >

<Label text="{i18n>Empfirstname}"></Label>

</Column>

<Column demandPopin="true" minScreenWidth="Tablet" width="6rem">

<Label text="{i18n>Empmidname}"></Label>

</Column>

<Column demandPopin="true" minScreenWidth="Tablet" width="6rem">

<Label text="{i18n>Emplastname}"></Label>

</Column>

<Column demandPopin="true" minScreenWidth="Tablet" width="6rem">

<Label text="{i18n>Department}"></Label>

</Column>

<Column demandPopin="true" minScreenWidth="Tablet" width="11rem">

<Label text="{i18n>Designation}"></Label>

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Text text="{tableModel>Employeeid}"></Text>

<Text text="{tableModel>Empfirstname}"></Text>

<Text text="{tableModel>Empmidname}"></Text>

<Text text="{tableModel>Emplastname}"></Text>

<Text text="{tableModel>Department}"></Text>

<Text text="{tableModel>Designation}"></Text>

</cells>

</ColumnListItem>

</items>

</Table>

</content>

onInit code:

onInit: function() {

var that = this;

var data = {

"Carriers": [{

"Employeeid": "",

"Empfirstname": "",

"Empmidname": "",

"Emplastname": "",

"Department": "",

"Designation": "",

"visible": false

}]

};

var oModel1 = new sap.ui.model.json.JSONModel();

oModel1.setData(data);

this.getView().setModel(oModel1, "jTabModel");

that.tableRead();

},

//this is the GET operation

tableRead: function() {

var that = this;

var oModel = new JSONModel({

tabbleItems: ""

});

that.getView().setModel(oModel, "tableModel");

// var oDataModel = that.getOwnerComponent().getModel();

var url = that.getOwnerComponent().getModel().sServiceUrl;

var oDataModel = new sap.ui.model.odata.ODataModel(url);

oDataModel.read("/EmpdataSet", {

success: function(data, res) {

if (res.statusCode === "200" || res.statusCode === 200) {

oModel.setData({

EmpdataSet: data.results

});

}

},

error: function(error) {

var errorMsg = JSON.parse(error.responseText).error.message;

}

});

},

Batch call in POST operation.

Initial screen:



When you click on the add button the employee details fragment will be open and click on plus button record will be added it self.

ADD Fragment Code:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">

<Dialog id="Dialog2" title="Employee Details" contentWidth="1000px">

<Table id="batchTable" headerText="Batch" items="{jTabModel>/Carriers}">

<headerToolbar>

<Toolbar>

<content>



<Button icon="sap-icon://save" press="onBatchSave"></Button>

<Button text="Cancel" press="onCancel2"></Button>

</content>

</Toolbar>

</headerToolbar>

<columns>

<Column>

<header>

<Label text="{i18n>Employeeid}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Empfirstname}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>MiddleName}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>LastName}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Department}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Designation}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>}"></Label>

</header>

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Input value="{jTabModel>Employeeid}"></Input>

<Input value="{jTabModel>Empfirstname}"></Input>

<Input value="{jTabModel>Empmidname}"></Input>

<Input value="{jTabModel>Emplastname}"></Input>

<Input value="{jTabModel>Department}"></Input>

<Input value="{jTabModel>Designation}"></Input>

<Button icon="sap-icon://add" press="onAddRow"></Button>

<Button icon="sap-icon://delete" press="onAddDelete" visible="{jTabModel>visible}"></Button>



</cells>

</ColumnListItem>

</items>

</Table>



</Dialog>

</core:FragmentDefinition>

ADD row Controller code:

onAddRow: function() {

var oTable = this.getView().byId("batchTable");

this.oTableModel = this.getView().getModel("jTabModel").getProperty("/Carriers");

var oNewRow = {

"Employeeid": "",

"Empfirstname": "",

"Empmidname": "",

"Emplastname": "",

"Department": "",

"Designation": ""

};

this.oTableModel.push(oNewRow);

this.getView().getModel("jTabModel").setProperty("/Carriers", this.oTableModel);

}

Fill all the fields like below screenshot.

and clicking on the save icon entries will be added to the table.

POST Operation Controller code:

onBatchSave: function() {

var that = this;

var addedProdCodeModel = that.getView().getModel("jTabModel").getData();

var batchChanges = [];

var url = that.getOwnerComponent().getModel().sServiceUrl;

var oDataModel = new sap.ui.model.odata.ODataModel(url);

oDataModel.setUseBatch(true);

var uPath = "/EmpdataSet";

for (var i = 0; i < addedProdCodeModel.Carriers.length; i++) {

var addRow = addedProdCodeModel.Carriers[i];

delete addRow.visible;

batchChanges.push(oDataModel.createBatchOperation(uPath, "POST", addRow));

}

oDataModel.addBatchChangeOperations(batchChanges);

oDataModel.submitBatch(function(oData, oResponse) {

// Success callback function

if (oResponse.statusCode === "202" || oResponse.statusCode === 202) {

sap.m.MessageBox.success("Recorde Created Successfully");

that.tableRead();

}

// Handle the response data

}, function(oError) {

// Error callback function

sap.m.MessageBox.success("failed");

// Handle the error

});

this.oDialog2.close();

}

The result will be displayed in your data base table as below.

 

Batchcall in PUT operation:

For PUT operation I have used multiple records updating using batch call operation in OData service. Please select multiple records in table

and click on the edit icon the following fragment will be open.



Update Fragment View Code:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form">

<Dialog id="Dilog2" title=" UpDate Employee Details" contentWidth="1000px">

<Table id="fgh" items="{updateModel>/}">

<columns>

<Column>

<header>

<Label text="{i18n>Employeeid}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Empfirstname}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Midname}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Lastname}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Department}"></Label>

</header>

</Column>

<Column>

<header>

<Label text="{i18n>Designation}"></Label>

</header>

</Column>

</columns>

<items>

<ColumnListItem>

<cells>

<Input value="{updateModel>Employeeid}"></Input>

<Input value="{updateModel>Empfirstname}"></Input>

<Input value="{updateModel>Empmidname}"></Input>

<Input value="{updateModel>Emplastname}"></Input>

<Input value="{updateModel>Department}"></Input>

<Input value="{updateModel>Designation}"></Input>

</cells>

</ColumnListItem>

</items>

</Table>

<buttons>

<Button type="Accept" text="Save" press="onSaveMulti"></Button>

<Button type="Reject" text="Cancel" press="onCancel1"></Button>

<!--<Button text="Delete" press="onDelete"></Button>-->

</buttons>

</Dialog>

</core:FragmentDefinition>

Update Fragment Controller Code:

openUpdateFrag: function() {

var that = this;

that.array = [];

var oTable = that.getView().byId("table");

var items = oTable.getSelectedItem();

if (items === null) {

sap.m.MessageBox.warning("Please Select Records");

} else {



if (!this.oDialog) {

this.oDialog = sap.ui.xmlfragment("Bachcall_V1Bachcall_V1.view.editbatch", this);

this.getView().addDependent(this.oDialog);

}

this.oDialog.open();

}

var selectedItem = that.getView().byId("table").getSelectedItems();

for (var i = 0; i <= selectedItem.length - 1; i++) {

var item = selectedItem[i];

that.array.push(item.getBindingContext("tableModel").getObject());

}

var updateModel = new JSONModel(that.array);

that.getView().setModel(updateModel, "updateModel");

},

onCancel1: function() {

this.oDialog.close();

},

Change the required fields as below screenshot

and finally save it. Records will be updated in database table.

PUT operation Controller Code:

onSaveMulti: function() {

var that = this;

var addedProdCodeModel = that.getView().getModel("updateModel").getData();

var url = that.getOwnerComponent().getModel().sServiceUrl;

var oDataModel = new sap.ui.model.odata.ODataModel(url);

var batchChanges = [];

for (var i = 0; i < addedProdCodeModel.length; i++) {

var addRow = addedProdCodeModel[i];

var SCACGroupVal = addRow.Employeeid;

var uPath = "/EmpdataSet('" + SCACGroupVal + "')";

// oDataModel.update("/EmpdataSet('" + addRow.Employeeid + "')", addRow);

batchChanges.push(oDataModel.createBatchOperation(uPath, "PUT", addRow));

}

oDataModel.addBatchChangeOperations(batchChanges);

oDataModel.submitBatch(function(oData, oResponse) {

// Success callback function

if (oResponse.statusCode === "202" || oResponse.statusCode === 202) {

sap.m.MessageBox.success("Recorde Updated Successfully");

that.tableRead();

}

// Handle the response data

}, function(oError) {

// Error callback function

sap.m.MessageBox.waning("failed");

// Handle the error

});

this.oDialog.close();

},

The changes will be updated in your data base table as below.

 

Batchcall in DELETE operation:

For DELETE operation I have used multiple records deleting using batch call operation in OData service. Please select multiple records in the table.

And then click on Delete icon records will be deleted from table.

DELETE operation Controller Code:

MultiDelete: function() {

var that = this;

var oTable = that.getView().byId("table");

var items = oTable.getSelectedItem();

if (items === null) {

sap.m.MessageBox.warning("Please Select Records");

} else {

var url = that.getOwnerComponent().getModel().sServiceUrl;

var oDataModel = new sap.ui.model.odata.ODataModel(url);

var batchChanges = [];

var jModel = that.getView().byId("table").getSelectedItems();

for (var i = 0; i < jModel.length; i++) {

var oEntry = jModel[i].getBindingContext("tableModel").getObject();

var SCACGroupVal = oEntry.Employeeid;

var uPath = "/EmpdataSet('" + SCACGroupVal + "')";

batchChanges.push(oDataModel.createBatchOperation(uPath, "DELETE", oEntry));

}

oDataModel.addBatchChangeOperations(batchChanges);

oDataModel.submitBatch(function(oData, oResponse) {

// Success callback function

if (oResponse.statusCode === "202" || oResponse.statusCode === 202) {

sap.m.MessageBox.success("Records Deleted Successfully");

that.tableRead();

}

// Handle the response data

}, function(oError) {

// Error callback function

sap.m.MessageBox.success("failed");

// Handle the error

});

}

}

The result will be displayed in your data base table as below.

 

Summary: Thanks for Viewing, Hope this blog post will give better understanding for beginners to Work on $Batch CRUD operations, Please Comment below and Please follow my account for more content.