When the Live Search configuration file (livesearch.json) exists in the app folder its configuration will be applied to the current app.
To apply Live Search on the client level see Client configuration !!! FIX ME LINK !!!). To apply on the form field level directly, see Form development !!! FIX ME LINK !!!).
The top level element is an object which contains settings and fields properties.
Example of a json file with two fields, customer and taskType, where Live Search is applied. A more comprehensive example is at the end of this articale.
{
"fields": {
"customer":{
"method": "businessPartners.get"
},
"taskType":{
"method": "mopTaskTypes.get",
"label": [ "taskType", "description" ],
"select": true,
"cache": true
}
}
}
The following table shows all Live Search settings that can be configured if needed:
| Property | Description | Default |
|---|---|---|
| startLength | Minimum number of character that should be typed before Live Search can be triggered. | 2 |
| maxItems | The maximum number of items that will be loaded and displayed in the drop down list. | 50 |
| maxSelectItems | The maximum number of items for select fields (preloaded) | 100 |
| labelAutoFields | This attriute defines how many fields from response array will be used to compose item labels | 3 |
| labelSeparator | A separator string between values that constitute item label | " " |
| delay | Live Search will be triggered if there is a pause in typing for the given time (milliseconds) | 200 |
Note: all these settings are preconfigured and optimal for most use cases.
Example of Live Search file with some settings modified:
{
"settings": {
"startLength": 3,
"maxItems": 100
}
}
How to define a Live Search field? Use the following field properties:
| Property | Description | Example |
|---|---|---|
| method | API method that will serve search requests | “items.get” |
| params | Method input parameters. The params value is an object with list of assignments. See Parameters section below for explanation. Optional. | {“id”:“name”} |
| select | When set to true the lve search will pre-load the options so they will be available as drop-down list. It may be usefull when the returned list is quite small (< 100 elements). Optional, default is false. | true |
| value | With this property you can choose which field (column) from the response will be used to provide the value for your input field. If not provided then the first field of the response array will be used to provide the value. Optional. | “locationAlias” |
| label | A list of fields from the response arrays that will constitute options shown in the drop-down list. This way a custom items may be constructed from chosen fields. Optional - by default, the first two fields of the response array are used to create list labels. | [“locationAlias”, “warehouse”] |
| cache | When set to true the field will cache preloaded values on app level. Applicable to fields with “select”:true only. Optional, default is false - the field will be updated evry time the form is opened. The cache is recommended for perfomance reasons if the list of values changes very rarely. | true |
How to define method parameters?
Provide a list of assignments: “param-name” : value, where param-name is one of the method input parameters. The value may be one of the following:
If variables or expressions are used then the parameters are automatically evaluated when the live search is triggered.
Note: the key value (search phrase) is sent automatically as “freetextSearch” dedicated parameter if it is not provided explicitly as parameter (recommended).
Example of a livesearch.json file with both settings and fields:
{
"settings": {
"startLength": 2,
"maxItems": 50,
"maxSelectItems": 100,
"labelAutoFields": 3,
"labelSeparator": " ",
"delay": 200
},
"fields": {
"customer":{
"method": "businessPartners.get"
},
"taskType":{
"method": "mopTaskTypes.get",
"label": [ "taskType", "description" ],
"select": true,
"cache": true
},
"resurce":{
"method": "resourceAllocations.get",
"params": {"warehouse": "warehouse", "resourceHandler": "handler"},
"value": "locationAlias",
"label": ["locationAlias", "warehouse", "locationZone", "locationId"],
"select": true
}
}
}