SearchArea recipe

Source: 02_SearchArea/ · three flavours of SearchArea shown side-by-side in a Pivot so you can compare them.

What it teaches

• Default — SearchArea() with nothing customised. Hits the workspace's default search endpoint and renders the standard result cards.
• With facets — Pre-filter the query with OnSearch(sr => sr.SetBeforeTypesFacet("...")) and enable the facet sidebar with .WithFacets(). The right starting point for "search inside a single node type".
• Custom card — Replace the search-result card entirely with Renderer(r => r.WithCustomizedRenderer((hit, rendered) => new ReplacedResult(...))). Use this when you need a denser list, custom row commands, or to surface fields the default card doesn't show.
• Appending a button next to the search box with SearchBox(b => b.AppendToSearchBox(...)).

Three flavours

// 1. Default
SearchArea()

// 2. Filter to one node type + facet sidebar
SearchArea()
    .OnSearch(sr => sr.SetBeforeTypesFacet(nameof(MyNodeType)))
    .WithFacets()

// 3. Take over the result card entirely
SearchArea()
    .Renderer(r => r.WithCustomizedRenderer((hit, rendered) => new ReplacedResult(hit)))
    .SearchBox(b => b.AppendToSearchBox(Button("Action").SetIcon(UIcons.Bolt)))

See also

• Mosaik.FrontEnd.LicenseServer/src/CustomersView.cs — uses WithCardCustomizer to add per-row commands (open, copy link, delete).
• Mosaik.FrontEnd.Admin/src/Notifications/Settings/NotificationSettings.cs — uses WithCustomizedRenderer to fully take over rendering.
• The Connector Recipes cover how to ingest the data this search area queries.