[ADF-2451] Reviewed docs for components (#3061)

* [ADF-2451] Reviewed tasklist docs

* [ADF-2451] Reviewed docs for content node components

* [ADF-2451] Fixed tslint error

* [ADF-2463] Moved core components to subfolder (#3062)

* [ADF-2443] renaming getDifferentPageSize to getDefaultPageSize (#3060)

* [ADF-2443] renaming getDifferentPageSize to getDefaultPageSize

* [ADF-2443] fixed method call for demo shell

* Add data-automation-id to an error message displayed on the Tag Page. (#3064)

* Update upload-drag-area.component.md (#3067)

* [ADF-2443] fixed documentation (#3066)

* [ADF-2451] Reviewed tasklist docs

* [ADF-2451] Reviewed docs for content node components

* [ADF-2451] Fixed tslint error
This commit is contained in:
Andy Stark 2018-03-13 12:11:13 +00:00 committed by Eugenio Romano
parent c3e2588e35
commit d563dbbd77
7 changed files with 181 additions and 119 deletions

View File

@ -1,7 +1,9 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-12
---
# Breadcrumb Component
Indicates the current position within a navigation hierarchy.
@ -25,13 +27,64 @@ Indicates the current position within a navigation hierarchy.
| root | `string` | `null` | (optional) Name of the root element of the breadcrumb. You can use this property to rename "Company Home" to "Personal Files" for example. You can use an i18n resource key for the property value. |
| rootId | `string` | `null` | (optional) The id of the root element. You can use this property to set a custom element the breadcrumb should start with. |
| target | `DocumentListComponent` | | (optional) Document List component to operate with. The list will update when the breadcrumb is clicked. |
| transform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. |
| transform | `(node: any) => any` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| navigate | `EventEmitter<PathElementEntity>` | Emitted when the user clicks on a breadcrumb. |
| navigate | `EventEmitter<PathElementEntity>` | Emitted when the user clicks on a breadcrumb. |
## Details
### Using the transform function
The function supplied in the `transform` property lets you modify the Node object that the component
uses to find the "crumbs" for the list. You can use this, for example, to remove unwanted items from
the list by altering the node's `path.elements` property.
Below is an example of how you might do this with the
[Content Node Selector component](content-node-selector.component.md). In this case, you pass the
transform function via the `breadcrumbTransform` property of `ContentNodeSelectorComponentData` during
initialization:
```ts
const data: ContentNodeSelectorComponentData = {
title: title,
actionName: action,
currentFolderId: contentEntry.parentId,
imageResolver: this.imageResolver.bind(this),
rowFilter : this.rowFilter.bind(this, contentEntry.id),
isSelectionValid: this.hasEntityCreatePermission.bind(this),
breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
select: select
};
this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
```
A transform function to remove the "Sites" folder from the path would look something like this:
```ts
private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
if (node && node.path && node.path.elements) {
const elements = node.path.elements;
if (elements.length > 1) {
if (elements[1].name === 'Sites') {
elements.splice(1, 1);
}
}
}
return node;
}
```
Below, the breadcrumb is shown before and after the transform function is applied:
![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png)
## See also

View File

@ -1,11 +1,15 @@
---
Added: v2.1.0
Status: Active
Last reviewed: 2018-03-12
---
# Content Node Selector Panel component
Opens a [Content Node Selector](content-node-selector.component.md) in its own dialog window.
![Content Node Selector screenshot](docassets/images/ContentNodeSelector.png)
## Basic Usage
```html
@ -21,60 +25,22 @@ Opens a [Content Node Selector](content-node-selector.component.md) in its own d
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| currentFolderId | string | null | Node ID of the folder currently listed |
| dropdownHideMyFiles | boolean | false | Hide the "My Files" option added to the site list by default. [See More](sites-dropdown.component.md) |
| dropdownSiteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | | custom site for site dropdown same as siteList. [See More](sites-dropdown.component.md#properties) |
| rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
| imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
| pageSize | number | 10 | Number of items shown per page in the list |
| isSelectionValid | ValidationFunction | defaultValidation | Function used to decide if the selected node has permission to be the chosen. The defaultValidation always returns true. |
| breadcrumbTransform | (node) => any | null | Action to be performed to the chosen/folder node before building the breadcrumb UI. Can be useful in case a custom formatting is needed to the breadcrumb, so changing the node's path elements that help build the breadcrumb can be done through this function. |
#### Using breadcrumbTransform example
Before opening the Content Node Selector, you can add a breadcrumbTransform function to the ContentNodeSelectorComponentData to make changes to what is displayed on the breadcrumb. For example, something like this:
```
const data: ContentNodeSelectorComponentData = {
title: title,
actionName: action,
currentFolderId: contentEntry.parentId,
imageResolver: this.imageResolver.bind(this),
rowFilter : this.rowFilter.bind(this, contentEntry.id),
isSelectionValid: this.hasEntityCreatePermission.bind(this),
breadcrumbTransform: this.changeBreadcrumbPath.bind(this), // here is the transform function
select: select
};
this.openContentNodeDialog(data, 'adf-content-node-selector-dialog', '630px');
```
where the transform function could be something like this:
```
private changeBreadcrumbPath(node: MinimalNodeEntryEntity) {
if (node && node.path && node.path.elements) {
const elements = node.path.elements;
if (elements.length > 1) {
if (elements[1].name === 'Sites') {
elements.splice(1, 1);
}
}
}
return node;
}
```
and here is the display of the breadcrumb before and after transform:
![Content Node Selector breadcrumbTransfrom before/after screenshot](docassets/images/breadcrumbTransform.png)
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| currentFolderId | `string` | `null` | Node ID of the folder currently listed. |
| dropdownHideMyFiles | `boolean` | `false` | Hide the "My Files" option added to the site list by default. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
| dropdownSiteList | `SitePaging` | `null` | Custom site for site dropdown same as siteList. See the [Sites Dropdown component](sites-dropdown.component.md) for more information. |
| rowFilter | `RowFilter` | `null` | Custom row filter function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
| imageResolver | `ImageResolver` | `null` | Custom image resolver function. See the [Document List component](document-list.component.md#custom-row-filter) for more information. |
| pageSize | `number` | | Number of items shown per page in the list. |
| isSelectionValid | `ValidationFunction` | `defaultValidation` | Function used to decide if the selected node has permission to be selected. Default value is a function that always returns true. |
| breadcrumbTransform | `(node: any) => any` | | Transformation to be performed on the chosen/folder node before building the breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb. You can change the path elements from the node that are used to build the breadcrumb using this function. |
### Events
| Name | Description |
| ---- | ----------- |
| select | Emitted when the user has chosen an item |
| Name | Type | Description |
| ---- | ---- | ----------- |
| select | `EventEmitter<MinimalNodeEntryEntity[]>` | Emitted when the user has chosen an item. |
## Details
@ -85,6 +51,13 @@ not manage the dialog window for you). Also, the
[Content Node Dialog service](content-node-dialog.service.md) has several methods that give you
finer control over the behavior of the dialog.
### Using the breadcrumbTransform function
The `breadcrumbTransform` property lets you modify the Node object that is used to generate the
list of breadcrumbs. You can use this, for example, to remove path elements that are not
relevant to the use case. See the [Breadcrumb component](breadcrumb.component.md) page for an
example of how to use this function.
## See also
- [Content Node Selector component](content-node-selector.component.md)

View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-12
---
# Content Node Selector component
@ -10,18 +11,6 @@ Allows a user to select items from a Content Services repository.
## Basic Usage
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| title | string | "" | Text shown at the top of the selector |
| currentFolderId | string | null | Node ID of the folder currently listed |
| dropdownHideMyFiles | boolean | false | Hide the "My Files" option added to the site list by default. [See More](sites-dropdown.component.md) |
| dropdownSiteList | [SitePaging](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SitePaging.md) | | custom site for site dropdown same as siteList. [See More](sites-dropdown.component.md#properties) |
| rowFilter | RowFilter | null | Custom row filter function. [See More](document-list.component.md#custom-row-filter) |
| imageResolver | ImageResolver | null | Custom image resolver function. [See More](document-list.component.md#custom-image-resolver) |
| pageSize | number | 10 | Number of items shown per page in the list |
### Events
| Name | Description |
@ -115,6 +104,14 @@ a row filter to hide document nodes in a folder selector. See the
[Advanced Usage and Customization](document-list.component.md#advanced-usage-and-customization)
section of the Document List page to learn how these functions are implemented.
### Using the breadcrumbTransform function
The `breadcrumbTransform` property of `ContentNodeSelectorComponentData` lets you modify
the Node object that is used to generate the
list of breadcrumbs. You can use this, for example, to remove path elements that are not
relevant to the use case. See the [Breadcrumb component](breadcrumb.component.md) page for an
example of how to use this function.
## See also
- [Document list component](document-list.component.md)

View File

@ -1,7 +1,9 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-12
---
# Task List component
Renders a list containing all the tasks matched by the parameters specified.
@ -16,7 +18,43 @@ Renders a list containing all the tasks matched by the parameters specified.
</adf-tasklist>
```
You can pass schema as data adapter for the tasklist like shown below :
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appId | `number` | | The id of the app. |
| processInstanceId | `string` | | The Instance Id of the process. |
| processDefinitionKey | `string` | | The Definition Key of the process. |
| state | `string` | | Current state of the process. Possible values are: `completed`, `active`. |
| assignment | `string` | | The assignment of the process. Possible values are: "assignee" (the current user is the assignee), candidate (the current user is a task candidate", "group_x" (the task is assigned to a group where the current user is a member, no value(the current user is involved). |
| sort | `string` | | Define the sort order of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| name | `string` | | Name of the tasklist. |
| landingTaskId | `string` | | Define which task id should be selected after reloading. If the task id doesn't exist or nothing is passed then the first task will be selected. |
| data | `any` | | Data source object that represents the number and the type of the columns that you want to show. |
| selectionMode | `string` | `'single'` | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| presetColumn | `string` | | Custom preset column schema in JSON format. |
| multiselect | `boolean` | `false` | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| page | `number` | `0` | The page number of the tasks to fetch. |
| size | `number` | See description | The number of tasks to fetch. Default value: 25. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| rowClick | `EventEmitter<string>` | Emitted when a task in the list is clicked |
| rowsSelected | `EventEmitter<any[]>` | Emitted when rows are selected/unselected |
| success | `EventEmitter<any>` | Emitted when the task list is loaded |
| error | `EventEmitter<any>` | Emitted when an error occurs. |
## Details
This component displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
### Setting the column schema
You can pass a [DataTableAdapter instance](datatable-adapter.interface.md)
to set a column schema for the tasklist as shown below :
```ts
let data = new ObjectDataTableAdapter(
@ -49,7 +87,7 @@ let data = new ObjectDataTableAdapter(
</adf-tasklist>
```
You can also use HTML-based schema declaration like shown below:
Alternatively, you can use an HTML-based schema declaration:
```html
<adf-tasklist ...>
@ -60,9 +98,7 @@ You can also use HTML-based schema declaration like shown below:
</adf-tasklist>
```
You can also use static custom schema declaration as shown below:
define static custom schema in the app.config.json as shown below json format.
You can also set a static custom schema declaration in `app.config.json` as shown below:
```json
"adf-task-list": {
@ -92,7 +128,7 @@ define static custom schema in the app.config.json as shown below json format.
</adf-tasklist>
```
You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
You can use an HTML-based schema and an `app.config.json` custom schema declaration at the same time:
```json
"adf-task-list": {
@ -131,7 +167,7 @@ You can also use both HTML-based and app.config.json custom schema declaration a
### Pagination strategy
adf-tasklist also supports pagination and the same can be used as shown below.
The Tasklist also supports pagination as shown in the example below:
```html
<adf-tasklist
@ -148,38 +184,6 @@ adf-tasklist also supports pagination and the same can be used as shown below.
</adf-pagination>
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| appId | string | | The id of the app. |
| processDefinitionKey | string | | The processDefinitionKey of the process. |
| processInstanceId | string | | The processInstanceId of the process. |
| presetColumn | string | | The presetColumn of the custom schema to fetch. |
| page | number | 0 | The page of the tasks to fetch. |
| size | number | 25 | The number of tasks to fetch. |
| assignment | string | | The assignment of the process. <ul>Possible values are: <li>assignee : where the current user is the assignee</li> <li>candidate: where the current user is a task candidate </li><li>group_x: where the task is assigned to a group where the current user is a member of.</li> <li>no value: where the current user is involved</li> </ul> |
| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
| state | string | | Define state of the processes. Possible values are: `completed`, `active` |
| hasIcon | boolean | true | Toggle the icon on the left . |
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
| sort | string | | Define the sort of the processes. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
| data | [DataTableAdapter](datatable-adapter.interface.md) | | JSON object that represent the number and the type of the columns that you want show (see the [example](#datatableadapter-example) section below) |
### Events
| Name | Description |
| ---- | ----------- |
| success | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked |
| rowsSelected | Raised when the a row is selected/unselected |
## Details
This component displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
### DataTableAdapter example
See the [DataTableAdapter](datatable-adapter.interface.md) page for full details of the interface and its standard

View File

@ -60,6 +60,11 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
@Input()
target: DocumentListComponent;
/** Transformation to be performed on the chosen/folder node before building
* the breadcrumb UI. Can be useful when custom formatting is needed for the
* breadcrumb. You can change the path elements from the node that are used to
* build the breadcrumb using this function.
*/
@Input()
transform: (node) => any;

View File

@ -50,30 +50,57 @@ const defaultValidation = () => true;
})
export class ContentNodeSelectorPanelComponent implements OnInit {
/** Node ID of the folder currently listed. */
@Input()
currentFolderId: string = null;
/** Hide the "My Files" option added to the site list by default.
* See the [Sites Dropdown component](sites-dropdown.component.md)
* for more information.
*/
@Input()
dropdownHideMyFiles: boolean = false;
/** Custom site for site dropdown same as siteList. See the
* [Sites Dropdown component](sites-dropdown.component.md)
* for more information.
*/
@Input()
dropdownSiteList: SitePaging = null;
/** Custom row filter function. See the
* [Document List component](document-list.component.md#custom-row-filter)
* for more information.
*/
@Input()
rowFilter: RowFilter = null;
/** Custom image resolver function. See the
* [Document List component](document-list.component.md#custom-row-filter)
* for more information.
*/
@Input()
imageResolver: ImageResolver = null;
/** Number of items shown per page in the list. */
@Input()
pageSize: number;
/** Function used to decide if the selected node has permission to be selected.
* Default value is a function that always returns true.
*/
@Input()
isSelectionValid: ValidationFunction = defaultValidation;
/** Transformation to be performed on the chosen/folder node before building the
* breadcrumb UI. Can be useful when custom formatting is needed for the breadcrumb.
* You can change the path elements from the node that are used to build the
* breadcrumb using this function.
*/
@Input()
breadcrumbTransform: (node) => any;
/** Emitted when the user has chosen an item. */
@Output()
select: EventEmitter<MinimalNodeEntryEntity[]> = new EventEmitter<MinimalNodeEntryEntity[]>();

View File

@ -61,23 +61,23 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
/* The id of the app. */
/** The id of the app. */
@Input()
appId: number;
/* The Instance Id of the process. */
/** The Instance Id of the process. */
@Input()
processInstanceId: string;
/* The Definition Key of the process. */
/** The Definition Key of the process. */
@Input()
processDefinitionKey: string;
/* Current state of the process. Possible values are: `completed`, `active`. */
/** Current state of the process. Possible values are: `completed`, `active`. */
@Input()
state: string;
/* The assignment of the process. Possible values are: "assignee" (the current user
/** The assignment of the process. Possible values are: "assignee" (the current user
* is the assignee), candidate (the current user is a task candidate", "group_x" (the task
* is assigned to a group where the current user is a member,
* no value(the current user is involved).
@ -85,53 +85,56 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
@Input()
assignment: string;
/* Define the sort order of the processes. Possible values are : `created-desc`,
/** Define the sort order of the processes. Possible values are : `created-desc`,
* `created-asc`, `due-desc`, `due-asc`
*/
@Input()
sort: string;
/** Name of the tasklist. */
@Input()
name: string;
/* Define which task id should be selected after reloading. If the task id doesn't
/** Define which task id should be selected after reloading. If the task id doesn't
* exist or nothing is passed then the first task will be selected.
*/
@Input()
landingTaskId: string;
/* Data source object that represents the number and the type of the columns that
/** Data source object that represents the number and the type of the columns that
* you want to show.
*/
@Input()
data: DataTableAdapter;
/* Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
/** Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode,
* you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for
* multiple rows.
*/
@Input()
selectionMode: string = 'single'; // none|single|multiple
/** Custom preset column schema in JSON format. */
@Input()
presetColumn: string;
/* Toggles multiple row selection, renders checkboxes at the beginning of each row */
/** Toggles multiple row selection, renders checkboxes at the beginning of each row */
@Input()
multiselect: boolean = false;
/* Emitted when a task in the list is clicked */
/** Emitted when a task in the list is clicked */
@Output()
rowClick: EventEmitter<string> = new EventEmitter<string>();
/* Emitted when rows are selected/unselected */
/** Emitted when rows are selected/unselected */
@Output()
rowsSelected: EventEmitter<any[]> = new EventEmitter<any[]>();
/* Emitted when the task list is loaded */
/** Emitted when the task list is loaded */
@Output()
success: EventEmitter<any> = new EventEmitter<any>();
/** Emitted when an error occurs. */
@Output()
error: EventEmitter<any> = new EventEmitter<any>();
@ -140,11 +143,11 @@ export class TaskListComponent implements OnChanges, AfterContentInit, Paginated
layoutPresets = {};
pagination: BehaviorSubject<Pagination>;
/* The page number of the tasks to fetch. */
/** The page number of the tasks to fetch. */
@Input()
page: number = 0;
/* The number of tasks to fetch. */
/** The number of tasks to fetch. Default value: 25. */
@Input()
size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems;