Global search button

Renders a button that opens the global search modal.

Node name : global-search-button

Attributes

Attribute	Type	Required	Default value	Description
label	`bool`, `string`	`false`	`true`	Label of the button.
on-search	`string`	`false`		Name of the search UI method.
on-key-enter	`string`	`false`		Name of the method to call when the user presses the Enter key.

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-button 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.

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

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.