Skip to Content
Technical Articles
Author's profile photo Pooja D S

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

Assigned Tags

      4 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      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/5846045

      I.e. in our case here, removeItem(...).destroy(); would help destroying the removed item additionally.

      Author's profile photo Pooja D S
      Pooja D S
      Blog Post Author

      yes, thanks for the info Boghyon Hoffmann .

      Author's profile photo Ramin Shafai
      Ramin Shafai

      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.

       

      Author's profile photo Pooja D S
      Pooja D S
      Blog Post Author

      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.