Enable the search function in Mockserver for apps using Fiori Elements

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:

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!