2.7 Suggest-Type ahead and data retrieval

This results in a list matching what you have partially entered.

Often there is a requirement for data to be retrieved from SAP based on only a small amount of information.

The goal is to begin typing what you think you are looking for and then have the system return a list of values that

match what you have partially entered.

A common business scenario where this is required is when trying to retrieve names or addresses after typing in only

the first few characters of the name or address.

This can be achieved in FAB by incorporating standard UI5 capabilities into your FAB development.

Define an Entity Set to retrieve the data and a Custom XML element to define when and where the data is

to begin retrieving and what to display.

The ABAP code in the data retrieval should use in its selection of data a CS operator indicating that the SQL must ‘Contain String’.

1. Use an Entity that you have defined from within FAB. 

For example: Define an Entity Set that searches addresses and returns a StreetAddress.

       You should independently test the service that you are going to use before you start using it.

To test the service use SAP tcode /IWFND/MAINT_SERVICE or /n/IWFND/MAINT_SERVICE.

Find the service that you intend to use to retrieve the data – in this case YADDRESS_SERVICE.

Select the service and hit the SAP Gateway Client icon

This displays the URL for this service. Replace ?$format=xml with $metadata and Execute.

This gives you an indication of the fields that have been built into the service. 

Now replace the URL with a filter and search criteria that you expect will retrieve addresses that contain ‘100’.

 /sap/opu/odata/sap/YADDRESS_SERVICE/Addresses/?$filter=SearchTerm eq '100'

If this brings back the required data then you are good to go and can begin using the service in your FAB form.

2.  Use the Model element in your FAB form to include the service.

3.  Define a Form, a Form Container, a Form Element and a ‘Custom XML’. 

Inspect the highlighted portions of the next snapshot to understand what the Custom XML does.

a. The Custom XML must nominate the suggested number of characters after which the system starts the gateway connection to the Entity to retrieve the data.

This indicates to the system that the system must begin the gateway services for the nominated Entity after three characters have been entered.

b. The Custom XML must also define the location on the FAB form where the results must be placed.

c. The data retrieved from SAP must be bound back to the columns defined in the Custom XML.

It defines the startSuggestion of 3 (indicates that the system must start the retrieval of data after three characters have been entered).

Retrieve the {Addresses} from the service.

Define 3 columns with headings, first column heading being:

Define 3 columns of cell data bound to {StreetNo}, {StreetName} and {City}.

d.  The Custom XML must also nominate the function that handles the suggested data - handleInputSuggest.

 The code for the required for handleInputSuggest function and related functions must be placed into the script of the FAB form.

Place the Javascript functions Init, handleInputSuggest and suggestItemChosen into the script of your FAB form.

               Init

function init(){

initModel("address", "/sap/opu/odata/sap/yaddress_service");
var oModel = getModel("address");

var oInput = getControl("addressInput");
oInput.setModel(oModel);

oInput.attachSuggestionItemSelected(function(evt){
suggestItemChosen(evt)
});

};

handleInputSuggest

function handleInputSuggest(evt){
console.log("suggest");

var sValue = evt.getParameter("suggestValue");
var filters = [];        

    var searchFilter = new sap.ui.model.Filter("SearchTerm",
                    sap.ui.model.FilterOperator.EQ,
                    sValue);
filters.push(searchFilter);

evt.getSource().getBinding("suggestionRows").filter(filters);

};

suggestItemChosen

function suggestItemChosen(evt){
console.log("item selected");

var oItem = evt.getParameter("selectedRow").getBindingContext().getObject();

setField("StreetNo",oItem.StreetNo);
setField("StreetName",oItem.StreetName);
setField("City",oItem.City);

setField("AddressVisible",true);

};

The result is a drop down from which you can select a row.

4.  Define Form Elements on your screen that bind to the retrieved fields to receive the data.