SAPUI5 Suggestion web ide Value changed automatically

[former_member202213]

Hi everyone,

i'm using suggestion Items the following way :

XML View

<Input width="100%" id="input11" value="{tableData>PostCode}" showSuggestion="true" suggest="onSuggestCPInst" suggestionItemSelected="onSuggestCPInstSelect" cd:w5g.dt.context="tableData>/ZisuAddrPostcodeSet" startSuggestion="2" suggestionItems="{path:'tableData>/ZisuAddrPostcodeSet',parameters:{select:'PostCode,CityName'}}" suggestionRowValidator="{tableData>PostCode}" change="onChangeCPinstal">
											<suggestionItems>
											    <core:Item text="{tableData>CityName}" key="{tableData>PostCode}"/>
											</suggestionItems>
											</Input>

and here are the two methods attached :

		onSuggestCPInst: function (oEvent) {
			// Build filters
			var sValue = oEvent.getParameters().suggestValue;
			var sCurrentLocale = sap.ui.getCore().getConfiguration().getLanguage();
			var oFilter1 = new sap.ui.model.Filter("PostCode", FilterOperator.StartsWith, sValue);
			var oFilter2 = new sap.ui.model.Filter("Langu", FilterOperator.EQ, sCurrentLocale);
			var oSource = oEvent.getSource();
			var oBinding = oSource.getBinding("suggestionItems");
			oBinding.filter([
				oFilter1,
				oFilter2
			]);
			// indispensable pour que la liste apparaisse			
			oSource.setFilterSuggests(false);
		},
		/**
		 *@memberOf Oa_solaire_C13.Oa_solaire_C13.controller.View_form1
		 */
		onSuggestCPInstSelect: function (oEvent) {
			var sPostCode = oEvent.getParameters().selectedItem.getKey();
			this.getView().byId("input11").setValue(sPostCode);
			var sCityName = oEvent.getParameters().selectedItem.getText();
			this.getView().byId("input13").setValue(sCityName);
		}

what i'm trying to do is the following :

When entering 2 or more digits from postcode, I want a list of corresponding existing city from odata service.

and when selecting an entry, thanks to on SuggestCPInstSelect, automatically 2 fields are filled : Postcode and city.

it works like a charm that way but when i'm changing the value another time, the text from the city is loaded in postcode field.

to be more specific here is an example of behaviour :

I choose 75 in postcode. in the list displayed I choose PARIS 04.

field Postcode is filled with 75004 value and city with PARIS 04 as expected.

now I erase 75004 to pass a new value like 92. automatically the field is erased and PARIS 04 appears in postcode field.

I think this behaviour has something to do with the suggestionItemSelected method because when nothing is specified in this method, if you select a value in the displayed list, automatically the field specified as text in suggestion field appears in the field. in my example, as I choose CityName as text, it is this value which will naturally appears.

since I added code in suggestionItemSelected, the text value is not used as it should be.

for now I tryied the following solution which is not satisfactory.

I implemented a method for onChangeEvent of the field :

var oPostCode = this.getView().byId("input11").getValue();
var oCityName = this.getView().byId("input13").getValue();
// permet de corriger un problème qui a lieu après avoir saisi une première valeur on vide la valeur saisie		
if (oPostCode === oCityName) {
this.getView().byId("input11").setValue("");
			}

that way if someone replace the value by another after choosing a first postcode (92 in my example), the code verify that PostCode is not equal to CityName. if it is the case, I delete the value.

it works but is not exactly what I want since the use have to write again is value (92 *2)

Please can you suggest a solution ?

[former_member202213 · Accepted solution]

Hi to all,

I finally found a solution. In case someone is interested : I used suggestion table instead of suggestion field. here is the following :

xml view :

<Input width="100%" type="Text" id="input11" value="{tableData>PostCode}" showTableSuggestionValueHelp="false" showSuggestion="true" textFormatMode="ValueKey" suggestionRows="{tableData>/ZisuAddrPostcodeSet}" suggestionItemSelected="onSuggestCPInstSelect" cd:w5g.dt.context="tableData>/ZisuAddrPostcodeSet" startSuggestion="2" suggestionRowValidator="{tableData>PostCode}" maxLength="5" suggest="onSuggestCPInst">
								<suggestionColumns>
									<Column hAlign="Begin" popinDisplay="Inline" demandPopin="true">
										<Label text="CP"/>
									</Column>
									<Column hAlign="Begin" popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet">
										<Label text="Ville"/>
									</Column>
								</suggestionColumns>
								<suggestionRows>
									<ColumnListItem>
										<cells>
											<Label text="{tableData>PostCode}"/>
											<Label text="{tableData>CityName}"/>
										</cells>
									</ColumnListItem>
								</suggestionRows>
							</Input>

and controller :

		onSuggestCPInstSelect: function (oEvent) {
			var oSelectedItem = oEvent.getParameter("selectedRow");
			var obj = oSelectedItem.getBindingContext('tableData').getObject();
			var sPostCode = obj.PostCode;
			var sCityName = obj.CityName;
			this.getView().byId("input11").setValue(sPostCode);
			this.getView().byId("input13").setValue(sCityName);
		},
		suggestionRowValidator: function (oColumnListItem) {
			var aCells = oColumnListItem.getCells();
			return new sap.ui.core.Item({
				key: aCells[0].getText(),
				text: aCells[1].getText()


			});
		},
		onSuggestCPInst: function (oEvent) {
			// Build filters
			var sValue = oEvent.getParameters().suggestValue;
			var sCurrentLocale = sap.ui.getCore().getConfiguration().getLanguage();
			var oFilter1 = new sap.ui.model.Filter("PostCode", FilterOperator.StartsWith, sValue);
			var oFilter2 = new sap.ui.model.Filter("Langu", FilterOperator.EQ, sCurrentLocale);
			var oSource = oEvent.getSource();
			var oBinding = oSource.getBinding("suggestionRows");
			oBinding.filter([
				oFilter1,
				oFilter2
			]);
			// indispensable pour que la liste apparaisse			
			oSource.setFilterSuggests(false);
		},

and to finish, i added following code in init method :

			var oInput = this.getView().byId('input21');
			oInput.setSuggestionRowValidator(this.suggestionRowValidator);
			var oInput2 = this.getView().byId('input22');
			oInput2.setSuggestionRowValidator(this.suggestionRowValidator);

This way, when entering 2 characters of postcode, a list containing each couple postcode/city is displayed.

when selecting one, field Postcode if filled with selected postcode and citycode with selected citycode.

when deleting data to put another postcode, the behaviour is correct.