The Visual Builder Cloud Service Blog

Filtering SingleSelect Values as You Type

Shay Shmeltzer
Director of Product Management - Oracle

A customer has asked how they can achieve filtering of the results shown in a selectSingle component that is bound to a Service Data Provider (SDP) as they type values into the list. In this blog we'll show you how to get this behavior working.

A list that is based on an SDP doesn't hold a client side array of all the data - filtering will therefor be executed using a query sent to the server. The server returns the matching values to the client populating the SDP.

To indicate to an SDP that you want to send such filtering queries, you specify a new property to the SDP called transformsContext in your variable definition in your page's JSON. See the bold lines below:

    "employeesListSDP": {
      "type": "vb/ServiceDataProvider",
      "defaultValue": {
        "endpoint": "businessObjects/getall_Employees",
        "keyAttributes": "name",
        "itemsPath": "items",
        "responseType": "page:getallEmployeesResponse",
        "transformsContext": {
          "vb-textFilterAttributes": ["name","country"]

Note that you can specify multiple fields that the filter will add to the query - the value you typed would be searched in each of those fields. If you'll monitor the network tab you'll see a query (using the q param) that will look like this: ((name LIKE 'sea%') or (country LIKE 'sea%'))

By the way, we are planning to automatically add this property to your SDP in the next version of Visual Builder.

Here is a quick video showing how to achieve this:

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.