5.3 KiB
Title, Added
| Title | Added |
|---|---|
| Search Building | 2024-05-17 |
Search Building
This page covers the basics of creating a search page using components from this repository.
Note: Styling is covered only to a minimal necessary extent.
Contents
Basic Implementation
Most basic search requires only three components to be included in the template.
Search is executed on Enter key press and the results are shown below.
For details of used properties, methods and events please refer to documentation pages covering the components and services, linked in the tables below and See Also section.
Used Components
| Name | Selector | Description |
|---|---|---|
| Search Input Component | <adf-search-input> |
Manages, formats and emits user input on search. |
| Document List Component | <adf-document-list> |
Displays search results. |
| Pagination Component | <adf-pagination> |
Allows to alternate between search results pages. |
Used Services
| Name | Description |
|---|---|
| Search Query Builder Service | Creates, formats and executes search query |
Template
<adf-search-input
[fields]="['cm:name', 'cm:title', 'cm:description', 'TEXT', 'TAG']"
(changed)="onSearchQueryChanged($event)"
>
</adf-search-input>
<adf-document-list style="overflow-y: auto;"
#documentList
[sortingMode]="'client'"
[node]="$any(data)"
>
</adf-document-list>
<adf-pagination
[target]="documentList"
(change)="onPaginationChanged($event)"
>
</adf-pagination>
Component
@Component({
standalone: true,
imports: [SearchInputComponent, DocumentListModule, SearchModule, PaginationDirective, PaginationComponent],
selector: 'your-search',
templateUrl: './your-search.component.html',
styleUrls: ['./your-search.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class YourSearchComponent implements OnInit {
data: ResultSetPaging;
constructor(private queryBuilder: SearchQueryBuilderService) {
queryBuilder.paging = {
skipCount: 0,
maxItems: 25
};
}
ngOnInit() {
this.queryBuilder.resetToDefaults();
this.queryBuilder.updated.subscribe(() => void this.queryBuilder.execute());
this.queryBuilder.executed.subscribe((data) => {
this.queryBuilder.paging.skipCount = 0;
this.onSearchResultLoaded(data);
});
}
onSearchResultLoaded(resultSetPaging: ResultSetPaging) {
this.data = resultSetPaging;
}
onSearchQueryChanged(string: string) {
this.queryBuilder.userQuery = decodeURIComponent(string);
this.queryBuilder.update();
}
async onPaginationChanged(pagination: Pagination) {
this.queryBuilder.paging = {
maxItems: pagination.maxItems,
skipCount: pagination.skipCount
};
this.queryBuilder.update();
}
}
Search Configuration
Adding those two components allows for usage of search configurations and switching between them.
Used Components
| Name | Selector | Description |
|---|---|---|
| Search Form Component | <adf-search-form> |
Allows to switch search configurations. |
| Search Filter Chips | <adf-search-filter-chips> |
Container that displays customisable search filters from configuration. |
For more information about search configuration please refer to Search Configuration Guide.
Template
Place those components below search input for the same layout as shown on the picture above.
...
<div style="diplay: flex;">
<adf-search-form></adf-search-form>
<adf-search-filter-chips></adf-search-filter-chips>
</div>
...
Component
When adding those two components you need to remove one subscription from the ngOnInit(). No additional methods and properties are required.
...
ngOnInit() {
this.queryBuilder.resetToDefaults();
this.queryBuilder.executed.subscribe((data) => {
this.queryBuilder.paging.skipCount = 0;
this.onSearchResultLoaded(data);
});
}
...