mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ACS-6644] review search documentation and examples for adf (#9518)
* ACS-6644 review search docs and examples * ACS-6644 change widget description to more precise * ACS-6644 small formatting fix, add new component links to main connected pages * [ACS-6644] trigger codeQL job
This commit is contained in:
Grzegorz Jaśkowski
GitHub
parent
5e886e29d1
commit
96be5a543c
@ -2,12 +2,12 @@
|
||||
Title: Search check list component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search check list component](../../../lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.ts "Defined in search-check-list.component.ts")
|
||||
|
||||
Implements a checklist [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
|
||||
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
|
||||
|
||||
|
||||
|
||||
@ -23,8 +23,8 @@ Implements a checklist [widget](../../../lib/testing/src/lib/core/pages/form/wid
|
||||
"enabled": true,
|
||||
"component": {
|
||||
"selector": "check-list",
|
||||
"pageSize": 5,
|
||||
"settings": {
|
||||
"pageSize": 5,
|
||||
"operator": "OR",
|
||||
"allowUpdateOnChange": true,
|
||||
"options": [
|
||||
@ -46,13 +46,11 @@ Implements a checklist [widget](../../../lib/testing/src/lib/core/pages/form/wid
|
||||
| operator | `string` | Logical operator to combine query fragments. Can be 'AND' or 'OR'. |
|
||||
| options | `array` | Array of objects with `name` and `value` properties. Each object defines a checkbox, labelled with `name`, that adds the query fragment in `value` to the query when enabled. |
|
||||
| allowUpdateOnChange | `boolean` | Enable/Disable the update fire event when text has been changed. By default is true. |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
This [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) displays a list of checkboxes, each of which toggles a particular query fragment
|
||||
in the search. See the [Search filter component](search-filter.component.md) for full details of how to use the widgets
|
||||
in a search query.
|
||||
This widget displays a list of checkboxes, each of which toggles a particular query fragment in the search. See the [Search filter component](search-filter.component.md) for full details of how to use the widgets in a search query.
|
||||
|
||||
In the settings, the `options` array, defines the checkboxes that toggle the supplied query
|
||||
fragments and the `operator` selects logical `AND` or `OR` to combine the fragments.
|
||||
@ -65,11 +63,10 @@ to the query:
|
||||
|
||||
The component can be set to split a long checklist into separate pages of checkboxes
|
||||
using the `pageSize` value as the number of boxes to show per page (default is 5).
|
||||
When there is more than one page, the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) will display "Show more" and "Show less"
|
||||
When there is more than one page, the widget will display "Show more" and "Show less"
|
||||
buttons as appropriate.
|
||||
|
||||
A "Clear all" button is also displayed at the bottom of the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) to clear all checked
|
||||
items in the list.
|
||||
A "Clear all" button is also displayed at the bottom of the widget to clear all checked items in the list.
|
||||
|
||||
## See also
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
Title: Search datetime range component
|
||||
Added: v4.2.0
|
||||
Status: Active
|
||||
Last reviewed: 2020-11-02
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search datetime range component](../../../lib/content-services/src/lib/search/components/search-datetime-range/search-datetime-range.component.ts "Defined in search-datetime-range.component.ts")
|
||||
@ -38,9 +38,9 @@ Implements a [search widget](../../../lib/content-services/src/lib/search/search
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to apply the query to. Required value |
|
||||
| datetimeFormat | string | Datetime format. Datetime formats used by the datetime picker are [Moment.js](https://momentjs.com/docs/#/parsing/string-format/) instances, so you can use any datetime format supported by Moment. Default is 'DD/MM/YYYY HH:mm'. |
|
||||
| datetimeFormat | string | Datetime format. Datetime formats used by the datetime picker are [date-fns](https://date-fns.org/v2.30.0/docs/format) instances, so you can use any datetime format supported by date-fns. Default is 'dd/MM/yyyy HH:mm'. |
|
||||
| maxDatetime | string | A fixed datetime that will set the maximum searchable datetime. Default is no maximum. |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
@ -51,7 +51,7 @@ in a search query.
|
||||
### Custom datetime format
|
||||
|
||||
You can set the datetime range picker to work with any datetime format your app requires. You can use
|
||||
any datetime format supported by [Moment.js](https://momentjs.com/docs/#/parsing/string-format/)
|
||||
any datetime format supported by [date-fns](https://date-fns.org/v2.30.0/docs/format)
|
||||
in the `datetimeFormat` and in the `maxDatetime` setting:
|
||||
|
||||
```json
|
||||
@ -66,7 +66,7 @@ in the `datetimeFormat` and in the `maxDatetime` setting:
|
||||
"selector": "datetime-range",
|
||||
"settings": {
|
||||
"field": "cm:created",
|
||||
"datetimeFormat": "DD-MMM-YY HH:mm:ss",
|
||||
"datetimeFormat": "dd-MMM-yy HH:mm:ss",
|
||||
"maxDatetime": "10-Mar-20 20:00"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
Title: Search Logical Filter component
|
||||
Added: v6.1.0
|
||||
Status: Active
|
||||
Last reviewed: 2023-06-01
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search Logical Filter component](../../../lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.ts "Defined in search-logical-filter.component.ts")
|
||||
@ -40,7 +40,7 @@ Implements a [search widget](../../../lib/content-services/src/lib/search/models
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field/fields to apply the query to. Required value |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/protractor/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
Title: Search number range component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search number range component](../../../lib/content-services/src/lib/search/components/search-number-range/search-number-range.component.ts "Defined in search-number-range.component.ts")
|
||||
|
||||
Implements a number range [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
|
||||
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
|
||||
|
||||
|
||||
|
||||
@ -40,7 +40,7 @@ Implements a number range [widget](../../../lib/testing/src/lib/core/pages/form/
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to to use |
|
||||
| format | string | Value format. Uses string substitution to allow all sorts of [range queries](https://docs.alfresco.com/5.2/concepts/rm-searchsyntax-ranges.html). |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
Title: Search radio component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-08-10
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search radio component](../../../lib/content-services/src/lib/search/components/search-radio/search-radio.component.ts "Defined in search-radio.component.ts")
|
||||
|
||||
Implements a radio button list [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
|
||||
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
|
||||
|
||||
|
||||
|
||||
@ -46,7 +46,7 @@ Implements a radio button list [widget](../../../lib/testing/src/lib/core/pages/
|
||||
| ---- | ---- | ----------- |
|
||||
| options | `array` | Array of objects with `name` and `value` properties. Each object defines a radio button, labelled with `name`, that adds the query fragment in `value` to the query when enabled. |
|
||||
| allowUpdateOnChange | `boolean` | Enable/Disable the update fire event when text has been changed. By default is true. |
|
||||
| hideDefaultAction | `boolean` | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | `boolean` | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
@ -57,7 +57,7 @@ query fragment in the search. This behaviour is very similar to that of the
|
||||
|
||||
The component can be set to split a long list of buttons into separate pages
|
||||
using the `pageSize` value as the number of buttons to show per page (default is 5).
|
||||
When there is more than one page, the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) will display "Show more" and "Show less"
|
||||
When there is more than one page, the widget will display "Show more" and "Show less"
|
||||
buttons as appropriate.
|
||||
|
||||
## See also
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
Title: Search slider component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search slider component](../../../lib/content-services/src/lib/search/components/search-slider/search-slider.component.ts "Defined in search-slider.component.ts")
|
||||
|
||||
Implements a numeric slider [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
|
||||
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
|
||||
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ Implements a numeric slider [widget](../../../lib/testing/src/lib/core/pages/for
|
||||
| step | number | The step between adjacent positions on the slider |
|
||||
| thumbLabel | boolean | Toggles whether the "thumb" of the slider should show the current value |
|
||||
| allowUpdateOnChange | boolean | Enable/Disable the update fire event when text has been changed. By default is true. |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -2,12 +2,12 @@
|
||||
Title: Search text component
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-11
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search text component](../../../lib/content-services/src/lib/search/components/search-text/search-text.component.ts "Defined in search-text.component.ts")
|
||||
|
||||
Implements a text input [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) for the [Search Filter component](search-filter.component.md).
|
||||
Implements a [search widget](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts) consisting of 4 inputs representing logical conditions to form search query from.
|
||||
|
||||
|
||||
|
||||
@ -45,11 +45,11 @@ Implements a text input [widget](../../../lib/testing/src/lib/core/pages/form/wi
|
||||
| ---- | ---- | ----------- |
|
||||
| field | string | Field to apply the query fragment to. Required value |
|
||||
| pattern | string | Regular expression pattern to restrict the format of the input text |
|
||||
| placeholder | string | Text displayed in the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) when the input string is empty |
|
||||
| placeholder | string | Text displayed in the widget when the input string is empty |
|
||||
| searchSuffix | string | Text to append always in the search of a string |
|
||||
| searchPrefix | string | Text to prepend always in the search of a string |
|
||||
| allowUpdateOnChange | `boolean` | Enable/Disable the update fire event when text has been changed. By default is true. |
|
||||
| hideDefaultAction | boolean | Show/hide the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) actions. By default is false. |
|
||||
| hideDefaultAction | boolean | Show/hide the widget actions. By default is false. |
|
||||
|
||||
## Details
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
Title: Search widget interface
|
||||
Added: v2.4.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-06-12
|
||||
Last reviewed: 2024-04-05
|
||||
---
|
||||
|
||||
# [Search widget interface](../../../lib/content-services/src/lib/search/models/search-widget.interface.ts "Defined in search-widget.interface.ts")
|
||||
@ -34,7 +34,7 @@ export interface SearchWidget {
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| id | `string` | | Unique identifying value for the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) |
|
||||
| id | `string` | | Unique identifying value for the widget |
|
||||
| settings | [`SearchWidgetSettings`](../../../lib/content-services/src/lib/search/models/search-widget-settings.interface.ts) | | Settings for component properties |
|
||||
| context | [`SearchQueryBuilderService`](../../content-services/services/search-query-builder.service.md) | | Instance of the [Search Query Builder service](../services/search-query-builder.service.md) to process the query |
|
||||
|
||||
@ -60,9 +60,8 @@ export interface SearchWidget {
|
||||
}
|
||||
```
|
||||
|
||||
Every [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) implementation must have an `id`, and may also support external `settings`.
|
||||
At runtime, every time a new instance of the [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) is created, it also receives a reference to the [Search Query Builder Service](../services/search-query-builder.service.md)
|
||||
so that you component can access query related information, events and methods.
|
||||
Every widget implementation must have an `id`, and may also support external `settings`.
|
||||
At runtime, every time a new instance of the widget is created, it also receives a reference to the [Search Query Builder Service](../services/search-query-builder.service.md) so that you component can access query related information, events and methods.
|
||||
|
||||
```ts
|
||||
@Component({...})
|
||||
@ -79,9 +78,8 @@ export class MyComponent implements SearchWidget, OnInit {
|
||||
|
||||
### Reading external settings
|
||||
|
||||
At runtime, ADF provides every search filter [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) with a `settings` instance,
|
||||
based on the JSON data that the administrator has provided for your [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) in the
|
||||
`app.config.json` file.
|
||||
At runtime, ADF provides every search filter widget with a `settings` instance,
|
||||
based on the JSON data that the administrator has provided for your widget in the `app.config.json` file.
|
||||
|
||||
It is your responsibility to parse the `settings` property values and also to
|
||||
convert types and set up defaults as necessary. ADF does not provide any validation
|
||||
@ -114,7 +112,7 @@ The [Search Query Builder Service](../services/search-query-builder.service.md)
|
||||
When the query is complete, it composes the fragments together alongside other settings
|
||||
that will be used when performing the actual query.
|
||||
|
||||
Every query fragment is stored and retrieved using its [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) `id`.
|
||||
Every query fragment is stored and retrieved using its widget `id`.
|
||||
It is your responsibility to format the query correctly.
|
||||
|
||||
Once your change to the query is finished, update the context and call the `update` method
|
||||
@ -157,7 +155,7 @@ export class MyAppOrComponent {
|
||||
}
|
||||
```
|
||||
|
||||
When you have done this, you can declare your [widget](../../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) in `app.config.json`
|
||||
When you have done this, you can declare your widget in `app.config.json`
|
||||
and pass custom attributes, if your component supports them:
|
||||
|
||||
```json
|
||||
|
||||
@ -158,3 +158,4 @@ class AppModule {}
|
||||
- [Search radio component](../components/search-radio.component.md)
|
||||
- [Search slider component](../components/search-slider.component.md)
|
||||
- [Search text component](../components/search-text.component.md)
|
||||
- [Search input component](../components/search-input.component.md)
|
||||
|
||||
@ -57,7 +57,7 @@ This configuration considered for searching in the application.
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Customer payout",
|
||||
"name": "Customer payout",
|
||||
"query": [
|
||||
{ "query": "TYPE:'cm:folder' OR TYPE:'cm:content'" }
|
||||
{ "query": "-TYPE:'st:site' AND -ASPECT:'st:siteContainer' AND -ASPECT:'sys:hidden'" }
|
||||
@ -290,11 +290,9 @@ The interface above also describes entries in the `search.query.categories` sect
|
||||
> **Note:** you must provide at least one category field in order to execute the query,
|
||||
> so that filters and selected facets are applied.
|
||||
|
||||
The Search Filter supports a number of widgets out of the box, each implemented
|
||||
by an ADF component. The `selector` property specifies which [widget](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) is used for
|
||||
a category:
|
||||
The Search Filter supports a number of components out of the box, each implementing an ADF [search widget interface](../../lib/content-services/src/lib/search/models/search-widget.interface.ts). The `selector` property specifies which widget is used for a category:
|
||||
|
||||
| [`Widget`](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) name | Selector | Description |
|
||||
| Widget name | Selector | Description |
|
||||
|----------------------------------------------------------------------------------------------| -------- |------------------------------------------------------------------------------|
|
||||
| [Check List](../content-services/components/search-check-list.component.md) | `check-list` | Toggles individual query fragments for the search |
|
||||
| [Date Range](../content-services/components/search-date-range.component.md) | `date-range` | Specifies a varities of options for selecting dates that a field may contain |
|
||||
@ -303,18 +301,14 @@ a category:
|
||||
| [Slider](../content-services/components/search-slider.component.md) | `slider` | Selects a single numeric value in a given range that a field may contain |
|
||||
| [Text](../content-services/components/search-text.component.md) | `text` | Specifies a text value that a field may contain |
|
||||
|
||||
See the individual [Search Widget](../interfaces/search-widget.interface.md) pages for full details of their usage and settings.
|
||||
|
||||
You can also implement your own custom search widgets. See the [Search Widget Interface](../interfaces/search-widget.interface.md) interface
|
||||
page for full details of how to do this.
|
||||
You can also implement your own custom search widgets. See the [Search Widget Interface](../content-services/interfaces/search-widget.interface.md) page for full details of how to do this.
|
||||
|
||||
#### Widget settings
|
||||
|
||||
Each type of [widget](../../lib/content-services/src/lib/search/models/search-widget.interface.ts) has its own settings.
|
||||
Each type of widget has its own settings.
|
||||
For example Number editors may parse minimum and maximum values, while Text editors can support value formats or length constraints.
|
||||
|
||||
You can use `component.settings` to pass any information to a [widget](../../lib/testing/src/lib/core/pages/form/widgets/widget.ts) using the
|
||||
[`SearchWidgetSettings`](../../lib/content-services/src/lib/search/models/search-widget-settings.interface.ts) interface:
|
||||
You can use `component.settings` to pass any information to a widget using the [`SearchWidgetSettings`](../../lib/content-services/src/lib/search/models/search-widget-settings.interface.ts) interface:
|
||||
|
||||
```ts
|
||||
export interface SearchWidgetSettings {
|
||||
@ -327,6 +321,11 @@ export interface SearchWidgetSettings {
|
||||
unit?: string;
|
||||
/* describes query format */
|
||||
format?: string;
|
||||
/* allow the user to search only within predefined options */
|
||||
allowOnlyPredefinedValues?: boolean;
|
||||
/* allow the user to predefine autocomplete options */
|
||||
autocompleteOptions?: AutocompleteOption[];
|
||||
|
||||
[indexer: string]: any;
|
||||
}
|
||||
```
|
||||
@ -594,3 +593,4 @@ then be added in each node entry response. An example partial response is shown
|
||||
- [Search radio component](../content-services/components/search-radio.component.md)
|
||||
- [Search slider component](../content-services/components/search-slider.component.md)
|
||||
- [Search text component](../content-services/components/search-text.component.md)
|
||||
- [Search input component](../components/search-input.component.md)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user