I am writing this blog to explain how to delete multiple data in m table in SAP UI5 application and also deleting multiple data in m table using Batch call consuming ODATA service.
The m table is also called as responsive table which contains a set of line items and is fully responsive. The control for m-table is sap.m.Table.
Step1: Create a new Project in VS Code. View—Command Palette —Open Application Generator—Template Type (SAP Fiori)—Select Basic —Click on Next
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-1.png?resize=730%2C434&ssl=1)
Step 2: Data Source —Select None —Click on Next
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-2.png?resize=730%2C409&ssl=1)
Step 3: Give View name and Project name Click on Finish.
Step 4: Click on model — Create employee.json file.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-3.png?resize=730%2C900&ssl=1)
Step 5: Configure in manifest.json
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-4.png?resize=730%2C539&ssl=1)
Step 6: In View, Create m table.
<mvc:View controllerName="multipledatadelete.controller.View1"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<Table items="{emp>/data}" mode="MultiSelect" selectionChange="oSelectedItems" id="mytable" >
<columns>
<Column >
<Text text="Name"></Text>
</Column>
<Column >
<Text text="Id"></Text>
</Column>
<Column >
<Text text="City"></Text>
</Column>
</columns>
<ColumnListItem >
<cells>
<Text text="{emp>name}"></Text>
<Text text="{emp>id}"></Text>
<Text text="{emp>city}"></Text>
</cells>
</ColumnListItem>
<headerToolbar>
<OverflowToolbar >
<Bar >
<contentRight>
<Button text="Delete" type="Negative" press="oDelete" ></Button>
</contentRight>
</Bar>
</OverflowToolbar>
</headerToolbar>
</Table>
</content>
</Page>
</mvc:View>
Step 7: In Controller, Write Logic.
Based on selected keys, we can delete multiple data.
sap.ui.define([
"sap/ui/core/mvc/Controller"
],
/**
* {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller) {
"use strict";
var oSelectedPath =[]
return Controller.extend("multipledatadelete.controller.View1", {
onInit: function () {
},
oSelectedItems:function(oEvent){
oSelectedPath = oEvent.getSource().getSelectedContextPaths()
},
oDelete:function(){
var oModel = this.getView().getModel("emp")
var aOldData = oModel.oData.data
var aTemp = []
for(let j=0;j<oSelectedPath.length;j++)
{
var index = oSelectedPath[j].split("/")[2]
for(let i=0; i<aOldData.length; i++)
{
if(aOldData[i].id == aOldData[index].id )
{
aTemp.push(aOldData[i])
}
}
}
for(let k=0;k<aTemp.length;k++)
{
for(let n=0; n<aOldData.length; n++)
{
if(aOldData[n].id == aTemp[k].id )
{
aOldData.splice(n,1)
}
}
}
oModel.refresh(true)
this.getView().byId("mytable").removeSelections(true)
}
});
});
Run the program — Open Integrated Terminal —npm run start.
Output look like this.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-5.png?resize=730%2C228&ssl=1)
After deleting multiple data, Output look like this
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-6.png?resize=730%2C178&ssl=1)
Multiple data delete using Batch call.
In some business scenarios multiple entity instances need to be handled together as a single logical unit of work. This is where $batch processing come into picture. $batch request means multiple operations bundled as a single request. Batch processing simple batches several independent OData service call to a single OData call. Batch call Reduce number of Api calls. In a single http request we can do multiple crud operation.
Step 1: Create a Database table in SE11.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-7.png?resize=730%2C370&ssl=1)
Step 2: I have inserted some records. Output look like this.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-8.png?resize=730%2C375&ssl=1)
Step3: After creating Database table. Go to T-Code SEGW. Create OData Project.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-9.png?resize=730%2C404&ssl=1)
Step 4: Import DDIC Structure and Generate Runtime Objects and Also Register Service to open SAP Gateway Client.
Step 5: Click on DPC_EXT.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-10.png?resize=730%2C192&ssl=1)
Step 6: Redefine GET_ENTITYSET and write logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-11.png?resize=730%2C99&ssl=1)
Step 7: Redefine GET_ENTITY and write logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-12.png?resize=730%2C102&ssl=1)
Step 8: Redefine CREATE_ENTITY and write logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-13.png?resize=730%2C240&ssl=1)
Step 9: Redefine UPDATE_ENTITY and write logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-14.png?resize=730%2C218&ssl=1)
Step 10: Redefine DELETE_ENTITY and write logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-15.png?resize=730%2C139&ssl=1)
Step 11: Redefine CHANGESET_BEGIN AND CHANGESET_END without writing any logic.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-16.png?resize=730%2C226&ssl=1)
Step 12: Go to SAP Gateway Client and Check all crud operations and Batch Call service working or not through URI.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-17.png?resize=730%2C328&ssl=1)
Front end:
Step 1: Create one SAP UI5 application based on Service created in Back-end. Metadata.xml file will be created.
Step 2: Home Page
<mvc:View controllerName="odatabatch.controller.View1"
xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
xmlns="sap.m">
<Page id="page" title="{i18n>title}">
<content>
<Table items="{employee>/}" mode="MultiSelect" selectionChange="onRead" id="Tableid" >
<columns>
<Column >
<Text text="Employee ID"></Text>
</Column>
<Column >
<Text text="Employee Name"></Text>
</Column>
<Column >
<Text text="Employee Age"></Text>
</Column>
<Column >
<Text text="Employee City"></Text>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Text text="{employee>Employeeid}"></Text>
<Text text="{employee>Empname}"></Text>
<Text text="{employee>Empage}"></Text>
<Text text="{employee>Empcity}"></Text>
</cells>
</ColumnListItem>
</items>
</Table>
<Bar >
<contentRight>
<Button text="Delete" type="Negative" id="btnid" press="onMultipleDelete"></Button>
</contentRight>
</Bar>
</content>
</Page>
</mvc:View>
Step 3: Controller logic
onInit logic:
onInit: function () {
var oModel = new sap.ui.model.json.JSONModel();
this.getOwnerComponent().getModel().read("/zemployeeSet", {
success: function (oData, response) {
debugger
// Assuming that the data you want is in the 'results' property
oModel.setData(oData.results);
},
error: function (error) {
console.error("Error loading data: " + error);
}
});
this.getView().setModel(oModel, "employee");
}
onRead logic:
onRead:function(oEvent){
this.getOwnerComponent().getModel().read("/zemployeeSet", {
success: function (oData, response) {
},
error: function (error) {
console.error("Error loading data: " + error);
}
});
},
onMultipleDelete logic:
onMultipleDelete:function(oEvent){
var oTable = this.getView().byId('Tableid');
var selectItem = oTable.getSelectedItems();
var object = [];
for (var i = 0; i < selectItem.length; i++) {
var selectedrow = {
"Employeeid": selectItem[i].getBindingContext('employee').getObject().Employeeid,
"Empname": selectItem[i].getBindingContext('employee').getObject().Empname,
"Empage": selectItem[i].getBindingContext('employee').getObject().Empage,
"Empcity": selectItem[i].getBindingContext('employee').getObject().Empcity,
};
object.push(selectedrow);
}
var oModel = this.getView().getModel();
oModel.setUseBatch(true);
var jModel = this.getOwnerComponent().getModel();
for(var i = 0; i<object.length; i++){
var oEntry = object[i].Employeeid;
oModel.remove("/zemployeeSet('" + oEntry + "')",
{
method:"DELETE",
success:function(response){
sap.m.MessageToast.show("Employee Data is deleted");
}
}
);
}
oModel.submitChanges({
success: function(data, response){
},
error: function(e){
}
})
location.reload();
}
Step 4: Output before
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-18.png?resize=730%2C189&ssl=1)
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-19.png?resize=730%2C375&ssl=1)
Step 5: After deleting multiple data output look like this.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-20.png?resize=730%2C138&ssl=1)
In Database table, Multiple data get deleted.
![](https://i0.wp.com/www.erpqna.com/wp-content/uploads/2024/02/deleting-mutiple-data-in-m-table-amp-deleting-multiple-data-using-batch-21.png?resize=730%2C202&ssl=1)