Technical Articles
How to Add/Remove rows in the table by the button click in SAP Ui5
Hi Everyone,
In this blog I’m going to explain how to add a new input row to the table by the button click in the sap Ui5 which will help the beginners, for more information about table : https://sapui5.hana.ondemand.com/sdk/#/api/sap.m.Table%23controlProperties
Firstly we need to create a project, then in view we have to write a code for the simple table and I just added the property as delete to delete the row using this property.
1.Xml
<mvc:View controllerName="addrow.addrow.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="AddingRow">
<content>
<Table id="tableId1" width="60%" mode="Delete" delete="deleteRow">
<headerToolbar>
<Toolbar>
<ToolbarSpacer></ToolbarSpacer>
<Button icon="sap-icon://add" type="Emphasized" press="onAdd"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="50%">
<Text text="Delete Items"/>
</Column>
<Column width="50%">
<Text text="First Name"/>
</Column>
<Column width="50%">
<Text text="Last Name"/>
</Column>
<Column width="50%">
<Text text="Salary"/>
</Column>
</columns>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
2.Controller.js
In the controller, I’ve written the function for both adding the row to the table and deleting the row from the table.
so by writing these functionality we can achieve this thing and JavaScript plays a major role here. please follow these 3 steps.
Step 1: To Add a row to the table
onAdd: function (oEvent) { //to add a new row
var oItem = new sap.m.ColumnListItem({
cells: [new sap.m.Button({
icon: "sap-icon://delete",
type: "Reject",
press: [this.remove, this]
}), new sap.m.Input(), new sap.m.Input(), new sap.m.Input({
showValueHelp: true
}), ]
});
var oTable = this.getView().byId("tableId1");
oTable.addItem(oItem);
},
In the above function I’ve written the code for adding the row to the table,
- I’ve taken the addItem method to add or create the row to the table which we can see in the function
- new sap.m.Input() creates a new input boxes to the row, if we want dropdown or value help we can also customize as shown in the output picture
- table id must be match in view and in this function as well
Step 2: To Delete a row from the table (Delete Bin Icon)
remove: function (oEvent) {
var oTable = this.getView().byId("tableId");
oTable.removeItem(oEvent.getSource().getParent());
}
In this function
- table id must be match in view and in this function as well
- we need to add removeItem method to delete action
- In the addRow function we can see i’ve written press: [this.remove, this] which is calling here
Step 3: To Delete a row from the table using tables property (Delete X Icon)
deleteRow: function (oEvent) {
var oTable = this.getView().byId("tableId");
oTable.removeItem(oEvent.getParameter("listItem"));
},
In the above function
- we need to add removeItem method to delete action
- table id must be match in view and in this function as well
Output :
In the below picture we can see how the rows are added by clicking on the ‘+’ button at the right top corner and deleting the rows as well by clicking on the delete ‘Bin’ button or ‘x’ button.
Conclusion:
From the above scenario, we will learn how to add row to the table and delete a row from table using table property also using button I’ve created in the controller using xml and js.
it is very useful for the beginners and hope it will help them too. please give me your feedback as well to improve my future blogs.
Happy learning folks!!!
Regards,
Pooja D S
When using the generated
removeXYZ
methods (e.g.removeItem
), please keep in mind that the removed control is not destroyed even if it's no longer displayed in the UI. Cf. https://stackoverflow.com/a/71131717/5846045I.e. in our case here,
removeItem(...).destroy();
would help destroying the removed item additionally.yes, thanks for the info Boghyon Hoffmann .
I'm sorry Pooja, but can you please explain how this would have any practical purpose?
In SAPUI5 applications, tables are (should be) used to show data, which means they are bound to a model, eg. an oData or a JSON model.
If you want to add a row to the table, you just add an entry to the model that the table is bound to. If you want to remove a row, you remove the corresponding path from the bound context.
That's part of the idea behind MVC, the Model drives the View.
The table you show here is not bound to anything, and you hard-code the template in your controller to add a row to the table. The new row will not be bound to anything, what would you do with the data if the user enters something in those input fields? Perhaps in a Javascript forum this may be useful, but for a SAPUI5 program I just don't think this is good practice.
Thanks.
Hi Ramin,
this will help to the beginners, and yes I didn't binded the table with json or data here in this example because in this blog my purpose is to tell "How to Add/Remove rows in the table by the button click in SAP Ui5" not to focus on binding, maybe i'll cover it in future, thanks for the feedback.
thanks.
Thank you it's very helpful for beginners, upload more like that so we can become good at that.
Thanks Arpan, sure will upload more in coming days.
Thank You Pooja D S ,
very helpful for beginners.
Looking forward many more blogs like this
The Problem i faced & got rectified,
Those who are looking at this blog & executing the code in the same way Observe the things,
Delete & Remove Option will not work.
In View :
In Controls :
Make Sure Id of Table need to change.
Thank You,
Suggu Sandeep.
Hello Pooja D S,
I have this table and I want to add additional delete mode. I want to delete row directly from kyeboard. how I make this?
thank you