Search Field Suggestion values issue from Odata model

Introduction : 

Suggestion item is very useful search and select feature available with SAP UI5 which gives suggestions of value(like Google) while entering values in the input field, beside Input control SAP UI5 has SearchField control which can be implemented with suggestion item.

This blog post is intended to describe solution for the issue which I did in my recent project while using SearchField control with Odata on initial load of page.

Issue Description : 

A SearchField control did not populate the suggestion list for selection from oData entityset on initial load, however sometimes during debug or with some delay list was populated. So this pointed towards some issue with data load timing.

Solution : 

This can be resolved by attaching an event handler called once by attaching it to event “dataReceived” to indicate binding is completed in suggest event call of SearchField control.

Sample Code Demonstration : 

Below is the sample code for Input Control and SearchField control. Input control is just for reference and comparison.

1. Odata EntitySet GetEntity method implementation for list of suggestion value

DATA : ls_bunit TYPE zcl_zcm_dashboard_mpc=>ts_businessunit.

  ls_bunit-creditseg = 'YBEG'.
  ls_bunit-creditsegname = 'Beglium Sales'.
  ls_bunit-creditsegdesc = 'Belgium Legal Entity'.
  APPEND ls_bunit TO et_entityset.

  ls_bunit-creditseg = 'YRUS'.
  ls_bunit-creditsegname = 'Russia'.
  ls_bunit-creditsegdesc = 'Russia Legal Entity'.
  APPEND ls_bunit TO et_entityset.


  ls_bunit-creditseg = 'YFRC'.
  ls_bunit-creditsegname = 'France'.
  ls_bunit-creditsegdesc = 'France Legal Entity'.
  APPEND ls_bunit TO et_entityset.

  ls_bunit-creditseg = 'YIND'.
  ls_bunit-creditsegname = 'India'.
  ls_bunit-creditsegdesc = 'India Legal Entity'.
  APPEND ls_bunit TO et_entityset.

  ls_bunit-creditseg = 'YUSA'.
  ls_bunit-creditsegname = 'United States Of America'.
  ls_bunit-creditsegdesc = 'USA Legal Entity'.
  APPEND ls_bunit TO et_entityset.

2. SAP UI5 Control Sample Code in MainView – Input control for suggestion

Odata EntitySet : /BusinessUnitSet

Properties : creditseg, creditsegdesc

Code :

<Input id="oInput" 
       showSuggestion="true" 
	showValueHelp="true"  
	suggestionItems="{ path: '/BusinessUnitSet' }">
	<core:ListItem text="{creditseg}" 
	additionalText="{creditsegdesc}"/>
</Input>

Output :

Input Control Suggestion List

3. SearchField Control Sample Code

<SearchField width="30%" 
	placeholder="Search for Business Unit" 
	enableSuggestions="true" 
	search=".onSearch" 
	suggest=".onSuggest"
	suggestionItems="{path: '/BusinessUnitSet'}" 
	id="searchField">
						
	<SuggestionItem text="{creditsegdesc}" 
	description="{path:'creditseg'}" 
	key="{creditseg}"/>
</SearchField>

4. Controller Methods for Suggestion and additional code to handle event

onSuggest: function(event) {

 var sValue = event.getParameter("suggestValue"),
		aFilters = [];
        if (sValue) {
	aFilters.push(new Filter({
	filters: [
		new Filter("creditsegdesc", FilterOperator.Contains, sValue.toUpperCase()),
		new Filter("creditseg", FilterOperator.Contains, sValue.toUpperCase())
		],
		and: false
		}));
		}
		var oSource = event.getSource();
		var oBinding = oSource.getBinding('suggestionItems');
		oBinding.filter(aFilters);
		oBinding.attachEventOnce('dataReceived', function() {
		oSource.suggest();
		});

	},

5. Search Event to display selection

onSearch: function(event) {
 var oItem = event.getParameter("suggestionItem");
if (oItem) {
  MessageToast.show("Search for: " + oItem.getText());
  } else {
      MessageToast.show("Search is fired!");
	}
},

6. Output

SearchField Control Suggestion Item

Conclusion : 

The additional firing of “dataReceived” event before pushing the data to the suggestion list will help to avoid the situation.