Skip to Content

Problem Statement

Create an editable Table ( sap.m.Table) where we can dynamically add / Remove rows to accept user inputs . Consider this blog as a quick reference for developers to adapt the code and concept

Solution Steps

Step 1 . Create a table in your view – In this step, i created a table with 2 columns ( Product and Dimension )

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
		controllerName="tableinsert.Main" xmlns:html="">
	<Page title="Title">
			<Table id="ins" items="{/Products}">
				<Button icon="sap-icon://add" text="Row" press="addRow"/>
				<Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
			<Column width="50px"/>
				<Text text="Product" />
				<Text text="Dimensions" />
					<Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
					<Input value="{Name}"/><Input value="{size}"/>

Step 2Data Binding – Create JSON Object with sample records ( for test ) and add the same to a JSON Model. Bind the JSON Model to the Table

onInit: function() {
			this._data = {
				Products : [
				            { Name : 'Clock' , size : '1X2X5'},
				            { Name : 'Pen' , size : '7X2X5'}
			this.jModel = new sap.ui.model.json.JSONModel();

	onBeforeRendering: function() {

Step 3Add Row – Concept here is , when you insert a new record to the json object, the same will be reflected in the table on refreshing the json model.

addRow : function(oArg){
		this._data.Products.push({Name : '', size : ''});
		this.jModel.refresh();//which will add the new record


Step 4 – Deleting a record – Concept being the same as insert. here , we will match the record to be deleted with the json object we have. On finding the match – it will splice the record from json .
read more about splice –

deleteRow : function(oArg){
		var deleteRecord = oArg.getSource().getBindingContext().getObject();
		for(var i=0;i<this._data.Products.length;i++){
			if(this._data.Products[i] == deleteRecord )
					//	pop this._data.Products[i] 
						this._data.Products.splice(i,1); //removing 1 record from i th index.
						break;//quit the loop

Step 4 – read the data after change  – when the user enter the data in the screen , the same will be loaded automatically in the json object ( as the json model is two way bound to the table ) . Just read the data from JSON object

fetchRecords : function(oArg){
		//data will be in this._data.Products


To report this post you need to login first.


You must be Logged on to comment or reply to a post.

Leave a Reply