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="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

To report this post you need to login first.

15 Comments

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

    1. Sreehari V Pillai 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

      (0) 
  1. 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.

    (0) 
    1. Sreehari V Pillai 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

      (0) 
  2. 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.

    (0) 
    1. Sreehari V Pillai 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

       

      (0) 
  3. Davide Massa

    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

    (1) 
    1. Sreehari V Pillai 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

      (0) 

Leave a Reply