Skip to content

Search Kit - AngularJS UI


Displays are stored in the DB as the SearchDisplay entity, and rendered on the page as AngularJS components.

Embedding Displays

Search displays can be embedded in any AngularJS content with their component tag, which requires the name of the SavedSearch, the name of the Display, the name of the entity and the configuration settings, e.g.

<crm-search-display-list search="'MySavedSearch'" display="'MyListDisplay'" api-entity="Contact" settings="{style: 'ul', limit: 50, pager: true, columns: [{key: 'id', dataType: 'Integer', type: 'field'}, {key: 'display_name', dataType: 'String', type: 'field'}]}">

That's a lot of data to insert into the markup, and it would get out-of-sync with any updates made to the SavedSearch or SearchDisplay in the database. So Search Kit implements a markup preprocessor to insert the configuration data at runtime. All it needs is the search-name and display-name and it will add the rest:

<crm-search-display-list search-name="MySavedSearch" display-name="MyListDisplay"></crm-search-display-list>

Note: The preprocessor only works on Afforms.

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 name of the new display type to the search_display_type option list. hook_civicrm_managed() is recommended.
  2. Create an AngularJS module.
  3. In the module's .ang.php file, set 'basePages' => ['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)