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.

12 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) 

Leave a Reply