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