Is it possible to edit text in sap.m.table in xml view?

[former_member454391]

is it possible to edit the text in table for the fileld like

<Text text="{company}"/>

[irfan_gokak · Accepted solution]

Hi Priya,

You can use <Input> control. Set its property editable="true" to allow editing and false to display normal text.

<Input type="Text" editable="true"></Input>

[former_member454391 · Accepted solution]

Hi Irfan,

Thank you for your answer , but i need that after editing input field to be change to text, not look as input field,is there any poosibilty for that?

[irfan_gokak · Accepted solution]

Not clear. You mean after you finish editing in Input Field it should change to Text Field? Is that what you want?

[former_member454391 · Accepted solution]

yes,after editing it will be look like normal text in table.

[irfan_gokak · Accepted solution]

Hi Priya,

Either you can Disable or set Editable to false. As given below. If you want to Text field then use two fields in a table cell and play hide/visible with both by binding same property to them. You can do this in Change event of input field. As given below.

<Input type="Text" editable="true" change="myFunction"></Input>

myFunction : function(oEvent){
    oEvent.getSource().setEditable(false);
    oEvent.getSource().setEnabled(false);
}

[riyatickoo]

Hi Priya,

You should use Input control for text editing. It has a property to make it non editable as well. - property name: editable and possible values are true or false.

You can learn more about input control at below given link.

https://sapui5.hana.ondemand.com/#/entity/sap.m.Input

[irfan_gokak]

Hi Priya,

Either you can Disable or set Editable to false. As given below. If you want to Text field then use two fields in a table cell and play hide/visible with both by binding same property to them. You can do this in Change event of input field. As given below.

<Input type="Text" editable="true" change="myFunction"></Input>

myFunction : function(oEvent){
    oEvent.getSource().setEditable(false);
    oEvent.getSource().setEnabled(false);
}

[irfan_gokak]

You can do it using binding very easily.

[former_member454391]

Hi Irfan ,

what exactly i need is,before clicking on that row it should like on below image

after clicking that row ,it should be like below image

on above image it changes from text field to input field and after saved it again looks as text field.This scenario,Is it possible to do with sap.m.table??

Thanks in advance

[irfan_gokak]

Hi Priya,

Yes it's possible but it takes lots of effort. I would suggest you go with simple design like open a dialog and allow user to make changes into it and after change just refresh the table. Thats it!!!

Regards,

Irfan G.

[former_member454391]

yes, i done by using simple dialog when clicking on particular text on table.

But i need that scenario as in screenshots,please will you guide me....

Thanks in advance

[irfan_gokak]

Hi Priya,

Inside table cell put something like first sell with HorizontalLayout.

<ColumnListItem vAlign="Middle">
	<cells>
	        <l:HorizontalLayout>
			<Text text="{GTMdl>Class}" visible="{GTMdl>DisFldVis}"/>
	           	<Input type="Text" visible="{GTMdl>CrtFldVis}"></Input>
		</l:HorizontalLayout>
		<Text text="{GTMdl>Class}" />
	        <Text text="{GTMdl>Age}" />
		<Text text="{GTMdl>Version}" />
	</cells>
</ColumnListItem>

And your model data goes like this

var oNVData = [{
			//Other Fields
			CrtFldVis : false, //flag for visibility of Create Fields
			DisFldVis : true   //flag for visibility of Display Fields
		},{
			//Other Fields
			CrtFldVis : false,
			DisFldVis : true
		},{
			//Other Fields
			CrtFldVis : false,
			DisFldVis : true
		}];
var oJson = new sap.ui.model.json.JSONModel({"GTData":oNVData});
this.getView().setModel(oJson, "GTMdl");

Controller code on click of your text :

VisCrtFld : function(oEvent) {
		//this.getModel("GTMdl")
//		debugger;
		var sPath = oEvent.getSource().getBindingContext("GTMdl").getPath();
		this.getView().getModel("GTMdl").setProperty(sPath+"/CrtFldVis", true);
		this.getView().getModel("GTMdl").setProperty(sPath+"/DisFldVis", false);
	}

Tested and Working.

If you have any doubts please ping me on my linkedIn

Irfan Gokak