Global search input

Renders the global search input.

Node name : global-search-input

Attributes

Attribute	Type	Required	Default value	Description
on-search	`string`	`false`		Name of the search UI method.

By default the search is based on the menu items. It is possible to add additional results like in the following example.

Examples

Example with a search UI method

UI view template

<global-search-input on-search="HandleSearchAsync" />

The name of the search UI method is HandleSearchAsync. Usually the search is done by a server method that does the server-side processing.

UI method

if (!string.IsNullOrWhiteSpace(searchText))
{
    return await ServerMethods.EntityQuickSearch.ExecuteAsync(searchText);
}

return Enumerable.Empty<GroupeIsa.Neos.Designer.Application.Abstractions.DataObjects.QuickSearchResultGroup>().ToList();

Note

The UI method must be asynchronous only because the invocation of the server method is asynchronous.

The search UI method accepts a string parameter that represents the search text and returns a list of result group.

GroupeIsa.Neos.Application.GlobalSearch.GlobalSearchResultGroup class:

Property	Type	Required	Description
Caption	`string`	`true`	The caption.
Items	`GroupeIsa.Neos.Application.GlobalSearch.GlobalSearchResultItem[]`	`true`	The group items.

GroupeIsa.Neos.Application.GlobalSearch.GlobalSearchResultItem class:

Property	Type	Required	Description
Caption	`string`	`true`	The caption.
Icon	`string`	`false`	The icon.
UIViewName	`string`	`true`	The UI view name to navigate to when the result item is selected.
FrameId	`string`	`false`	The frame identifier.
ItemId	`IDictionary<string, object>`	`false`	The item identifier of the result item.

Execute server method

public List<GlobalSearchResultGroup> Execute(string searchText)
{
    List<GlobalSearchResultGroup> groups = new();

    IQueryable<Customer> customers =
        _customerRepository
            .GetQuery()
            .Where(c => c.CompanyName.Contains(searchText) || (c.ContactName != null &&c.ContactName.Contains(searchText))
            .Take(25);
    if (customers.Any())
    {
        GlobalSearchResultGroup group = new("Customers");

        group.Items.AddRange(
            customers.Select(c => new GlobalSearchResultItem($"{c.CompanyName}{(c.ContactName != null ? $" ({c.ContactName})" : string.Empty)}")
            {
                Icon = "customer",
                UIViewName = "CustomerEditUI",
                FrameId = $"CustomerUI/{c.CustomerId}",
                ItemId = new Dictionary<string, object>() { ["Name"] = c.CustomerId },
            }));

        groups.Add(group);
    }

    return groups;
}

In this example, the server method lookups for customers whose company or contact names contain the search text. You can also search on other entities and then create new result groups to add them to the list.

Example with a key enter method

UI view template

<global-search-button on-key-enter="HandleKeyEnter"/>

The name of the method to call when the user presses the Enter key is HandleKeyEnter.

UI method

if (!string.IsNullOrWhiteSpace(searchText) && result == null)
{
    // Do something when the user presses the Enter key and any result is found.
}

The onKeyEnter UI method accepts a first string parameter that represents the search text and a second parameter of type result group list that represents the search result.

Parameter	Type	Required	Description
searchText	`string`	`true`	The search text.
result	`GroupeIsa.Neos.Application.GlobalSearch.GlobalSearchResultGroup[]`	`false`	The array of the result group.

The parameter result is null when the user presses the Enter key and no result is found.