Implement Fuzzy Search Help with UI5 Annotation for Fiori Application – Without Front End Coding

In this blog post you will learn how to implement Search Help / Suggestion with help of UI5 Annotation.

Introduction:

Fiori Elements are becoming increasingly popular. They provide a framework to generate SAPUI5 apps at run time based on metadata annotations.

Instead of generating a whole application, developers can also use Smart Controls for their existing apps, to add tables, forms, etc. in a fast way. These controls use annotations that add semantics and structures to the data, provided by the user.

All these annotations should be added to ANNOTATION XML file, explained in detail in this blog.

Target Audience:

Beginners to SAP UI5/Fiori application development

Expected Output :

After completing all steps mentioned below one will be able to achieve Suggestion and Value Help without any front end coding:

1. As soon as you start typing a letter back end call will trigger and get all the matching values suggestions as shown below

2. Search with description is also possible as below.

Steps To Follow:

1. Prerequisite: – SAP UI5 Application with Smart Filter Bar.
2. Refer: – For Sample Application with Smart Filter Barhttps://sapui5.hana.ondemand.com/#/entity/sap.ui.comp.smartfilterbar.SmartFilterBar/sample/sap.ui.comp.sample.smartfilterbar.example1
3. Create annotation File under WEBAPP folder with name as xml Example: AnnotationFileName.xml as shown below

4. Add following code to Annotation File. Change will be only at below 5 places rest all code remains same.

5. No 3/No 4/No 5 effect in UI output.

5. Details about all 5 places where annotation values should be changed: –

• 1 Target: – Provide path for property for which search help is being implemented.

In above Example  ServiceName(ZTEST_SALES_DATA_DISPLAY_SRV)

         .EntityName(SalesHeader)/

          PropertyName(SoId)

• 2 Property Value Collection Path: – Provide Entity Set Name in which search help will be handled.

In this example: SalesOrderSearchSet

• 3 Property Path: – Property Name for which value help being implemented. Ex: – SoId

• 4 String: – Property of entity set which will search and get value from backend.

In this example:- Property Name of Entity Set SalesOrderSearchSet

• 5 To enable additional columns for value help suggestion as shown below:

Example: Sales Order Description (SalesOrderDesc). This will also be part of Entity Set  SalesOrderSearchSet

6. Sap Back end: Redefine Method SALESORDERSEARCHSET_GET_ENTITYSET

7. ABAP Field Name should be same name as your Search Help Field Name to have auto                    mapping without any additional code for populating ET_ENTITYSET .

8. Fuzzy Search can be achieved with help of below Code:

9. Or you can implement your own back end logic to pass search help values to front end.

Summary :

In this blog post we have shown how to implement search help and value help suggestion for Smart Controls without any front end coding. Also one would be able to search with multiple fields.