Quick search help for odata and sapui5 application

In sapui5 application we frequently need to use search help and fetch data from back end. In one of my project we created separate entity for the same and wrote code inside get_entity or get_entityset methods but there are simple steps to do so by using the import functionality of search help in gateway builder project itself without writing any code. Hope this article be helpful to programmers who are new to odata and sapui5.

Here I have described the steps to create search help for fields which are exposed on the UI5 application.

Create a new project in segw transaction as below

Right click on data model and choose import and then search help option.

Here in this example we will create search help for user, please note currently segw supports only elementary search help only. You can provide standard or custom search help name in the given input field.

Here you have the option to generate read and query operation for the entity and code will be auto generated as per the search help.

Depending on the search help selected you will see the parameters list and select as per requirement.

Next screen

Select primary key here and press next.

Then check and generate the project.

Go to runtime artifacts, you can see code is auto generate in get_entity and get_entityset methods.

If you need to make any change inside these methods for example to change the selection parameter, add some conditions, you can copy this above code, redefine above methods, use the code and make necessary changes.

Testing the changes, register the gateway project and run the gateway client and execute the entityset, you can see the username in output screen.

/sap/opu/odata/SAP/Z_SEARCHHELP_P1_SRV/userSearchSet

Create SAP ui5 application, Create a new project using SAP UI5 template

Connect the odata service to above project, right click on project name, go to new and then choose odata service. Search your project with service name

Inside usersearch view, create a input field for connecting search help request

Enable showValueHelp and valueHelpRequest attributes.

valueHelpRequest will ask for function name where we can specify the entity set and fragment design to show user list.

Create a fragment as shown below to hold values after user search

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
<SelectDialog noDataText="No Records Found" title="Select Table" liveChange="handleTableValueHelpSearch"confirm="handleTableValueHelpConfirm" cancel="handleTableValueHelpCancel" growingThreshold='10' contentWidth="50px" contentHeight="250px"><StandardListItem/>
</SelectDialog>
</core:FragmentDefinition>

Now to load user search entity set, go to controller for usersearch view and set odata model.

Now we will implement onSearch function for submit event of input control.

In this function we will create an instance of fragment for user search dialog. Set filter criteria as user name and then bind the items list with dialog instances as below.

onSearch: function(oEvent) 
{
var sInputValue = oEvent.getSource().getValue();
this.inputId = oEvent.getSource().getId();
var path;var oTableStdListTemplate;
var oFilterTableNo;
this.oDialog = sap.ui.xmlfragment("searchusersearchUser.view.ValueHelpTable", this);
path = "/userSearchSet";
oTableStdListTemplate = new sap.m.StandardListItem({title: "{Bname}",description: "{Responsible}"});// //create a filter for the binding
oFilterTableNo = new sap.ui.model.Filter("Bname", sap.ui.model.FilterOperator.EQ, sInputValue);
this.oDialog.unbindAggregation("items");
this.oDialog.bindAggregation("items", {
path: path,
template: oTableStdListTemplate,
filters: [oFilterTableNo]}
);// }// open value help dialog filtered by the input value
this.oDialog.open(sInputValue);
},
handleTableValueHelpConfirm: function(e) 
{
var s = e.getParameter("selectedItem");
if (s) {
this.byId(this.inputId).setValue(s.getBindingContext().getObject().Bname);
this.readRefresh(e);
}
this.oDialog.destroy();
}

Test the changes

Now you can see we are able to use input field as search help. You can either press f4 on keyboard or press below icon in input field to invoke search help.

Here in this example we have user standard search help ‘user_docu’ so generate code will work accordingly. Generally, the code will search for the string given in the input i.e. using ‘EQ’ option in select option. You can change it to ‘CP’ or any other option as required.

This example and steps are helpful to design basic search help and expose the same on sapui5 screen. As per requirement you can modify back end code or you can use table to show multiple columns on the output in case search help multiple columns. Additionally you can restrict search help to filter relevant and less number of data if data load is huge. Hope this will get you started on creating search help in your project.