An OData batch request is typically used whenever a consumer wants to perform multiple independent HTTP calls and wants to avoid multiple server roundtrips.We have implemented batch processing in SAP Gateway service in previous tutorial.We can post bulk data to SAP backend using batch operation.We will be batching multiple create entity operations into single $batch call in this tutorial.We will be using sap.ui.model.odata.v2.ODataModel for this tutorial.
First we will create a sap.m.Table control and two sap.m.Button controls.One button for adding new rows and one for saving data in backend through $batch call.
Pre-requisites
Steps
First we will create a sap.m.Table control and two sap.m.Button controls.One button for adding new rows and one for saving data in backend through $batch call.
Pre-requisites
- Batch processing implemented in SAP Gateway Service side.
- SAPUI5 Application created.
- OData service is added to the application and OData model is set.
Steps
- Open the view and paste below code.Here we are creating a sap.m.Table control with four columns carrier id,carrier name,currency and url.In the header toolbar we have two buttons.One for adding editable row to the table and one save button for saving the newly added rows to the sap backend.
- Open the view's controller.On onInit method put below code.This is for adding a blank row to the table at first time.
- On press event handler of 'add row button' put below logic.Here we are adding single editable rows to the table on pressing the add row button.
- On press event handler of 'save button' put below logic.Here we are looping through the table entries and performing create operations.When submitChanges method is called the individual calls are submitted as a $batch call to the sap backend.
- See application screenshot.Here I am saving two entries to sap backend through batch call.
- Our backend SCARR table after batch operation completed successfully.
<mvc:View controllerName="odataaaa.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:f="sap.ui.layout.form"
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:core="sap.ui.core">
<App>
<pages>
<Page title="{i18n>title}">
<content>
<Table id="batchTable" headerText="Batch" items="{jTabModel>/Carriers}">
<headerToolbar>
<Toolbar>
<content>
<Button icon="sap-icon://add" press="onAddRow"></Button>
<Button icon="sap-icon://save" press="onBatchSave"></Button>
</content>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<header>
<Label text="Carrier ID"></Label>
</header>
</Column>
<Column>
<header>
<Label text="Carrier Name"></Label>
</header>
</Column>
<Column>
<header>
<Label text="Currency"></Label>
</header>
</Column>
<Column>
<header>
<Label text="Url"></Label>
</header>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Input value="{jTabModel>Carrid}"></Input>
<Input value="{jTabModel>Carrname}"></Input>
<Input value="{jTabModel>Currcode}"></Input>
<Input value="{jTabModel>Url}"></Input>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
onInit: function() {
var data = {
"Carriers": [{
"Carrid": "",
"Carrname": "",
"Currcode": "",
"Url": ""
}]
};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
this.getView().setModel(oModel, "jTabModel");
}
onAddRow: function() {
var oTable = this.getView().byId("batchTable");
var oTableModel = oTable.getModel("jTabModel").getProperty("/Carriers");
var oNewRow = {
"Carrid": "",
"Carrname": "",
"Currcode": "",
"Url": ""
};
oTableModel.push(oNewRow);
oTable.getModel("jTabModel").setProperty("/Carriers", oTableModel);
}
onBatchSave: function() {
var oTable = this.getView().byId("batchTable");
var oModel = this.getView().getModel();
oModel.setUseBatch(true);
var jModel = oTable.getModel("jTabModel").getProperty("/Carriers");
for (var i = 0; i < jModel.length; i++) {
var oEntry = jModel[i];
oModel.create("/FlightSet", oEntry, {
method: "POST",
success: function(data) {
},
error: function(e) {
}
});
}
oModel.submitChanges({
success: function(data, response) {
//To do
},
error: function(e) {
//To do
}
});
}
