-
Notifications
You must be signed in to change notification settings - Fork 262
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ACS-6644 Updated config guide, added build example, fixed mistakes
- Loading branch information
1 parent
f2cfd68
commit 097751a
Showing
13 changed files
with
345 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| --- | ||
| Title: Search Building | ||
| Added: 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](#basic-implementation) | ||
| - [Used Components](#used-components) | ||
| - [Used Services](#used-services) | ||
| - [Template](#template) | ||
| - [Component](#component) | ||
| - [Search Configuration](#search-configuration) | ||
| - [Used Components](#used-components-1) | ||
| - [Template](#template-1) | ||
| - [Component](#component-1) | ||
|
|
||
| ## 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](#see-also) section. | ||
|
|
||
| ### Used Components | ||
|
|
||
| |Name|Selector|Description| | ||
| |----|--------|-----------| | ||
| |[Search Input Component](../content-services/components/search-input.component.md)|`<adf-search-input>`|Manages, formats and emits user input on search.| | ||
| |[Document List Component](../content-services/components/document-list.component.md)|`<adf-document-list>`|Displays search results.| | ||
| |[Pagination Component](../core/components/pagination.component.md)|`<adf-pagination>`|Allows to alternate between search results pages.| | ||
|
|
||
| ### Used Services | ||
|
|
||
| |Name|Description| | ||
| |----|-----------| | ||
| |[Search Query Builder Service](../content-services/services/search-query-builder.service.md)|Creates, formats and executes search query| | ||
|
|
||
| ### Template | ||
|
|
||
| ```html | ||
| <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 | ||
|
|
||
| ```ts | ||
| @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](../content-services/components/search-form.component.md)|`<adf-search-form>`|Allows to switch search configurations.| | ||
| |[Search Filter Chips](../content-services/components/search-filter-chips.component.md)|`<adf-search-filter-chips>`|Container that displays customisable search filters from configuration.| | ||
|
|
||
| For more information about search configuration please refer to [Search Configuration Guide](./search-configuration-guide.md). | ||
|
|
||
| ### Template | ||
|
|
||
| Place those components below search input for the same layout as shown on the picture above. | ||
|
|
||
| ```html | ||
| ... | ||
| <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. | ||
|
|
||
| ```ts | ||
| ... | ||
| ngOnInit() { | ||
| this.queryBuilder.resetToDefaults(); | ||
| this.queryBuilder.executed.subscribe((data) => { | ||
| this.queryBuilder.paging.skipCount = 0; | ||
| this.onSearchResultLoaded(data); | ||
| }); | ||
| } | ||
| ... | ||
| ``` | ||
| ## See Also | ||
|
|
||
| - [Search Configuration Guide](search-configuration-guide.md) | ||
| - [Search Input Component](../content-services/components/search-input.component.md) | ||
| - [Document List Component](../content-services/components/document-list.component.md) | ||
| - [Pagination Component](../core/components/pagination.component.md) | ||
| - [Search Form Component](../content-services/components/search-form.component.md) | ||
| - [Search Filter Chips](../content-services/components/search-filter-chips.component.md) | ||
| - [Search Query Builder Service](../content-services/services/search-query-builder.service.md) |
Oops, something went wrong.