Search Kit - AngularJS UI¶
Displays¶
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'}]}">
</crm-search-display-list>
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 SearchKit 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 SearchKit (Table, List, etc).
- Add the name of the new display type to the
search_display_type
option list.hook_civicrm_managed()
is recommended. - Create an AngularJS module.
- In the module's
.ang.php
file, set'basePages' => ['civicrm/admin/search']
and'exports' => ['name-of-your-search-display']
. - Add an admin component (ex:
searchAdminDisplayList.component.js
) - Add a display component (ex:
crmSearchDisplayList.component.js
)