
Hello Everyone,
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.
Conclusion:
Instead of deleting single records we can delete multiple data in a single shot.
Thanks & Regards,
Kavya H B
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
7 | |
7 | |
6 | |
4 | |
4 | |
4 | |
4 | |
4 | |
3 | |
3 |