Add/Remove Rows – sap.m.Table Quick Reference

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="http://www.w3.org/1999/xhtml">
	<Page title="Title">
		<content>
			<Table id="ins" items="{/Products}">
			<headerToolbar>
			<Toolbar>
				<Button icon="sap-icon://add" text="Row" press="addRow"/>
				<Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
			</Toolbar>
		</headerToolbar>
			<columns>
			<Column width="50px"/>
			
			<Column>
				<Text text="Product" />
			</Column>
			
			 <Column
				minScreenWidth="Tablet"
				demandPopin="true"
				>
				<Text text="Dimensions" />
			</Column>
			</columns>
			<items>
				<ColumnListItem>
				<cells>
					<Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
					<Input value="{Name}"/><Input value="{size}"/>
				</cells>
			</ColumnListItem>
			</items>
			</Table>
		</content>
	</Page>
</core:View>

Step 2 – Data 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();
			this.jModel.setData(this._data);
	},

	onBeforeRendering: function() {
		this.byId('ins').setModel(this.jModel);	
	},

Step 3 – Add 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 – http://www.w3schools.com/jsref/jsref_splice.asp

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.
						this.jModel.refresh();
						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
		console.log(this._data.Products);
		
	},

Enjoy.
Sreehari