search-ui

This bundle offers a user interface for searching in multiple data sources. If a search result is selected, the actions that are configured in this bundle are performed.

Search results are provided by the SearchService service implementation of the search-api bundle.

The API of this bundle is described in detail in the API documentation.

Usage

No configuration is required. Default values are applied.

The widget is registered at the component system with the widget role search-ui.

Configuration reference

The following code sample shows all configurable properties and their default values:

"search-ui": {
    "Config": {
        "actions": [
            "zoomto",
            "highlight",
            "openpopup"
        ],
        "maxResultsPerGroup": 5,
        "showTotalResultsCount": false,
        "placeholderText": "${search.placeholder}",
        "searchDelay": 100,
        "zoomto-point-scale": 1000,
        "<action-property>": "value"
    }
}

Property	Type	Description
`actions`	Array	A list of actions to execute when a search result is selected. For a list of available actions, see map-actions.
`maxResultsPerGroup`	Number	The maximum number of results shown per result group.
`showTotalResultsCount`	Boolean	To show the total number of results per result group, set this property to `true`.
`placeholderText`	String	Placeholder text for the search input field. Default is "Search for ..." message (with translation support).
`searchDelay`	Number	The delay in milliseconds to wait until a new search is executed. Default is 100 milliseconds.
`zoomto-point-scale`	Number	Scale to zoom to if geometry is of type `point`.

Configure actions

For more information about configuration options of the default actions, see the map-actions documentation.

Use cases

How to add custom actions

For more information about adding custom actions, see map-actions.

How to define the order of search results

This bundle shows search results in an order that matches the search priority of the given data sources:

If data sources have no or equal priority, search results are displayed in the order they become available.
If the search priorities of given data sources are configured individually, search results of higher prioritized data sources are displayed before results of lower prioritized data sources.
Since results of lower prioritized data sources are not displayed before the results of higher prioritized data sources, we recommend to only configure fast data sources with a higher priority.

The following code sample shows an app configuration with different stores:

The Countries store has the highest search priority (searchPriority is 1).
The Cities store has a lower search priority (searchPriority is 2).
The Addresses and Streets stores have the same but lowest priority (searchPriority is 3).

"agssearch": {
    "AGSStore":[
        {
            "id": "Countries",
            "url": "https://myserver/arcgis/rest/services/Countries/MapServer/0",
            "searchPriority": 1
        },
        {
            "id": "Cities",
            "url": "https://myserver/arcgis/rest/services/Cities/MapServer/0",
            "searchPriority": 2
        },
        {
            "id": "Addresses",
            "url": "https://myserver/arcgis/rest/services/Addresses/MapServer/0",
            "searchPriority": 3
        },
        {
            "id": "Streets",
            "url": "https://myserver/arcgis/rest/services/Streets/MapServer/0",
            "searchPriority": 3
        }
    ]
}

The search results are displayed in the following order:

Countries
Cities (after the search for Countries has finished)
Addresses or Streets (after the search for Cities has also finished) depending on which store is faster.

If searchPriority is not explicitly defined for a store, the priority value 50 is applied.

Reset the search-ui programmatically

To reset the current search programmatically, for example because a new workflow is started, perform the following steps:

First inject the search-ui.SearchUiService to your bundle:

"components": [
    {
        "name": "MyComponent",
        "references": [{
            "name": "searchUiService",
            "providing": "search-ui.SearchUiService"
        }]
    }
]

To reset the search, use the reset() method as follows:

searchUiService.reset();

Set a text in the search-ui programmatically

The previously described reset() method also accepts a searchText value, which sets a text in the input field, but will not trigger a search:

searchUiService.reset({ searchText: "My search term" });