Skip to content

Search Kit Displays

SearchKit Displays are responsible for rendering the results of a SavedSearch query, either as html content, or in some other form.

Display Types

Each Display has a "type". Most types (Table, List, Grid) are intended to render as part of a webpage (see Embedding Displays), but a few types have specialized output such as an Autocomplete display which populates a form dropdown-select, or an Entity display which writes to a SQL table. Such displays which do not render markup belong to the "non-viewable" grouping.

Creating a New Display Type

An extension can add new display types in addition to the ones included with Search Kit (Table, List, etc).

  1. Add the new display type to the search_display_type option list (typically using a managed entity similar to the one in SearchKit extension).
  2. Create an AngularJS module.
  3. In the module's .ang.php file, set 'basePages' => ['civicrm/search', 'civicrm/admin/search'] and 'exports' => ['name-of-your-search-display'].
  4. Add an admin component (ex: searchAdminDisplayList.component.js)
  5. Add a display component (ex: crmSearchDisplayList.component.js)

Embedding Displays

It's often useful to place search displays into other contexts such as dashboards, tabs, modal popups, or standalone pages. This process is called embedding.

SearchKit leverages Afform for its embedding features. To prepare a SearchDisplay for embedding, first create an Afform (or place it in an existing Afform), and then embed that Afform in the desired place.

Why go through Afform

While it's technically possible to directly embed a SearchKit display by itself, Afform provides a lot of preprocessing that you'd otherwise have to do manually; notably it adds the entire SearchDisplay configuration settings to the markup. See the AfformSearchMetadataInjector class for details.