inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-4152] Restructured remaining doc folders and fixed links (#4441)

Browse Source 
* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Moved proc services cloud docs to subfolders

* [ADF-4152] Fixed links in PS cloud docs

* [ADF-4152] Added subfolders and checked links for extensions and insights docs

* [ADF-4152] Fixed links in Proc cloud, Insights and Extensions docs

* [ADF-4152] Updated links in user guide

* [ADF-4152] Fixed broken links in tutorials

* [ADF-4152] Fixed remaining links in core docs

* [ADF-4152] Fixed remaining links in proc services docs

* [ADF-4152] Fixed remaining links in content services docs

* [ADF-4152] Fixed links in breaking changes docs

* [ADF-4152] Updated main README index page

* [ADF-4152] Fixed glitches with preview ext component docs
This commit is contained in:
Andy Stark
2019-03-14 22:01:55 +00:00
committed by Eugenio Romano
parent 8edf92f325
commit 31479cfaa4
80 changed files with 737 additions and 900 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
docs/process-services-cloud/components/app-list-cloud.component.md Normal file
View File

@@ -0,0 +1,46 @@
---
Title: App List Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [App List Cloud Component](../../../lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts "Defined in app-list-cloud.component.ts")
Shows all deployed cloud application instances.
## Basic Usage
```html
<adf-cloud-app-list
[layoutType]="'GRID'">
</adf-cloud-app-list>
```
### [Transclusions](../../user-guide/transclusion.md)
You can show custom content when there are no apps available by supplying an
`<adf-custom-empty-content>` section:
```html
<adf-cloud-app-list
[layoutType]="'GRID'">
<adf-custom-empty-content>
No Apps present
</adf-custom-empty-content>
</adf-cloud-app-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| layoutType | `string` | | (**required**) Defines the layout of the apps. There are two possible values, "GRID" and "LIST". |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| appClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ApplicationInstanceModel`](../../../lib/process-services-cloud/src/lib/app/models/application-instance.model.ts)`>` | Emitted when an app entry is clicked. |

124
docs/process-services-cloud/components/edit-process-filter-cloud.component.md Normal file
View File

@@ -0,0 +1,124 @@
---
Title: Edit Process Filter Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-30
---
# [Edit Process Filter Cloud component](../../../lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts "Defined in edit-process-filter-cloud.component.ts")
Shows Process Filter Details.
![edit-process-filter-cloud](../../docassets/images/edit-process-filter-cloud.component.png)
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Editing APS2 process filters](#editing-aps2-process-filters)
- [Filter properties](#filter-properties)
- [See also](#see-also)
## Basic Usage
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="appName"
[filterProperties]="filterProperties"s
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-process-filter>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| actions | `string[]` | | List of sort actions. |
| appName | `string` | | The name of the application. |
| filterProperties | `string[]` | | List of process filter properties to display |
| id | `string` | | Id of the process instance filter. |
| showFilterActions | `boolean` | true | Toggles editing of process filter actions. |
| showTitle | `boolean` | true | Toggles editing of the process filter title. |
| sortProperties | `string[]` | | List of sort properties to display. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterAction`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter action occurs i.e Save, SaveAs, Delete. |
| filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a process instance filter property changes. |
## Details
### Editing APS2 process filters
Use the `appName` and `id` properties to choose which process filter to edit:
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="appName">
</adf-cloud-edit-process-filter>
```
### Filter properties
You can supply various _filter properties_ to edit that will determine
which processes are found by a filter. The full set of properties is
given below:
| Name | Description |
| ---- | ----------- |
| **_appName_** | Name of the app |
| **_processInstanceId_** | Process instance ID |
| **_processName_** | Process name. |
| **_initiator_** | ID of the user who initiated the process |
| **_state_** | Execution state of the process. |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_lastModifiedFrom_** | Finds processes modified _after_ this date |
| **_lastModifiedTo_** | Finds processes modified _before_ this date |
| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "startDate". |
| **_order_** | Sort ordering of the filter results (this doesn't participate in the filtering itself) |
By default, the **_state_**, **_sort_** and **_order_** properties are
displayed in the editor. However, you can also choose which properties
to show using the `filterProperties` array.
For example, the code below initializes the editor with the **_appName_**,
**_processInstanceId_**, **_startDate_** and **_lastModified_** properties:
```ts
import { UserProcessModel } from '@alfresco/adf-core';
export class SomeComponent implements OnInit {
filterProperties: string[] = [
"appName",
"processInstanceId",
"startDate",
"lastModified"];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterActionType) {
console.log('Clicked action: ', $event);
}
```
With this configuration, only the four listed properties will be shown.
**Note:** Currently, the `sort` property has a limited set of properties
to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
## See also
- [Edit task filter cloud component](edit-task-filter-cloud.component.md)

126
docs/process-services-cloud/components/edit-task-filter-cloud.component.md Normal file
View File

@@ -0,0 +1,126 @@
---
Title: Edit Task Filter Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-30
---
# [Edit Task Filter Cloud component](../../../lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts "Defined in edit-task-filter-cloud.component.ts")
Edits Task Filter Details.
![edit-task-filter-cloud](../../docassets/images/edit-task-filter-cloud.component.png)
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Editing APS2 task filters](#editing-aps2-task-filters)
- [Filter properties](#filter-properties)
- [See also](#see-also)
## Basic Usage
```html
<adf-cloud-edit-task-filter
[id]="taskFilterId"
[appName]="appName"
[filterProperties]="filterProperties"
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-task-filter>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (required) Name of the app. |
| filterProperties | `string[]` | | List of task filter properties to display. |
| id | `string` | | (required) ID of the task filter. |
| showFilterActions | `boolean` | true | Toggles the filter actions. |
| showTitle | `boolean` | true | Toggles the title. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterActionType`](../../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a filter action occurs (i.e Save, Save As, Delete). |
| filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskFilterCloudModel`](../../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a task filter property changes. |
## Details
### Editing APS2 task filters
Use the `appName` and `id` properties to choose which task filter to edit:
```html
<adf-cloud-edit-task-filter
[id]="taskFilterId"
[appName]="appName">
</adf-cloud-edit-task-filter>
```
### Filter properties
You can supply various _filter properties_ to edit that will determine
which tasks are found by a filter. The full set of properties is
given below:
| Name | Description |
| ---- | ----------- |
| **_appName_** | Name of the app |
| **_state_** | Execution state of the task. |
| **_assignment_** | User the task is assigned to |
| **_taskName_** | Name of the task |
| **_parentTaskId_** | ID of the task's parent task |
| **_priority_** | Task priority |
| **_standAlone_** | Standalone status of the task |
| **_owner_** | User ID of the task's owner |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_processInstanceId_** | Process instance ID |
| **_lastModifiedFrom_** | Finds tasks modified _after_ this date |
| **_lastModifiedTo_** | Finds tasks modified _before_ this date |
| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "createdDate", "priority", "processDefinitionId". |
| **_order_** | Sort ordering of the filter results it can be ASC or DESC (doesn't participate in the filtering itself). |
By default, the **_state_**, **_assignment_**, **_sort_** and **_order_** properties
are displayed in the editor. However, you can also choose which properties
to show using the `filterProperties` array. For example, the code below initializes
the editor with the **_appName_**, **_processInstanceId_**, **_startDate_** and
**_lastModifiedTo_** properties:
```ts
import { UserProcessModel } from '@alfresco/adf-core';
export class SomeComponent implements OnInit {
filterProperties: string[] = [
"appName",
"processInstanceId",
"startDate",
"lastModifiedTo"];
onFilterChange(filter: TaskFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: FilterActionType) {
console.log('Clicked action: ', $event);
}
```
With this configuration, only the four listed properties will be shown.
**Note:** Currently, the `sort` property has a limited set of properties
to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
## See also
- [Edit process filter cloud component](edit-process-filter-cloud.component.md)

93
docs/process-services-cloud/components/group-cloud.component.md Normal file
View File

@@ -0,0 +1,93 @@
---
Title: Group Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-15
---
# [Group Cloud component](../../../lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts "Defined in group-cloud.component.ts")
Searches Groups.
## Basic Usage
```html
<adf-cloud-group
[appName]="'simple-app'"
[mode]="'multiple'">
</adf-cloud-group>
```
![adf-cloud-group](../../docassets/images/group-cloud.component.png)
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | Name of the application. If specified this shows the users who have access to the app. |
| mode | `string` | | User selection mode (single/multiple). |
| preSelectGroups | [`GroupModel`](../../../lib/process-services-cloud/src/lib/group/models/group.model.ts)`[]` | \[] | Array of users to be pre-selected. This pre-selects all users in multi selection mode and only the first user of the array in single selection mode. |
| roles | `string[]` | \[] | Role names of the groups to be listed. |
| title | `string` | | Title of the field |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| removeGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../../lib/process-services-cloud/src/lib/group/models/group.model.ts)`>` | Emitted when a group is removed. |
| selectGroup | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`GroupModel`](../../../lib/process-services-cloud/src/lib/group/models/group.model.ts)`>` | Emitted when a group is selected. |
## Details
### Selection Mode
You can specify either single selection or multiple selection (single
is the default):
#### Single selection
```html
<adf-cloud-group></adf-cloud-group>
```
![adf-cloud-group](../../docassets/images/group-cloud.component-single.png)
#### Multiple selection
```html
<adf-cloud-group
[mode]="'multiple'">
</adf-cloud-group>
```
![adf-cloud-group](../../docassets/images/group-cloud.component-multiple-mode.png)
### Pre-selection
Usage example:
```ts
import { ObjectDataTableAdapter } from '@alfresco/adf-core';
@Component({...})
export class MyComponent {
groups: any;
constructor() {
this.groups =
[
{id: 1, name: 'Group 1'},
{id: 2, name: 'Group 2'}
];
}
}
```
```html
<adf-cloud-group
[mode]="'multiple'"
[preSelectGroups]="groups">
</adf-cloud-group>
```

39
docs/process-services-cloud/components/people-cloud.component.md Normal file
View File

@@ -0,0 +1,39 @@
---
Title: People Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-18
---
# [People Cloud Component](../../../lib/process-services-cloud/src/lib/task/start-task/components/people-cloud/people-cloud.component.ts "Defined in people-cloud.component.ts")
Allows one or more users to be selected (with auto-suggestion) based on the input parameters.
## Basic Usage
```html
<adf-cloud-people
[appName]="'simple-app'"
[mode]="'multiple'">
</adf-cloud-people>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | Name of the application. If specified, this shows the users who have access to the app. |
| mode | `string` | | User selection mode (single/multiple). |
| preSelectUsers | [`IdentityUserModel`](../../../lib/core/userinfo/models/identity-user.model.ts)`[]` | | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username |
| roles | `string[]` | | Role names of the users to be listed. |
| validate | `Boolean` | false | This flag enables the validation on the preSelectUsers passed as input. In case the flag is true the components call the identity service to verify the validity of the information passed as input. Otherwise, no check will be done. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| removeUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/userinfo/models/identity-user.model.ts)`>` | Emitted when a selected user is removed in multi selection mode. |
| selectUser | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`IdentityUserModel`](../../../lib/core/userinfo/models/identity-user.model.ts)`>` | Emitted when a user is selected. |
| warning | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an warning occurs. |

37
docs/process-services-cloud/components/process-filters-cloud.component.md Normal file
View File

@@ -0,0 +1,37 @@
---
Title: Process Filters Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [Process Filters Cloud Component](../../../lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts "Defined in process-filters-cloud.component.ts")
Lists all available process filters and allows to select a filter.
## Basic Usage
```html
<adf-cloud-process-filters
[appName]="currentAppName"
[showIcons]="true">
</adf-cloud-process-filters>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (required) The application name |
| filterParam | [`FilterParamsModel`](../../../lib/process-services/task-list/models/filter.model.ts) | | (optional) The filter to be selected by default |
| showIcons | `boolean` | false | (optional) Toggles showing an icon by the side of each filter |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when any error occurs while loading the filters |
| filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter is selected/clicked |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when filters are loaded successfully |

51
docs/process-services-cloud/components/process-header-cloud.component.md Normal file
View File

@@ -0,0 +1,51 @@
---
Title: Process Header Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-03-08
---
# [Process Header Cloud Component](../../../lib/process-services-cloud/src/lib/process/process-header/components/process-header-cloud.component.ts "Defined in process-header-cloud.component.ts")
Shows all the information related to a process instance.
![adf-cloud-process-header](../../docassets/images/adf-cloud-process-header.png)
## Basic Usage
```html
<adf-cloud-process-header
[appName]="appName"
[processInstanceId]="processInstanceId">
</adf-cloud-process-header>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (Required) The name of the application. |
| processInstanceId | `string` | | (Required) The id of the process instance. |
## Details
The component populates an internal array of
[`CardViewModel`](../../core/components/card-view.component.md) with the information that we want to display.
By default all properties are displayed:
**_id_**, **_name_**, **_description_**, **_status_**, **_initiator_**, **_startDate_**, **_lastModified_**, **_parentId_**, **_businessKey_**.
However, you can also choose which properties to show using a configuration in `app.config.json`:
```json
"adf-cloud-process-header": {
"presets": {
"properties" : [ "name", "status", "initiator", "parentId"]
}
}
```
With this configuration, only the four listed properties will be shown.

191
docs/process-services-cloud/components/process-list-cloud.component.md Normal file
View File

@@ -0,0 +1,191 @@
---
Title: Process Instance List Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2018-11-09
---
# [Process Instance List Cloud component](../../../lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts "Defined in process-list-cloud.component.ts")
Renders a list containing all the process instances matched by the parameters specified.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Setting Sorting Order for the list](#setting-sorting-order-for-the-list)
- [Pagination strategy](#pagination-strategy)
- [See also](#see-also)
## Basic Usage
**app.component.html**
```html
<adf-cloud-process-list
[appName]="'app-name'">
</adf-cloud-process-list>
```
### [Transclusions](../../user-guide/transclusion.md)
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the process list is empty:
```html
<adf-cloud-process-list>
<adf-custom-empty-content>
Your Content
</adf-custom-empty-content>
<adf-cloud-process-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | "" | The name of the application. |
| appVersion | `string` | "" | The related application version. |
| businessKey | `string` | "" | Filter the tasks to display only the ones with this businessKey value. |
| id | `string` | "" | Filter the processes to display only the ones with this ID. |
| initiator | `string` | "" | Name of the initiator of the process. |
| multiselect | `boolean` | false | Toggles multiple row selection and renders checkboxes at the beginning of each row |
| name | `string` | "" | Filter the processes to display only the ones with this name. |
| presetColumn | `string` | | Custom preset column schema in JSON format. |
| processDefinitionId | `string` | "" | Filter the processes to display only the ones with this process definition ID. |
| processDefinitionKey | `string` | "" | Filter the processes to display only the ones with this process definition key. |
| 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. |
| sorting | [`ProcessListCloudSortingModel`](../../../lib/process-services-cloud/src/lib/process/process-list/models/process-list-sorting.model.ts)`[]` | | Array of objects specifying the sort order and direction for the list. The sort parameters are for BE sorting. |
| status | `string` | "" | Filter the processes to display only the ones with this status. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while loading the list of process instances from the server. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a row in the process list is clicked. |
| rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any[]>` | Emitted when rows are selected/unselected. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the list of process instances has been loaded successfully from the server. |
## Details
You can define a custom schema for the list in the `app.config.json` file and access it with the
`presetColumn` property as shown below:
```json
"`adf-cloud-process-list`": {
"presets": {
"customSchema": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
```html
<adf-cloud-process-list
[appName]="'appName'">
</adf-cloud-process-list>
```
You can also define the schema in the HTML using the
[Data column component](../../core/components/data-column.component.md). You can combine this with schema
information defined in `app.config.json` as in the example below:
```json
"adf-cloud-process-list": {
"presets": {
"customSchema": [
{
"key": "id",
"type": "text",
"title": "Id",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
<!-- {% raw %} -->
```html
<adf-cloud-process-list
[appName]="'appName'" >
<data-columns>
<data-column key="key" title="title" class="full-width name-column">
<ng-template let-entry="$implicit">
<div>{{getFullName(entry.row.obj.assignee)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-cloud-process-list>
```
These are all the available columns that can be displayed in this component:
**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, **_startDate_** and **_status_**.
### Setting Sorting Order for the list
You can specify a sorting order as shown in the example below:
```ts
let sorting = [{ orderBy: 'status', direction: 'desc' }];
```
```html
<adf-cloud-process-list
[appName]="'appName'"
[sort]="sorting">
</adf-cloud-process-list>
```
<!-- {% endraw %} -->
### Pagination strategy
The Process Instance List also supports pagination:
```html
<adf-cloud-process-list
[appId]="'1'"
[page]="page"
[size]="size"
#processList>
</adf-cloud-process-list>
<adf-pagination
*ngIf="processList"
[target]="processList"
[supportedPageSizes]="supportedPages"
#processListPagination>
</adf-pagination>
```
## See also
- [Data column component](../../core/components/data-column.component.md)
- [Data Table Adapter interface](../../core/interfaces/datatable-adapter.interface.md)
- [Pagination component](../../core/components/pagination.component.md)

57
docs/process-services-cloud/components/start-process-cloud.component.md Normal file
View File

@@ -0,0 +1,57 @@
---
Title: Start Process Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [Start Process Cloud Component](../../../lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts "Defined in start-process-cloud.component.ts")
Starts a process.
![adf-start-process](../../docassets/images/startProcess.png)
## Basic Usage
```html
<adf-cloud-start-process
[appName]="YOUR_APP_NAME">
</adf-cloud-start-process>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (required) Name of the app. |
| maxNameLength | `number` | | Maximum length of the process name. |
| name | `string` | "" | Name of the process. |
| processDefinitionName | `string` | | Name of the process definition. |
| showSelectProcessDropdown | `boolean` | true | Show/hide the process dropdown list. |
| variables | `Map<string, object>[]` | | Variables to attach to the payload. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when the starting process is cancelled |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when an error occurs. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceCloud`](../../../lib/process-services-cloud/src/lib/process/start-process/models/process-instance-cloud.model.ts)`>` | Emitted when the process is successfully started. |
## Details
### Starting a process with a default name and a pre-selected process definition name
```html
<adf-cloud-start-process
[appId]="YOUR_APP_ID"
[name]="PROCESS_NAME"
[processDefinitionName]="PROCESS_DEFINITION_NAME">
</adf-cloud-start-process>
```
You can use the `processDefinitionName` property to select which process will be selected by default on the dropdown (when there is more than one process to choose from). Use the `name` property to set the name shown on the dropdown item.
If the app contains only one process definition, this process definition will be selected by default

38
docs/process-services-cloud/components/start-task-cloud.component.md Normal file
View File

@@ -0,0 +1,38 @@
---
Title: Start Task Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [Start Task Cloud Component](../../../lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.ts "Defined in start-task-cloud.component.ts")
Creates/starts a new task for the specified app.
![adf-cloud-start-task](../../docassets/images/adf-cloud-start-task.png)
## Basic Usage
```html
<adf-cloud-start-task
[appName]="YOUR_APP_NAME">
</adf-cloud-start-task>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (required) Name of the app. |
| maxNameLength | `number` | | Maximum length of the task name. |
| name | `string` | "" | Name of the task. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the cancel button is clicked by the user. |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task is successfully created. |

56
docs/process-services-cloud/components/task-filters-cloud.component.md Normal file
View File

@@ -0,0 +1,56 @@
---
Title: Task Filters Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [Task Filters Cloud component](../../../lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.ts "Defined in task-filters-cloud.component.ts")
Shows all available filters.
## Basic Usage
```html
<adf-cloud-task-filters></adf-cloud-task-filters>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | Display filters available to the current user for the application with the specified name. |
| filterParam | [`FilterParamsModel`](../../../lib/process-services/task-list/models/filter.model.ts) | | Parameters to use for the task filter cloud. If there is no match then the default filter (the first one in the list) is selected. |
| showIcons | `boolean` | false | Toggles display of the filter's icons. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs during loading. |
| filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskFilterCloudModel`](../../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a filter in the list is clicked. |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the list is loaded. |
## Details
### Filtering APS2 task filters
Use the `filterParam` property to restrict the range of filters that are shown:
```html
<adf-cloud-task-filters
[filterParam]="{name:'My tasks'}">
</adf-cloud-task-filters>
```
You can use properties from [`FilterParamsModel`](../../../lib/process-services/task-list/models/filter.model.ts)
as the value of `filterParam` as shown in the table below:
| Name | Type | Description |
| ---- | ---- | ----------- |
| id | string | The id of the task filter |
| name | string | The name of the task filter, lowercase is checked |
| key | string | The key of the task filter |
| index | string | The zero-based position of the filter in the array. |

59
docs/process-services-cloud/components/task-header-cloud.component.md Normal file
View File

@@ -0,0 +1,59 @@
---
Title: Task Header Cloud Component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-18
---
# [Task Header Cloud Component](../../../lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts "Defined in task-header-cloud.component.ts")
Shows all the information related to a task.
![adf-task-header](../../docassets/images/adf-task-header.png)
## Basic Usage
```html
<adf-cloud-task-header
[appName]="appName"
[taskId]="taskId">
</adf-cloud-task-header>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | | (Required) The name of the application. |
| readOnly | `boolean` | false | Toggles Read Only Mode. This disables click selection and editing for all cells. |
| taskId | `string` | | (Required) The id of the task. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| claim | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task is claimed. |
| unclaim | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task is unclaimed (ie, requeued). |
## Details
The component populates an internal array of
[CardViewModel](../../core/components/card-view.component.md) with the information that we want to display.
By default all properties are displayed:
**_assignee_**, **_status_**, **_priority_**, **_dueDate_**, **_category_**, **_parentName_**, **_created_**, **_id_**, **_description_**, **_formName_**.
However, you can also choose which properties to show using a configuration in `app.config.json`:
```json
"adf-cloud-task-header": {
"presets": {
"properties" : [ "assignee", "status", "priority", "parentName"]
}
}
```
With this configuration, only the four listed properties will be shown.

221
docs/process-services-cloud/components/task-list-cloud.component.md Normal file
View File

@@ -0,0 +1,221 @@
---
Title: Task List Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-08
---
# [Task List Cloud component](../../../lib/process-services-cloud/src/lib/task/task-list/components/task-list-cloud.component.ts "Defined in task-list-cloud.component.ts")
Renders a list containing all the tasks matched by the parameters specified.
## Contents
- [Basic Usage](#basic-usage)
- [Transclusions](#transclusions)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Setting the column schema](#setting-the-column-schema)
- [Setting Sorting Order for the list](#setting-sorting-order-for-the-list)
- [Pagination strategy](#pagination-strategy)
- [DataTableAdapter example](#datatableadapter-example)
- [DataColumn Features](#datacolumn-features)
- [See also](#see-also)
## Basic Usage
```html
<adf-cloud-task-list
[appName]="'APPLICATION-NAME'" >
</adf-cloud-task-list>
```
### [Transclusions](../../user-guide/transclusion.md)
Any content inside an `<adf-custom-empty-content>` sub-component will be shown
when the task list is empty:
```html
<adf-cloud-task-list>
<adf-custom-empty-content>
Your Content
</adf-custom-empty-content>
<adf-cloud-task-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | "" | The name of the application. |
| assignee | `string` | "" | The assignee 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). |
| createdDate | `string` | "" | Filter the tasks. Display only tasks created on the supplied date. |
| dueDate | `string` | "" | Filter the tasks. Display only tasks with dueDate equal to the supplied date. |
| id | `string` | "" | Filter the tasks. Display only tasks with id equal to the supplied value. |
| lastModifiedFrom | `string` | "" | Filter the tasks. Display only tasks with lastModifiedFrom equal to the supplied date. |
| lastModifiedTo | `string` | "" | Filter the tasks. Display only tasks with lastModifiedTo equal to the supplied date. |
| multiselect | `boolean` | false | Toggles multiple row selection, rendering a checkbox at the beginning of each row. |
| name | `string` | "" | Filter the tasks. Display only tasks with the supplied name. |
| owner | `string` | "" | Filter the tasks. Display only tasks with owner equal to the supplied value. |
| parentTaskId | `string` | "" | Filter the tasks. Display only tasks with parentTaskId equal to the supplied value. |
| presetColumn | `string` | | Custom preset column schema in JSON format. |
| priority | `number` | | Filter the tasks. Display only tasks with priority equal to the supplied value. |
| processDefinitionId | `string` | "" | Filter the tasks. Display only tasks with processDefinitionId equal to the supplied value. |
| processInstanceId | `string` | "" | Filter the tasks. Display only tasks with processInstanceId equal to the supplied value. |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use the Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| sorting | [`TaskListCloudSortingModel`](../../../lib/process-services-cloud/src/lib/task/task-list/models/task-list-sorting.model.ts)`[]` | | Specifies how the table should be sorted. The parameters are for BE sorting. |
| standAlone | `boolean` | false | Filter the tasks. Display only the tasks that belong to a process in case is false or tasks that doesn't belong to a process in case of true. |
| status | `string` | "" | Filter the tasks. Display only tasks with status equal to the supplied value. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
| rowClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task in the list is clicked |
| rowsSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any[]>` | Emitted when rows are selected/unselected |
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the task list is loaded |
## Details
This component displays lists of tasks related to the application name insterted. Extra filtering can be provided by applying extra input parameters.
### Setting the column schema
You can use an HTML-based schema declaration to set a column schema for the tasklist as shown below:
```html
<adf-cloud-task-list ...>
<data-columns>
<data-column key="name" title="NAME" class="full-width name-column"></data-column>
<data-column key="created" title="Created" class="hidden"></data-column>
</data-columns>
</adf-cloud-task-list>
```
You can also set a static custom schema declaration in `app.config.json` as shown below:
```json
"adf-cloud-task-list": {
"presets": {
"customSchema": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
```html
<adf-cloud-task-list
[appId]="'1'"
[presetColumn]="'customSchema'">
</adf-cloud-task-list>
```
You can use an HTML-based schema and an `app.config.json` custom schema declaration at the same time:
```json
"adf-cloud-task-list": {
"presets": {
"customSchema": [
{
"key": "id",
"type": "text",
"title": "Id",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
<!-- {% raw %} -->
```html
<adf-cloud-task-list
[appName]="'appName'">
<data-columns>
<data-column key="assignee" title="Assignee" class="full-width name-column">
<ng-template let-entry="$implicit">
<div>{{getFullName(entry.row.obj.assignee)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-cloud-task-list>
```
<!-- {% endraw %} -->
### Setting Sorting Order for the list
You can specify a sorting order as shown in the example below:
```ts
let sorting = { orderBy: 'created', direction: 'desc' };
```
```html
<adf-cloud-task-list
[appId]="'1'"
[sorting]="[sorting]">
</adf-cloud-task-list>
```
### Pagination strategy
The Tasklist also supports pagination as shown in the example below:
```html
<adf-cloud-task-list #taskCloud
[appName]="'APPLICATION-NAME'">
</adf-cloud-task-list>
<adf-pagination [target]="taskCloud"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
```
### DataTableAdapter example
See the [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) page for full details of the interface and its standard
implementation, [`ObjectDataTableAdapter`](../../../lib/core/datatable/data/object-datatable-adapter.ts). Below is an example of how you can set up the adapter for a
typical tasklist.
```json
[
{"type": "text", "key": "id", "title": "Id"},
{"type": "text", "key": "name", "title": "Name", "cssClass": "full-width name-column", "sortable": true},
{"type": "text", "key": "formKey", "title": "Form Key", "sortable": true},
{"type": "text", "key": "created", "title": "Created", "sortable": true}
]
```
### DataColumn Features
You can customize the styling of a column and also add features like tooltips and automatic translation of column titles. See the [`DataColumn`](../../../lib/core/datatable/data/data-column.model.ts) page for more information about these features.
## See also
- [Data column component](../../core/components/data-column.component.md)
- [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts)
- [Pagination component](../../core/components/pagination.component.md)