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
Step 2: Data Source —Select None —Click on Next
Step 3: Give View name and Project name Click on Finish.
Step 4: Click on model — Create employee.json file.
Step 5: Configure in manifest.json
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.
After deleting multiple data, Output look like this
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.
Step 2: I have inserted some records. Output look like this.
Step3: After creating Database table. Go to T-Code SEGW. Create OData Project.
Step 4: Import DDIC Structure and Generate Runtime Objects and Also Register Service to open SAP Gateway Client.
Step 5: Click on DPC_EXT.
Step 6: Redefine GET_ENTITYSET and write logic.
Step 7: Redefine GET_ENTITY and write logic.
Step 8: Redefine CREATE_ENTITY and write logic.
Step 9: Redefine UPDATE_ENTITY and write logic.
Step 10: Redefine DELETE_ENTITY and write logic.
Step 11: Redefine CHANGESET_BEGIN AND CHANGESET_END without writing any logic.
Step 12: Go to SAP Gateway Client and Check all crud operations and Batch Call service working or not through URI.
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
Step 5: After deleting multiple data output look like this.
In Database table, Multiple data get deleted.
