Ways to add Search Helps in SAP UI5 Application

[SrinathVelagala]

In an SAP UI5 application, search helps are widely used and make up for a better user experience in selecting the data. There are multiple ways of adding search help to a field in the SAP UI5 application. The most commonly used way is by creating a search help dialog and binding it through the JSON model or OData model. Creating a dialog usually requires a lot of development and maintenance. It also may not provide the same user experience that a smart field provides.

Hence this blog speaks of the ways to add search help using a smart field and annotations. Annotations can be added in multiple ways such as in CDS views, Model(MPC) Ext class or directly in UI annotation files.

The blog demonstrates all three ways of adding annotations specific to search help. We will take adding a Customer field as an example in this blog. We will be using standard Value Help CDS I_Customer_VH provided by SAP for customers.

1. CDS Views

If our data is modelled using CDS Views, this approach works the best.

@Consumption.valueHelpDefinition is the annotation that helps us define the value help to be used.

CDS View: Annotation

2. MPC Ext Class

This scenario is suitable when the data is modelled through the entities in SEGW. The properties of an entity can be annotated using the Model class ( MPC_EXT ) before the service's metadata is generated. The annotation for Search Help can be added using class cl_fis_shlp_annotation.

Model Class Extension: Annotation

3. UI Annotation

The third way is to add the annotation in the annotation file on the UI. We must make sure to add the CDS View that is being used as a collection path is part of the service's metadata. For the CDS view to appear in the metadata one should add the CDS View as Data Source Reference if we are using a gateway (SEGW) object or add it as an association if we are exposing CDS View as an OData Service.

UI Annotation

 

Now implement the smart field in the form. The element renders the search help through annotations defined.

 

Smartfield

The smart field renders the search help and generates a value help dialog without writing a single line of code in the controller.

 

Customer field with Search Help

 

Search help dialog generated from annotations

 

The idea behind writing this blog is to help you build a search help much faster and accelerate your app development.

Thanks for reading the blog. Hope this blog will help you in your implementation. Please feel free to submit your questions/feedback through the comments.