Skip to Content

Developing app using SAP Fiori Elements provides you many features out of the box.

For example if you created your app based on the List Report template you can easily enable the search function by adding the searchable annotation to your entity set in your metadata:

<EntitySet 
    Name="Product" 
    EntityType="SHOPPING.Product" 
    sap:searchable="true" 
    sap:content-version="1" />

This will provide you an overall search field in the filter area above the list for your application:

If you run your application with mockdata you might notice that searching will never give you any results yet.

Every search will trigger a request containing our search keywords as an url parameter, e.g.

GET Products?search=some keywords

To get actual results we need to handle this search parameter manually in our mockserver.

For this purpose we are going to use a lightweight fuzzy-search library Fuse.js which helps us searching for keywords within our mockdata.

So simply grab the latest (minified) version and copy it e.g. to webapp/localService/lib.

After this we can load this file in our mockserver.js, which will give us a new global class Fuse.

/* global Fuse, URLSearchParams */
sap.ui.define([
    "sap/ui/core/util/MockServer",
    "hpa/cei/amp/program/localService/lib/fuse" 
], function(MockServer) {
    "use strict";
    // ...     
});

Now it is finally time to handle the search parameter.

We are doing this by attaching a handler to the after get event for our entity set (e.g. Products).

For easily parsing the url params we are using an instance of URLSearchParams (but you could use any fancy parsing algorithm here).

In case we receive a search param we first check for any already filtered data or fall back to all available entities.

The final step is to use an instance of Fuse to do all the searching for us and return the results.

oMockServer.attachAfter(MockServer.HTTPMETHOD.GET, function(oEvent) {
  var oXhr = oEvent.getParameter("oXhr");
  var oUrlParams = new URLSearchParams(oXhr.url);
  var sSearch = oUrlParams.has("search") ? oUrlParams.get("search") : "";
  if (sSearch) {
    var oFilteredData = oEvent.getParameter("oFilteredData");
    var aEntities = 
      oFilteredData.results.length ? 
        oFilteredData.results : oMockServer.getEntitySetData(sEntity);
    var oFuse = new Fuse(aEntities, {
      threshold: 0.0, // require a perfect match
      keys: oUrlParams.has("$select") ? 
        oUrlParams.get("$select").split(",") : null
    });
    oFilteredData.results = oFuse.search(oUrlParams.get("search"));
  }
}, sEntity);

Happy searching!

 

 

 

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

  1. Nabi Zamani

    Thanks for sharing, l love it! All the SAPUI5 tutorials search by using OData filters (i.e. Step 24 of the Walkthrough tutorial). As we know this is not a free-text search. Your example illustrates how you can mock the custom query option “search” which is supported by SAP GW for free-text search (even for OData V2, so it’s an extension by SAP to OData V2). It’s worth to mention that in OData V4 there is finally a $search system query option.

    (1) 

Leave a Reply