SAP Web IDE

Batch Calls From SAPUI5 Application

               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

  1. Batch processing implemented in SAP Gateway Service side.
  2. SAPUI5 Application created.
  3. OData service is added to the application and OData model is set.


Steps

  1. 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.

  2. <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>
    

  3. Open the view's controller.On onInit method put below code.This is for adding a blank row to the table at first time.

  4. 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");
    }
    

  5. 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.

  6. 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);
    }
    

  7. 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.

  8. 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
            }
        });
    
    }
    

  9. See application screenshot.Here I am saving two entries to sap backend through batch call.
  10. Our backend SCARR table after batch operation completed successfully.
Tip:You can check the request payload in browser network tab.For this in google chrome press F12(Inspect element) and go to Network tab and click on $batch request.You can see the request payload and compare it with the payload created when testing with gateway client.😎

If you enjoyed this post, Please Share!!

4 comments :

  1. Hi,
    I 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..






    ReplyDelete
    Replies
    1. The problem is you are not getting the OData model reference in oModel variable
      put a breakpoint in line
      var oModel = this.getView().getModel();
      Use sap.getCore().getModel(); if you are setting the model to the core

      Delete
  2. Thx for the document .. it's working fine !!

    ReplyDelete

Powered by Blogger.