Batch Call of Function Imports in SAPUI5

Hello Readers,

In this post I am going to write about a relatively simple concept but, hard to implement,i.e, calling multiple function imports using a single batch call from the front end SAPUI5 side.

Usually batch methods are used when the user has to perform multiple operations or same operation on multiple records within a single back end call. The same batch methods can be used for calling a function import. We can call the function import for multiple records in a single batch call from UI5.

Lets consider the below scenario where this concept might be usefull:

Consider the below ui5 table containing user details, the last column is a input field, where the admin can enter the rating of the user:

Now, consider if the user enters the value of the ratings in the input field for all the users at once and clicks on save. We can handle this scenario using a batch update (POST) operation. But, for this example, we shall call an function import in the back end using batch call, where the data will get saved. The function import will be called for each record in the table, with the user entered values.

Coding the above scenario, first we need to get the table data in our controller, below code can be written in the save button’s event handler:

var oUserDetArray = [];            //initialize an array to store the user details
var oUserTable = this.getView().byId("idUserTable"); //get instance of the table from view
var oModel = this.getView().getModel(); //get instance of the model

for (i = 0; i < oUserDetArray .getItems().length; i++) { //Looping through the table for items data
 if (oUserDetArray .getItems()[i].getBindingContext() !== undefined) { //checking if the item contains a 
                                                                       //binding context.
	var oItem = oUserDetArray .getItems()[i].getBindingContext().getObject(); //get the item data from 
                                                                                  //the binding context.
	 //Push the desired data to the previously defined array.
         oUserDetArray.push({
		"user_id": oItem.user_id,
		"email_id": oItem.email_id,
		"user_rating": oItem.user_rating
	});
  }
}

In the next step, we can set an deferred group, create the function imports and call the batch methods:

//Set deferred groups and create Function Imports
oModel.setDeferredGroups(["batchFunctionImport"]);
for (i = 0; i < oUserDetArray.length; i++) {
	oModel.callFunction("/User_FunctionImp", {
		method: "POST",
		batchGroupId: "batchFunctionImport",
		changeSetId: i,
	});
}

//Submitting the function import batch call
oModel.submitChanges({
	batchGroupId: "batchFunctionImport", //Same as the batch group id used previously
	success: function (oData) {
		this.getView().byId("idUserDetTable").updateBindings();
	}.bind(this),
	error: function (oError) {
		MessageToast.show("Error");
	}
});

From the back end side we need to redefine the two changeset methods in the DPC_EXT class and implement our desired code in the EXECUTE_ACTION method (for function import) in the same class.

This method brings in the advantages of both function imports and batch operation together, as we can use them simultaneously in our applications.

Please feel free to leave a comment or ask any doubts/question.

Regards,

Arjun Biswas.