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

0 comments :

Post a Comment

Powered by Blogger.