TextField retains the old values on tabstrip tab selection

[Former Member]

Hi Guys,

I am facing some issue with sap.ui.commons.TextField Control value.

I am using Tab Strip layout, In that first Tab having Text Field.

Here I am changing Text Field value (Cursor remains in Text Field while selecting tab) and selecting second Tab of  Tab Strip.

Again coming back to first Tab. There Text Field Showing old value not new one which I have entered before tab selection.

Please help me to resolve this issue. How can retain new value in Text Field?

You can refer following Tab Strip Example also

SAPUI5 SDK - Demo Kit

[saivellanki · Accepted solution]

Hi Sumit,

I used your code, will this help? JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Thank You Sai.. that solved my problem

[Former Member · Accepted solution]

Hi Sai,

One more issue I am getting now, I need to call onChange function for text field.

Here its not getting called if I am change Sales Organization value and selecting next tab.

Please help me.

[saivellanki · Accepted solution]

Hi Sumit,

Did you try liveChange event of text field? It should get called when you try to enter/change something in the text field. Can you place a breakpoint and check?

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Yes Sai,

I need to call some other function on "change" event. When i try to navigate using some button its working properly, but when I navigate directly using the tabs the change event of textfield is not called.

With the help of your code i was able to retain the value, but still I'm not able to call the function on change event.

Regards,

Sumit

[saivellanki · Accepted solution]

Sumit,

Can you share your code please?

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai,

Here I have PGC as ValueHelpField on change event of that I need to add PGC Description value. Req Discount % is normal input field.

                               Now I can do navigation directly from Tab Strip selection or On click of Next Button.

If I changed PGC value and click Next button the onChange event of PGC is getting called. But while navigating from tab strip its not getting called.

PS:On click of Next button I am just navigating to next tab.

Regards,

Sumit.

[saivellanki · Accepted solution]

Hi Sumit,

Will this help? JS Bin - Collaborative JavaScript Debugging

Let me know if this is not what you're expecting. There are two change events, one is basic change event which triggers when you hit enter and there is liveChange event which hits when any one character changes in the textfield value.

Check the API - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.commons.ValueHelpField

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai.

Actually I am looking for on Change event of TextField.

Which is not getting called when your cursor in TextField and selecting next tab of TabStrip.

Regards,

Sumit.

[saivellanki · Accepted solution]

Sumit,

Change event will not be fired, when you change the selection of tab strip. It will be fired, only when you leave the focus from textfield and press somewhere else in the screen or press the enter key in your keyboard.

In the API it says the same thing -

change(oControlEvent)Event is fired when the text in the field has changed AND the focus leaves the TextField or the Enter key is pressed.

Why don't you use liveChange event? It will get fired when ever there is a change in value. Otherwise, one more alternative I am not sure about this we can try using the select event of tab strip.

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

Hi Sai,

Why its not getting fired, I am selecting tab means I am changing focus also.

If I implemented button there and clicking on button then its working.

Regards,

Sumit.

[karthikarjun · Accepted solution]

Hi Sumit,

will this help?

JS Bin - Collaborative JavaScript Debugging

Thanks,

Karthik A

[Former Member]

Thanks Sergio.

In my one of the requirement I have implemented sap ui5 table inside Tab Strip with text field as input filed. There I am binding table using json model.

Here If I changed the Req Discount % value and clicking on Top Icon Bar or Next button that time its taking new value.

But if I clicking on Tab Strip that time its taking old value (Initially Blank).

How its showing Old Value on Tab Strip Selection only?

[karthikarjun]

Hi Sumit,

On click of tab strip,

Did you calling any method?

Thanks,

KA

[Former Member]

Yes Karthik A.

Just doing validation on table whether all input values are entered or not.

Regards,

Sumit.

[karthikarjun]

Could you please paste that method here...

[Former Member]

Hi Karthik,

Please add following code of Table in tab strip and please check

		var oTable2 = new sap.ui.table.Table("idTable",{
				visibleRowCount: 10,
				firstVisibleRow: 3,
				selectionMode: sap.ui.table.SelectionMode.None
		});
		oTable2.addColumn(new sap.ui.table.Column({
				label: new sap.ui.commons.Label({text: "Request #"}),
				template: new sap.ui.commons.Link({
					press:function(oEvent)
					{
					}
				}).bindProperty("text", "Arnum"),
				sortProperty: "Arnum",
				filterProperty: "Arnum",
				autoResizable: true

			}));
		oTable2.addColumn(new sap.ui.table.Column({
			label: new sap.ui.commons.Label({
				text: "Sales Organization"
			}),
			template: new sap.ui.commons.TextField().bindProperty("text", "Vtext"),
			sortProperty: "Vtext",
			filterProperty: "Vtext",
			autoResizable: true
		}));
		oTable2.addColumn(new sap.ui.table.Column({
			label: new sap.ui.commons.Label({text: "Agreement Type"}),
			template: new sap.ui.commons.TextView().bindProperty("text", "AgrmntTypeTxt"),
			sortProperty: "AgrmntTypeTxt",
			filterProperty: "AgrmntTypeTxt",
			width: "200px",
			autoResizable: true
		}));
		oTable2.addColumn(new sap.ui.table.Column({
			label: new sap.ui.commons.Label({text: "Description"}),
			template: new sap.ui.commons.TextView().bindProperty("text", "Botext"),
			sortProperty: "Botext",
			filterProperty: "Botext",
			width: "200px",
			autoResizable: true
		}));
		var aData = [
		{Arnum: "R10023", Vtext: "RAUS", AgrmntTypeTxt: "ABC"},
		{Arnum: "R1004567", Vtext: "RAKorea", AgrmntTypeTxt: "VCX"},
		{Arnum: "R1004567", Vtext: "RAKorea", AgrmntTypeTxt: "VCX"},
		{Arnum: "R1004567", Vtext: "RAKorea", AgrmntTypeTxt: "VCX"},
		{Arnum: "R1004567", Vtext: "RAKorea", AgrmntTypeTxt: "VCX"}
		];
		var oModel2 = new sap.ui.model.json.JSONModel();
		oModel2.setData(aData);
		oTable2 .setModel(oModel2);
		oTable2.bindRows("/");

[saivellanki]

Hi Sumit,

Use Model property binding concept, it will work. Will this help? JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[Former Member]

Thanks Sai.

Its working fine with Form and JSON Model for text field.

But If I placed the text field in table there same issue is coming even for table I am using model.

[karthikarjun]

Hi Sumit,

Please Share your code...

Thanks,

Karthik A

[SergioG_TX]

the reason the value is retained as the old value is because the value property of that text field is hardcoded to be "Musterman". if instead of having a hardcoded value you use a model, then the framework will keep whatever value is set in the model. please check out MVC and also the properties of the text field to make sure is editable and then map the value of the control to a property of your model

hope this helps