Implement Search field with case-INSENSITIVE by SAP UI5

Hello guys,

Continue to read if you're sapui5 developer, or you work closely with UI development.
At the time I write this post, SAP UI5 and Odata does not support filter with case sensitivity.
Odata provide some filter parameter that help you to filter with case-INSENSITIVe.

However, you hardly modify the URI of ODATA service in your font end SAP UI5 code. Most of us use API provided from SAP, we only provide the parameter to API function, then let the API from SAPUI5 library handle the ODATA service URL. In short, I mean we cannot, or hardly, modifying the odata GET request as we want, but use the standard API instead.

Return to the main topic, we need to write a function to filter the ODATA get request so that we get the returned data filtered as the way we want (filter with case-INSENSITIVE).
For example: you type "test" in the search field, then you should get the results with all the entries containing "test", or "Test", or "TEST"...

However, you can't do that easily, you need to:
- Change Odata request URL: which can't be done by UI5 code.
- Support from backed: this is common solution; if you can work with back-end team to solve it.
- Modifying code from front-end: this is tricky & risky; you should only try once 2 above methods can't be used. And in this post, I will show you how to do this.

First, you can have background knowledge about this case by reading these discussion:
https://github.com/SAP/openui5/issues/1141
https://stackoverflow.com/questions/13495905/odata-query-filter-conditions-and-case-sensitivity
https://stackoverflow.com/questions/36209231/odata-do-case-insensitive-comparison-using-expressionvisitor

OK, then you can see that if you can't get support from backend, the only way to edit the ODATA URL. But you can do it INDIECTLY: by replacing the normal argument with the new one:

For example:
new Filter('tolower(THERAPY_NAME)', FilterOperator.Contains, sQuery)

I added 'tolowver' to transform the received text to lower case. Then we need to transform the 'search key' into lowwer key also:
var sQuery = oEvent.getParameter("query").toLowerCase();
sQuery = "'" + sQuery + "'";

We need to add '' wraping the search key because of strange bug I found when I added 'tolower()' to the filter. This is just work around so i'm not sure how long it would work, but it worth trying for now.

Thanks for reading! Pht.
---V---