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 } }); }
If you enjoyed this post, Please Share!!
Hi,
ReplyDeleteI just copied the code and paste to a new app. But i am getting error " Cannot read property 'setUseBatch' of undefined ".. can you please explain how to solve it?
I am sending errors..
App.controller.js?eval:38 Uncaught TypeError: Cannot read property 'setUseBatch' of undefined
at f.onBatchSave (App.controller.js?eval:38)
at f.a.fireEvent (EventProvider-dbg.js:228)
at f.a.fireEvent (Element-dbg.js:427)
at f.firePress (ManagedObjectMetadata-dbg.js:428)
at f.d.ontap (eval at evalModuleStr (jquery.sap.global-dbg.js:3425), :820:179)
at f.a._handleEvent (Element-dbg.js:162)
at constructor.U._handleEvent (UIArea-dbg.js:828)
at HTMLBodyElement.dispatch (jquery-dbg.js:4737)
at g (jquery-mobile-custom-dbg.js:1972)
at HTMLBodyElement.q (jquery-mobile-custom-dbg.js:2063)
onBatchSave @ App.controller.js?eval:38
a.fireEvent @ EventProvider-dbg.js:228
a.fireEvent @ Element-dbg.js:427
(anonymous) @ ManagedObjectMetadata-dbg.js:428
d.ontap @ Button-dbg.js:269
a._handleEvent @ Element-dbg.js:162
U._handleEvent @ UIArea-dbg.js:828
dispatch @ jquery-dbg.js:4737
g @ jquery-mobile-custom-dbg.js:1972
q @ jquery-mobile-custom-dbg.js:2063
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549
trigger @ jquery-dbg.js:7819
(anonymous) @ jquery-dbg.js:7903
each @ jquery-dbg.js:365
each @ jquery-dbg.js:137
trigger @ jquery-dbg.js:7902
P @ jquery-mobile-custom-dbg.js:1543
R @ jquery-mobile-custom-dbg.js:1553
dispatch @ jquery-dbg.js:4737
c3.handle @ jquery-dbg.js:4549
Here i am not able to send you the screenshot.. Screenshot image is not supporting here.
can you please help me... I am the new in sapui5. you can send your mail address . I can send you the error as screenshot..
The problem is you are not getting the OData model reference in oModel variable
Deleteput a breakpoint in line
var oModel = this.getView().getModel();
Use sap.getCore().getModel(); if you are setting the model to the core
Thx for the document .. it's working fine !!
ReplyDeleteThanks for the feedback.
DeleteHey i got a question, i want to open after a dialog.. but when i update for example 5 entrys or create i get also 5 dialogs.. can i get only 1 somehow?
ReplyDeleteare you creating dialogs dynamically?.Create just one dialog globally and make use of close function of dialog.
Delete