​

Idea

By default, an application based on the usoft-zero default does not have a search facility, but it does have a Filter toggle button in the top right corner of InfoPage pages:

If you click that Filter button, you get a Filter pane where you can search by field. Here, you can use the '%’ SQL wildcard. To search all people with a family name starting with the letter ‘J’, type 'J%’ in the Family Name field and press Search:

The result of this could be:

This Filter facility is probably not, or not all that you want. On the Internet, many web pages offer a generic Text Search facility. It is usually made to look something like this:

This is more "generic” than the Filter-by-field facility. It applies the text search condition to any field offered in the page, or perhaps the page does not make explicit what the search is applied to - it simply shows results.

The usoft-zero default allows you to create a generic Text Search facility as a near-default. This is a near-default and not a default because:

• The solution is part dependent on the application-specific data model.
• It is difficult to predict exactly what solution you require.

Implementation

Take the steps below to implement a search field that will search across multiple columns, for example FIRST_NAME, FAMILY_NAME and ADDRESS. The search for items with the letters "BR” below (see top right corner) has yielded results with "BR” in the name, but also with "BR” in the address:

1. In Web Designer, open the InfoPage where you want the search field. Then, in the object tree on the right, find the hidden search-field object in the navbar object:

2. For search-field, right-mouse-click to open the Property Inspector. Find the Class List property. Remove the hide fragment from the Class List value. A search field will become visible. You can view it in the preview pane in the middle of the Web Designer window. You can paint visual aspects of this field by using CSS.

3. Again in the object tree for the InfoPage, find the data source object that connects the page with the database table:

4. For the data source, right-mouse-click to open the Property Inspector. Find the Where Clause property. Set this property to the following SQL condition:

    :searchfield is null
OR  UPPER(first_name) LIKE  '%' || upper(:searchfield) || '%'
OR  UPPER(family_name) LIKE '%' || upper(:searchfield) || '%'
OR  UPPER(address) LIKE     '%' || upper(:searchfield) || '%'

The :searchfield variable in this code has been set in this snippet of Javascript:

let ds = this;
let page = datasourceGetPage(ds);
let field = page.querySelector('#SearchInput');

options.options.hostvars.searchfield = field.value;

The event responsible for executing this script is the beforeexecutequerysearchfieldhostvar event which is part of the usoft-zero default. You can find this event at the data source:

​