This blog will take you through the steps of using odata batch processing. There are multiple scenarios where we might need batch processing, such as making a single call to insert/update/delete large amount of data. First, we will see how to bind data to table with odata.read(), further we will see how to add new data, update existing data and finally send a batch call to xsodata.
Prerequisite:
- Basics of how to create and expose xsodata
- Basic knowledge in UI5
- Having a xsodata ready in hand to follow the tutorial. This tutorial has a xsodata with one table containing 3 columns.
Note: In this tutorial we’ll manually enter the key fields in the UI
UI Creation
We’ll create a UI5 table which consist of 3 column, the rows are specified as input field which we can edit and add new rows on the go. Use the below code to create the view named “ODataBatch” with a sap.m.Table.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="treetabletest.OdataBatch" xmlns:html="http://www.w3.org/1999/xhtml"> <Page title="Title"> <content> <Table id="customerTable" class="sapUiMediumMarginTop" inset="false" items="{/customer}" visibleRowCount="5" navigationMode="Scrollbar"> <headerToolbar> <Toolbar design="Solid"> <Title text="Customer" level="H2"/> <ToolbarSpacer></ToolbarSpacer> <Button icon="sap-icon://add" type="Transparent" id="addReportButton" press="addCustomer"/> </Toolbar> </headerToolbar> <columns> <Column> <Text text="ID" hAlign="Right"/> </Column> <Column> <Text text="Name" hAlign="Center"/> </Column> <Column> <Text text="Mobile"/> </Column> </columns> <items> <ColumnListItem> <cells> <Input value="{ID}"/> <Input value="{NAME}"/> <Input value="{MOBILE}"/> </cells> </ColumnListItem> </items> </Table> </content><footer> <Toolbar> <ToolbarSpacer/> <Button text="Save" type="Accept" press="submitBatch"></Button> </Toolbar> </footer> </Page></core:View>
Here items is binded with customer for which we will set the model in controller. Also notice the ColumnListItem has three input fields which is binded to ID, NAME and MOBILE. There is a toolbar in the table with an add icon button which will add an empty row in the table. A footer with Single button is added to submit the batch operation. This will give you a complete UI to learn all the needed operations. Next we move on to the controller part of the above UI. There we will learn about ODataModel and JSONModel.
Controller for UI
Just defining the controller will instantiate it and the view is rendered. Once you run the application, it will render the UI which we created above (Refer screenshot below).
sap.ui.controller("treetabletest.OdataBatch", {
/**
* 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 treetabletest.OdataBatch
*/
});
1. UI after controller instantiation
Now as next step we will create a OData model and bind the data to the customer table using OData.read() method. All these steps will be done in init() method of the controller.
sap.ui.controller("treetabletest.OdataBatch", {
/**
* 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 treetabletest.OdataBatch
*/
custTableLength : 0,
onInit: function() { oModel = new sap.ui.model.odata.ODataModel("http://LINKTOYOURODATA/TreeTableTest/Service/customer.xsodata"); this.getView().setModel(oModel); oThis = this; var jsonModel = new sap.ui.model.json.JSONModel(); oModel.read("customer",{ success : function(oData, oResponse){ jsonModel.setData({"customer" : oData.results}); if(oData.results.length == 0) oThis.custTableLength = -1; else oThis.custTableLength = oData.results.length; oThis.getView().byId('customerTable').setModel(jsonModel); }, error : function(err){ console.log(err); } }); },
});
2. After Binding Model
In the above code we have initialized a variable custTableLength, which will store the total number of entries bound to the table. This will be useful to differentiate the new rows that are created. By running the app we can see the data bound to the table with JSONModel. Now we will define the addCustomer() method in controller. This will add a new row with empty text fields where user can create a customer. The method will push a new empty row to the model data by accessing the table.
addCustomer: function(oEvent){ modelData = this.getView().byId('customerTable').getModel().getData(); var newEntry = new Object(); newEntry.ID = ""; modelData.customer.push(newEntry); this.getView().byId('customerTable').getModel().setData(modelData); },
3. Creating a new row with empty text fields
Here I’ll update row 2, change the name as Peter from John and fill the 3rd row. We’ll make PUT request for existing data, POST request for newly created ones and finally submitting a batch request. We’ll create submitBatch() function as below
submitBatch: function(){ var changeOperations = []; v=this.getView().byId('customerTable').getModel().getData().customer; for(var i=0; i<this.custTableLength; i++){ sPath = "/customer("+v[i].ID+")"; changeOperations.push(oModel.createBatchOperation(sPath,"PUT",v[i],null)); } for(var i=this.custTableLength; i<v.length; i++){ changeOperations.push(oModel.createBatchOperation("/customer","POST",v[i],null)); } oModel.addBatchChangeOperations(changeOperations); oModel.submitBatch(function(oData, oResponse, aErrorResponses){ if(aErrorResponses.length>0){ sap.m.MessageBox.alert("Error in Creating. Please try again..."); console.log(aErrorResponses); }else{ sap.m.MessageBox.alert("Batch Successfull", {}); } }); }
First we declare an array, changeOperations - to hold the list of request. The methods related to batch operations which we used are explained below
oModel.createBatchOperation(sPath, sMethod, oData, parameters)
sPath– String containing the path for collection
sMethod– PUT, POST, DELETE, GET
oData– data payload for create, update or delete
addBatchChangeOperations(aChangeOperations)
aChangeOperations– array of change operations
Here we will add change batch operations such as PUT, POST or DELETE. The operations in the array will be included in a single changeset. If illegal batch operations is added to the change nothing will be performed and false will be returned.
submitBatch(fnSuccess,fnError,bAsync,bImportData)
fnSuccess - a callback function which is called when the batch request has been successfully sent. Note: There might have errors occured in the single batch operations. These errors can be accessed in the aErrorResponses parameter in the callback handler. The handler can have the following parameters: oData, oResponse and aErrorResponses
fnError - a callback function which is called when the batch request failed. The handler can have the parameter: oError which contains additional error information
bAsync– true for Asynchronous request. Default: true
After successful batch process a confirmation message is displayed by our application. Error is displayed if something goes wrong.
** We used sap.m.MessageBox.alert(); so we need to insert the below code in the beginning of the controller.
jQuery.sap.require(“sap.m.MessageBox”)
4. One New row and Updated rows
5. Confirmation message displayed after successful batch operation
As stated in the beginning, the odata batch operations will go as a single changeset. The below image is a reference for the request which we are sending as a single changeset.
6. Changeset for the batch operation
Hope this blog helps you in creating batch operations. If you face any issues in creating batch operations just leave a comment below.
PS: The above example is just to give an overview on batch operations. You can use the generic event to handler for PUT request only for updated values.
) perfectly fine.
