Skip to Content
Author's profile photo Sreehari V Pillai

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

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

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 – 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

Assigned tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo brahmareddy chagani
      brahmareddy chagani

      good work

      Author's profile photo jagtar singh
      jagtar singh

      It helps me thanks

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      welcome 🙂

      Author's profile photo Angshuman Chakraborty
      Angshuman Chakraborty

      Nice and very helpful.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      thanks

      Author's profile photo Former Member
      Former Member

      Hi Srihari

      can we hide text input initially?  on click of edit only need to display text field otherwise only text.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Why not. In the JSOn you bind, keep a property 'visibility' and default to false.  Bind this property to the 'enabled' property of the text field. on "Edit", change the value of json property to true, and refresh the binding.

      SH

      Author's profile photo Former Member
      Former Member

      Thank you  very much Sreehari.

      Author's profile photo David Raven
      David Raven

      Hi, thank you.

      Your tutorial works fine on desktop and tablet but not on phone.

      Usualy, we prefere to display tables on phone using popin to save room on the screen. So the table displays a square containing the data. One square for one row. The code for adding row does not work in that case...at least for me.

      Can you help me with that issue?

      Thank you in advance.

      Regards.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Hi ,

      the code above is mobile view compatible. See the snapshot I took from iPhone.

      I added one TextArea below the table , jus to display the json. Also added one more statement in fetchRecords method.

       

      <TextArea width="100%" id="output" ></TextArea>
      fetchRecords : function(oArg){
      		console.log(this._data.Products);
      		this.byId('output').setValue(JSON.stringify(this._data.Products));	
      	}
      

      It worked for me

      Share your code,

      Sreehari

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Author's profile photo David Raven
      David Raven

      Hi,  Thank you for your fast reply!

       

      Everything works.

       

      Last question: I read that some kind of mobiles can behave in different ways and not add row or delete rows from sap.m.Table. In fact, my code works on almost every mobile. But I tested it on one that did not work.

      The sapui5 should be able to work everywhere ?

      Thank you again.

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Sorry for the very late response . I wasn’t around for a while. The issue with sap.m.Table may be for some lower versions . I have delivered many applications with the features I described above for various endpoints . Never noticed such issues . Still , I noticed that the control behaves slightly differently when inside different containers ..

      SH

       

      Author's profile photo Former Member
      Former Member

      HI Sreehari

       

      If i would to try to use this code, to reply a row structure that contain combobox, input and button, when i press AND OR buttons, such as this:

      How i can do?

      P.S: I use your code structure but new information was added in comboboxes in append.

      Thanks

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Sorry for the late response . I wasn’t around for a while .

      I used a Json object to bind to the table . Let the json object be deep in your case to bind to the combo box .

      Like each tuple in the main jaon contained a json array ( corresponding to the combox) . The entries to be added in the combobox to be inserted to this json arrray and bind to combobox . Confused ????

      SH

      Author's profile photo Manjunath Chintha
      Manjunath Chintha

      Instead of clicking on Add Row, similar to kind of ALV, need the default X number of rows shown in editable mode .. then ?

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai
      Blog Post Author

      Let the json variable has some blank rows initially itself. This will be rendered in table as blank records ( or call add row handler n times in the init method )