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

[sreehari_vpillai]

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