mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated doc folder structure and index tool (#4403)
* [ADF-4152] Initial GraphQL implementation * [ADF-4152] Schema updates * [ADF-4152] Rounded out basic fields * [ADF-4152] Added basic template functionality * [ADF-4152] Added full template generation * [ADF-4152] Moved proc services doc files to new folders * [ADF-4152] Updated README.md with section from new template * [ADF-4152] Fixed another problem with relative URLs * [ADF-4152] Fixed links and some more bugs * [ADF-4152] Removed proc services folder README file
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
75b90c5e08
commit
e74f545aa8
82
docs/process-services/components/apps-list.component.md
Normal file
82
docs/process-services/components/apps-list.component.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
Title: Apps List Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Apps List Component](../../../lib/process-services/app-list/apps-list.component.ts "Defined in apps-list.component.ts")
|
||||
|
||||
Shows all available apps.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-apps
|
||||
[layoutType]="'GRID'">
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
### [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-apps
|
||||
[layoutType]="'GRID'">
|
||||
<adf-custom-empty-content>
|
||||
No Apps present
|
||||
</adf-custom-empty-content>
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| filtersAppId | `any[]` | | Provides a way to filter the apps to show. |
|
||||
| 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)`<`[`AppDefinitionRepresentationModel`](../../../lib/process-services/task-list/models/filter.model.ts)`>` | Emitted when an app entry is clicked. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
|
||||
## Details
|
||||
|
||||
You can specify a restricted list of apps using the `filtersAppId` property. This array
|
||||
contains a list of objects containing the property values you are interested in. You can
|
||||
use any of the following properties as filters:
|
||||
|
||||
```json
|
||||
{
|
||||
"defaultAppId": "string",
|
||||
"deploymentId": "string",
|
||||
"name": "string",
|
||||
"id": "number",
|
||||
"modelId": "number",
|
||||
"tenantId": "number"
|
||||
}
|
||||
```
|
||||
|
||||
For example, if you set `filtersAppId` as follows:
|
||||
|
||||
```html
|
||||
<adf-apps
|
||||
[filtersAppId]="[
|
||||
{defaultAppId: 'tasks'},
|
||||
{deploymentId: '15037'},
|
||||
{name : 'my app name'}]">
|
||||
</adf-apps>
|
||||
```
|
||||
|
||||
...then only the Tasks app, the app with `deploymentId` 15037 and the app with "my app name" will be shown.
|
||||
|
||||
|
||||
35
docs/process-services/components/attach-form.component.md
Normal file
35
docs/process-services/components/attach-form.component.md
Normal file
@@ -0,0 +1,35 @@
|
||||
---
|
||||
Title: Attach Form component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-20
|
||||
---
|
||||
|
||||
# [Attach Form component](../../../lib/process-services/task-list/components/attach-form.component.ts "Defined in attach-form.component.ts")
|
||||
|
||||
This component can be used when there is no form attached to a task and you want to add one.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-attach-form
|
||||
[taskId]="taskid">
|
||||
</adf-attach-form>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| formKey | `any` | | Identifier of the form to attach. |
|
||||
| taskId | `any` | | Id of the task. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| cancelAttachForm | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the "Cancel" button is clicked. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the form is attached successfully. |
|
||||
38
docs/process-services/components/checklist.component.md
Normal file
38
docs/process-services/components/checklist.component.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Title: Checklist Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Checklist Component](../../../lib/process-services/task-list/components/checklist.component.ts "Defined in checklist.component.ts")
|
||||
|
||||
Shows the checklist task functionality.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-checklist
|
||||
[readOnly]="false"
|
||||
[taskId]="taskId"
|
||||
[assignee]="taskAssignee.id">
|
||||
</adf-checklist>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| assignee | `string` | | (required) The assignee id that the subtasks are assigned to. |
|
||||
| readOnly | `boolean` | false | Toggle readonly state of the form. All form widgets will render as readonly if enabled. |
|
||||
| taskId | `string` | | (required) The id of the parent task to which subtasks are attached. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| checklistTaskCreated | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskDetailsModel`](../../../lib/process-services/task-list/models/task-details.model.ts)`>` | Emitted when a new checklist task is created. |
|
||||
| checklistTaskDeleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a checklist task is deleted. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
Title: Create Process Attachment component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Create Process Attachment component](../../../lib/process-services/attachment/create-process-attachment.component.ts "Defined in create-process-attachment.component.ts")
|
||||
|
||||
Displays an Upload Component (Drag and Click) to upload the attachment to a specified process instance.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-create-process-attachment
|
||||
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
|
||||
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
|
||||
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
|
||||
</adf-create-process-attachment>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| processInstanceId | `string` | | (required) The ID of the process instance to display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while creating or uploading an attachment from the user within the component. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an attachment is successfully created or uploaded from within the component. |
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
Title: Create Task Attachment Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Create Task Attachment Component](../../../lib/process-services/attachment/create-task-attachment.component.ts "Defined in create-task-attachment.component.ts")
|
||||
|
||||
Displays an Upload Component (Drag and Click) to upload the attachment to a specified task.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-create-task-attachment
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
|
||||
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
|
||||
</adf-create-task-attachment>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| taskId | `string` | | (required) The numeric ID of the task to display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while creating or uploading an attachment from the user within the component. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an attachment is created or uploaded successfully from within the component. |
|
||||
89
docs/process-services/components/people-list.component.md
Normal file
89
docs/process-services/components/people-list.component.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
Title: People list component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [People list component](../../../lib/process-services/people/components/people-list/people-list.component.ts "Defined in people-list.component.ts")
|
||||
|
||||
Shows a list of users (people).
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
Populate the users in the component class:
|
||||
|
||||
```ts
|
||||
import { UserProcessModel } from '@alfresco/adf-core';
|
||||
|
||||
export class SomeComponent implements OnInit {
|
||||
|
||||
people: UserProcessModel[] = [
|
||||
{
|
||||
id: 1,
|
||||
email: 'john.doe@alfresco.com',
|
||||
firstName: 'John',
|
||||
lastName: 'Doe'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
email: 'jane.doe@alfresco.com',
|
||||
firstName: 'Jane',
|
||||
lastName: 'Doe'
|
||||
}
|
||||
];
|
||||
|
||||
onClickPeopleRow(user: UserProcessModel) {
|
||||
console.log('Clicked row: ', user);
|
||||
}
|
||||
|
||||
onClickPeopleAction($event: Event) {
|
||||
console.log('Clicked action: ', $event);
|
||||
}
|
||||
```
|
||||
|
||||
You can use column templates with the [people list component](people-list.component.md), since it is based on the
|
||||
[Datatable component](../../core/datatable.component.md):
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-people-list
|
||||
[users]="people"
|
||||
[actions]="true"
|
||||
(clickRow)="onClickPeopleRow($event)"
|
||||
(clickAction)="onClickPeopleAction($event)">
|
||||
<data-columns>
|
||||
<data-column key="firstName" class="people-pic">
|
||||
<ng-template let-entry="$implicit">
|
||||
{{entry.row.obj.firstName + ' ' + entry.row.obj.lastName}}
|
||||
</ng-template>
|
||||
</data-column>
|
||||
<data-column key="email" class="full-width">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div class="adf-people-email">{{ entry.row.obj.email }}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-people-list>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| actions | `boolean` | false | Toggles whether or not actions should be visible, i.e. the 'Three-Dots' menu. |
|
||||
| users | [`UserProcessModel`](../../core/user-process.model.md)`[]` | | The array of user data used to populate the people list. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| clickAction | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserEventModel`](../../../lib/process-services/task-list/models/user-event.model.ts)`>` | Emitted when the user clicks in the 'Three Dots' drop down menu for a row. |
|
||||
| clickRow | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserProcessModel`](../../core/user-process.model.md)`>` | Emitted when the user clicks a row in the people list. |
|
||||
63
docs/process-services/components/people-search.component.md
Normal file
63
docs/process-services/components/people-search.component.md
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
Title: People Search component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-14
|
||||
---
|
||||
|
||||
# [People Search component](../../../lib/process-services/people/components/people-search/people-search.component.ts "Defined in people-search.component.ts")
|
||||
|
||||
Searches users/people.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-people-search></adf-people-search>
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
You can provide a title for the search header and a label for the action button using
|
||||
special sub-components in the body of the `<adf-people-search>` element:
|
||||
|
||||
```html
|
||||
<adf-people-search ...>
|
||||
<header-title>Custom title</header-title>
|
||||
<action-button-label>Custom label</action-button-label>
|
||||
</adf-people-search>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| results | [`Observable`](http://reactivex.io/documentation/observable.html)`<`[`UserProcessModel`](../../core/user-process.model.md)`[]>` | | Parameters for displaying the list. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| closeSearch | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the "close" button is clicked. |
|
||||
| searchPeople | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when a search is performed with a new keyword. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserProcessModel`](../../core/user-process.model.md)`>` | Emitted when a user is selected and the action button is clicked. |
|
||||
|
||||
## Details
|
||||
|
||||
Usage example:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-people-search
|
||||
(searchPeople)="searchUser($event)"
|
||||
(success)="involveUser($event)"
|
||||
(closeSearch)="onCloseSearch()"
|
||||
[results]="peopleSearch$">
|
||||
<header-title>{{ 'TASK_DETAILS.LABELS.ADD_PEOPLE' | translate }}</header-title>
|
||||
<action-button-label>{{ 'PEOPLE.ADD_USER' | translate }}</action-button-label>
|
||||
</adf-people-search>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
107
docs/process-services/components/people.component.md
Normal file
107
docs/process-services/components/people.component.md
Normal file
@@ -0,0 +1,107 @@
|
||||
---
|
||||
Title: People Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [People Component](../../../lib/process-services/people/components/people/people.component.ts "Defined in people.component.ts")
|
||||
|
||||
Displays users involved with a specified task
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Details](#details)
|
||||
- [How to customize the people component behavior](#how-to-customize-the-people-component-behavior)
|
||||
- [Involve People single click and close search](#involve-people-single-click-and-close-search)
|
||||
- [Involve People single click without close search](#involve-people-single-click-without-close-search)
|
||||
- [Involve People double click and close search](#involve-people-double-click-and-close-search)
|
||||
- [Involve People double double without close search](#involve-people-double-double-without-close-search)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-people
|
||||
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-people>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| people | [`UserProcessModel`](../../core/user-process.model.md)`[]` | \[] | The array of User objects to display. |
|
||||
| readOnly | `boolean` | false | Should the data be read-only? |
|
||||
| taskId | `string` | "" | The numeric ID of the task. |
|
||||
|
||||
## Details
|
||||
|
||||
### How to customize the people component behavior
|
||||
|
||||
The [people component](people.component.md) provides two options to customize its behavior:
|
||||
|
||||
- _involveUserAndCloseSearch_: The selected user gets added and then the search section is closed
|
||||
- _involveUserWithoutCloseSearch_: The selected user gets added without closing the search section
|
||||
|
||||
This makes it easy to customize the [people component](people.component.md) to involve the user via a single or double click event:
|
||||
|
||||
### Involve People single click and close search
|
||||
|
||||
```html
|
||||
<adf-people #people
|
||||
(row-click)="people.involveUserAndCloseSearch()"
|
||||
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-people>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Involve People single click without close search
|
||||
|
||||
```html
|
||||
<adf-people #people
|
||||
(row-click)="people.involveUserWithoutCloseSearch()"
|
||||
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-people>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Involve People double click and close search
|
||||
|
||||
```html
|
||||
<adf-people #people
|
||||
(row-dblclick)="people.involveUserAndCloseSearch()"
|
||||
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-people>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Involve People double double without close search
|
||||
|
||||
```html
|
||||
<adf-people #people
|
||||
(row-dblclick)="people.involveUserWithoutCloseSearch()"
|
||||
[people]="YOUR_INVOLVED_PEOPLE_LIST"
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
[readOnly]="YOUR_READ_ONLY_FLAG">
|
||||
</adf-people>
|
||||
```
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
Title: Process Attachment List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Process Attachment List component](../../../lib/process-services/attachment/process-attachment-list.component.ts "Defined in process-attachment-list.component.ts")
|
||||
|
||||
Displays documents attached to a specified process instance.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-attachment-list
|
||||
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
|
||||
(attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER">
|
||||
</adf-process-attachment-list>
|
||||
```
|
||||
|
||||
Make sure to override the [`UploadService`](../../core/upload.service.md) with the [`ProcessUploadService`](../../../lib/process-services/task-list/services/process-upload.service.ts)
|
||||
|
||||
```ts
|
||||
import { UploadService } from '@alfresco/adf-core';
|
||||
import { ProcessUploadService } from '@alfresco/adf-process-services';
|
||||
|
||||
@Component({
|
||||
selector: 'my-custom-process-attachment',
|
||||
providers: [
|
||||
{ provide: UploadService, useClass: ProcessUploadService }
|
||||
]
|
||||
})
|
||||
export class MyCustomProcessAttachmentComponent {
|
||||
constructor() {}
|
||||
}
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
Any content inside the `<adf-process-attachment-list>` element will be shown when
|
||||
the list is empty:
|
||||
|
||||
```html
|
||||
<adf-process-attachment-list ...>
|
||||
<div><!-- Custom empty list message goes here --></div>
|
||||
</adf-process-attachment-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
A default template will be used if you don't supply a custom one to override it:
|
||||
|
||||
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| disabled | `boolean` | false | Disable/Enable read-only mode for attachment list. |
|
||||
| processInstanceId | `string` | | (**required**) The ID of the process instance to display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| attachmentClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the attachment is double-clicked or the view option is selected from the context menu by the user from within the component. Returns a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) representing the object that was clicked. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the attachment list is not able to fetch the attachments (eg, following a network error). |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the attachment list has fetched all the attachments. Returns a list of attachments. |
|
||||
|
||||
## Details
|
||||
|
||||
### How to Add Drag and Drop Functionality
|
||||
|
||||
You can wrap the attachment list with an
|
||||
[Upload Drag Area component](../../content-services/upload-drag-area.component.md)
|
||||
to let the user upload attachments to empty lists. When you do this, you can also supply
|
||||
a custom _no content template_ (using <adf-empty-list>) to invite the user to add their attachments:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-upload-drag-area
|
||||
[rootFolderId]="YOUR_PROCESS_ID"
|
||||
[showNotificationBar]="BOOLEAN">
|
||||
<adf-process-attachment-list
|
||||
[processId]="YOUR_PROCESS_ID"
|
||||
(attachmentClick)="YOUR_HANDLER">
|
||||
<div adf-empty-list> //no content template
|
||||
<adf-empty-list>
|
||||
<div adf-empty-list-header>{{This List is empty}}</div>
|
||||
<div adf-empty-list-body>{{Drag and drop to upload}}</div>
|
||||
<div adf-empty-list-footer>
|
||||
<img [src]="Your custom image URL"></div>
|
||||
</adf-empty-list>
|
||||
</div>
|
||||
</adf-process-attachment-list>
|
||||
</adf-upload-drag-area>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
Title: Process Instance Comments component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
|
||||
# [Process Instance Comments component](../../../lib/process-services/process-comments/process-comments.component.ts "Defined in process-comments.component.ts")
|
||||
|
||||
Displays comments associated with a particular process instance and allows the user to add new comments.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-instance-comments
|
||||
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
|
||||
</adf-process-instance-comments>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| processInstanceId | `string` | | (**required**) The numeric ID of the process instance to display comments for. |
|
||||
| readOnly | `boolean` | true | Should the comments be read-only? |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
Title: Process Filters Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-09-14
|
||||
---
|
||||
|
||||
# [Process Filters Component](../../../lib/process-services/process-list/components/process-filters.component.ts "Defined in process-filters.component.ts")
|
||||
|
||||
Collection of criteria used to filter process instances, which may be customized by users.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [How filter the activiti process filters](#how-filter-the-activiti-process-filters)
|
||||
- [`FilterParamsModel`](../../../lib/process-services/task-list/models/filter.model.ts)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-instance-filters
|
||||
appId="1001">
|
||||
</adf-process-instance-filters>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | Display filters available to the current user for the application with the specified ID. |
|
||||
| appName | `string` | | Display filters available to the current user for the application with the specified name. |
|
||||
| filterParam | [`FilterProcessRepresentationModel`](../../../lib/process-services/process-list/models/filter-process.model.ts) | | The parameters to filter the task filter. If there is no match then the default one (ie, the first filter in the list) is selected. |
|
||||
| showIcon | `boolean` | true | Toggle to show or hide the filter's icon. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| filterClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`UserProcessInstanceFilterRepresentation`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/activiti-rest-api/docs/UserProcessInstanceFilterRepresentation.md)`>` | Emitted when the user selects a filter from the list. |
|
||||
| filterSelected | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceFilterRepresentation`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/activiti-rest-api/docs/ProcessInstanceFilterRepresentation.md)`>` | Emitted when a process filter is selected. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstanceFilterRepresentation`](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/activiti-rest-api/docs/ProcessInstanceFilterRepresentation.md)`[]>` | Emitted when the list of filters has been successfully loaded from the server. |
|
||||
|
||||
## Details
|
||||
|
||||
This component displays a list of available filters and allows the user to select any given
|
||||
filter as the active filter.
|
||||
|
||||
The most common usage is in driving a process instance list to allow the user to choose which
|
||||
process instances are displayed in the list.
|
||||
|
||||
If both `appId` and `appName` are specified then `appName` will take precedence and `appId` will be ignored.
|
||||
|
||||
### How filter the activiti process filters
|
||||
|
||||
```html
|
||||
<adf-process-instance-filters
|
||||
[filterParam]="{index: 0}">
|
||||
</adf-process-instance-filters>
|
||||
```
|
||||
|
||||
You can use inside the filterParam one of the properties defined by [`FilterParamsModel`](../../../lib/process-services/task-list/models/filter.model.ts) (see below).
|
||||
|
||||
### FilterParamsModel
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "number",
|
||||
"name": "string",
|
||||
"index": "number"
|
||||
}
|
||||
```
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| id | string | The id of the task filter. |
|
||||
| name | string | The name of the task filter, lowercase is checked. |
|
||||
| index | number | Zero-based position of the filter in the array. |
|
||||
|
||||
## See also
|
||||
|
||||
- [Process Filter service](../services/process-filter.service.md)
|
||||
@@ -0,0 +1,37 @@
|
||||
---
|
||||
Title: Process Details component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Process Details component](../../../lib/process-services/process-list/components/process-instance-details.component.ts "Defined in process-instance-details.component.ts")
|
||||
|
||||
Displays detailed information about a specified process instance
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-instance-details
|
||||
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
|
||||
</adf-process-instance-details>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| processInstanceId | `string` | | (required) The numeric ID of the process instance to display. |
|
||||
| showRefreshButton | `boolean` | true | Toggles whether to show or hide the refresh button. |
|
||||
| showTitle | `boolean` | true | Toggles whether to show or hide the title. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| processCancelled | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the current process is cancelled by the user from within the component. |
|
||||
| showProcessDiagram | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the "show diagram" button is clicked. |
|
||||
| taskClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskDetailsEvent`](../../../lib/process-services/task-list/models/task-details.event.ts)`>` | Emitted when a task is clicked. |
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
Title: Process Instance Details Header component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Process Instance Details Header component](../../../lib/process-services/process-list/components/process-instance-header.component.ts "Defined in process-instance-header.component.ts")
|
||||
|
||||
Sub-component of the process details component, which renders some general information about the selected process.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-instance-header
|
||||
processInstance="localProcessDetails">
|
||||
</adf-process-instance-details>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| processInstance | [`ProcessInstance`](../../../lib/process-services/process-list/models/process-instance.model.ts) | | (**required**) Full details of the process instance to display information about. |
|
||||
|
||||
## Details
|
||||
|
||||
### Choosing which properties are displayed
|
||||
|
||||
By default all the properties are displayed:
|
||||
**_status_**, **_ended_**, **_category_**, **_businessKey_**, **_assignee_**, **_created_**,**_id_**, **_description_**.
|
||||
|
||||
You can customize which properties are displayed using a setting in `app.config.json`.
|
||||
The configuration looks like the following sample:
|
||||
|
||||
```json
|
||||
"adf-process-instance-header": {
|
||||
"presets": {
|
||||
"properties" : [ "status", "ended", "created", "id"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Only the items in the `properties` array will be displayed.
|
||||
@@ -0,0 +1,35 @@
|
||||
---
|
||||
Title: Process Instance Tasks component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Process Instance Tasks component](../../../lib/process-services/process-list/components/process-instance-tasks.component.ts "Defined in process-instance-tasks.component.ts")
|
||||
|
||||
Lists both the active and completed tasks associated with a particular process instance
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-process-instance-tasks
|
||||
processInstanceId="YOUR_PROCESS_INSTANCE_ID"
|
||||
showRefreshButton="true">
|
||||
</adf-process-instance-tasks>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| processInstanceDetails | [`ProcessInstance`](../../../lib/process-services/process-list/models/process-instance.model.ts) | | (**required**) The ID of the process instance to display tasks for. |
|
||||
| showRefreshButton | `boolean` | true | Toggles whether to show a refresh button next to the list of tasks to allow it to be updated from the server. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| taskClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskDetailsEvent`](../../../lib/process-services/task-list/models/task-details.event.ts)`>` | Emitted when a task is clicked. |
|
||||
191
docs/process-services/components/process-list.component.md
Normal file
191
docs/process-services/components/process-list.component.md
Normal file
@@ -0,0 +1,191 @@
|
||||
---
|
||||
Title: Process Instance List
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Process Instance List](../../../lib/process-services/process-list/components/process-list.component.ts "Defined in process-list.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-process-instance-list
|
||||
[appId]="'1'"
|
||||
[state]="'all'">
|
||||
</adf-process-instance-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-process-instance-list>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-custom-empty-content>
|
||||
<adf-process-instance-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | The id of the app. |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source to define the datatable. |
|
||||
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row |
|
||||
| page | `number` | 0 | The page number of the processes to fetch. |
|
||||
| presetColumn | `string` | | Custom preset column schema in JSON format. |
|
||||
| processDefinitionId | `string` | | The Definition Id of the process. |
|
||||
| processInstanceId | `number \| string` | | The id of the process instance. |
|
||||
| selectFirstRow | `boolean` | true | Toggles default selection of the first row |
|
||||
| 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. |
|
||||
| size | `number` | | The number of processes to fetch in each page. |
|
||||
| sort | `string` | | Defines the sort ordering of the list. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc`. |
|
||||
| state | `string` | | Defines the state of the processes. Possible values are `running`, `completed` and `all` |
|
||||
|
||||
### 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. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessListModel`](../../../lib/process-services/process-list/models/process-list.model.ts)`>` | 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-process-list": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-process-instance-list
|
||||
[appId]="'1'"
|
||||
[state]="'all'"
|
||||
[presetColumn]="'customSchema'">
|
||||
</adf-process-instance-list>
|
||||
```
|
||||
|
||||
You can also define the schema in the HTML using the
|
||||
[Data column component](../../core/data-column.component.md). You can combine this with schema
|
||||
information defined in `app.config.json` as in the example below:
|
||||
|
||||
```json
|
||||
"adf-process-list": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "id",
|
||||
"type": "text",
|
||||
"title": "Id",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-process-instance-list
|
||||
[appId]="'1'"
|
||||
[presetColumn]="'customSchema'">
|
||||
<data-columns>
|
||||
<data-column key="key" title="title" class="full-width name-column">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div>{{entry.row.obj.assignee | fullName}}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-process-instance-list>
|
||||
```
|
||||
|
||||
### Setting Sorting Order for the list
|
||||
|
||||
you can pass sorting order as shown in the example below:
|
||||
|
||||
```ts
|
||||
// Possible values are : `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
|
||||
let sortParam = 'created-desc';
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-process-instance-list
|
||||
[appId]="'1'"
|
||||
[sort]="sortParam">
|
||||
</adf-process-instance-list>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
### Pagination strategy
|
||||
|
||||
The Process Instance List also supports pagination:
|
||||
|
||||
```html
|
||||
<adf-process-instance-list
|
||||
[appId]="'1'"
|
||||
[page]="page"
|
||||
[size]="size"
|
||||
#processList>
|
||||
</adf-process-instance-list>
|
||||
<adf-pagination
|
||||
*ngIf="processList"
|
||||
[target]="processList"
|
||||
[supportedPageSizes]="supportedPages"
|
||||
#processListPagination>
|
||||
</adf-pagination>
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Data column component](../../core/data-column.component.md)
|
||||
- [Data Table Adapter interface](../../core/datatable-adapter.interface.md)
|
||||
- [Pagination component](../../core/pagination.component.md)
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
Title: Select App Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Select App Component](../../../lib/process-services/app-list/select-apps-dialog-component.ts "Defined in select-apps-dialog-component.ts")
|
||||
|
||||
Shows all available apps and returns the selected app.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
import { SelectAppsDialogComponent } from '@alfresco/adf-process-services';
|
||||
|
||||
constructor(private dialog: MatDialog) {
|
||||
}
|
||||
|
||||
startSelectDialog(){
|
||||
const dialogRef = this.dialog.open(SelectAppsDialogComponent, {
|
||||
width: '630px',
|
||||
panelClass: 'adf-version-manager-dialog'
|
||||
});
|
||||
|
||||
dialogRef.afterClosed().subscribe(selectedProcess => {
|
||||
this.processId = selectedProcess.id;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
## See Also
|
||||
|
||||
- [Start process component](start-process.component.md)
|
||||
177
docs/process-services/components/start-process.component.md
Normal file
177
docs/process-services/components/start-process.component.md
Normal file
@@ -0,0 +1,177 @@
|
||||
---
|
||||
Title: Start Process component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Start Process component](../../../lib/process-services/process-list/components/start-process.component.ts "Defined in start-process.component.ts")
|
||||
|
||||
Starts a process.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [Starting a process with a default name and pre-selected process definition name](#starting-a-process-with-a-default-name-and-pre-selected-process-definition-name)
|
||||
- [Starting a process not included in an app](#starting-a-process-not-included-in-an-app)
|
||||
- [Custom data example](#custom-data-example)
|
||||
- [Attaching a File to the start form of the process](#attaching-a-file-to-the-start-form-of-the-process)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-start-process
|
||||
[appId]="YOUR_APP_ID">
|
||||
</adf-start-process>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | (optional) Limit the list of processes that can be started to those contained in the specified app. |
|
||||
| name | `string` | "" | (optional) Name to assign to the current process. |
|
||||
| processDefinitionName | `string` | | (optional) Definition name of the process to start. |
|
||||
| processFilterSelector | `boolean` | true | (optional) Parameter to enable selection of process when filtering. |
|
||||
| showSelectProcessDropdown | `boolean` | true | Hide or show the process selection dropdown. |
|
||||
| values | [`FormValues`](../../../lib/core/form/components/widgets/core/form-values.ts) | | Parameter to pass form field values in the start form if one is associated. |
|
||||
| variables | [`ProcessInstanceVariable`](../../../lib/process-services/process-list/models/process-instance-variable.model.ts)`[]` | | Variables in the input to the process [RestVariable](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api/docs/RestVariable.md). |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/process-list/models/process-instance.model.ts)`>` | Emitted when the process is canceled. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/process-list/models/process-instance.model.ts)`>` | Emitted when an error occurs. |
|
||||
| start | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessInstance`](../../../lib/process-services/process-list/models/process-instance.model.ts)`>` | Emitted when the process starts. |
|
||||
|
||||
## Details
|
||||
|
||||
### Starting a process with a default name and pre-selected process definition name
|
||||
|
||||
```html
|
||||
<adf-start-process
|
||||
[appId]="YOUR_APP_ID"
|
||||
[name]="PROCESS_NAME"
|
||||
[processDefinitionName]="PROCESS_DEFINITION_NAME">
|
||||
</adf-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.
|
||||
|
||||
### Starting a process not included in an app
|
||||
|
||||
```html
|
||||
<adf-start-process
|
||||
[processDefinitionName]="PROCESS_DEFINITION_NAME">
|
||||
</adf-start-process>
|
||||
```
|
||||
|
||||
Use `processDefinitionName` to set the dropdown item as in the example above.
|
||||
|
||||
### Custom data example
|
||||
|
||||
The following example shows how to pass in form field values to initialize the
|
||||
start form for the process:
|
||||
|
||||
```ts
|
||||
const formValues: FormValues = {
|
||||
'test_1': 'value_1',
|
||||
'test_2': 'value_2',
|
||||
'test_3': 'value_1',
|
||||
'test_4': 'dropdown_id',
|
||||
'test_5': 'dropdown_label',
|
||||
'dropdown': {'id': 'dropdown_id', 'name': 'dropdown_label'}
|
||||
};
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-start-process
|
||||
[values]="formValues"
|
||||
[appId]="YOUR_APP_ID" >
|
||||
</adf-start-process>
|
||||
```
|
||||
|
||||
### Attaching a File to the start form of the process
|
||||
|
||||
You can see a repository in the Alfresco Repositories list once it is created in APS.
|
||||
If the repository is set up with an ID value of anything other than 1 then you will need
|
||||
to declare it in `app.config.json`. For example, if the repository's ID is 1002 and its
|
||||
name is _alfresco_ then you would set the `alfrescoRepositoryName` property in`app.config.json`
|
||||
to _alfresco-1002_ as follows:
|
||||
|
||||
```json
|
||||
{
|
||||
"application": {
|
||||
"name": "Alfresco ADF Application"
|
||||
},
|
||||
"ecmHost": "http://{hostname}{:port}/ecm",
|
||||
"bpmHost": "http://{hostname}{:port}/bpm",
|
||||
"logLevel": "silent",
|
||||
"alfrescoRepositoryName": "alfresco-1002"
|
||||
}
|
||||
```
|
||||
|
||||
You then need to pass the node as the input `values` object with the other properties:
|
||||
|
||||
```ts
|
||||
let node: MinimalNode = null;
|
||||
|
||||
this.nodesApiService.getNode(NODE_ID).subscribe((minimalNode) => this.node = minimalNode);
|
||||
|
||||
const formValues: FormValues = {
|
||||
'file' : node
|
||||
'field_one': 'example text'
|
||||
};
|
||||
```
|
||||
|
||||
You could pass multiple nodes too:
|
||||
|
||||
```ts
|
||||
const nodes: string[] = [NODE_ID_1, NODE_ID_2];
|
||||
|
||||
const values: FormValues = {
|
||||
'files': []
|
||||
};
|
||||
|
||||
Observable.from(nodes)
|
||||
.flatMap((nodeId) => this.nodesApiService.getNode(nodeId))
|
||||
.subscribe(
|
||||
(node) => {
|
||||
values.files.push(node);
|
||||
},
|
||||
(error) => console.log(error) ,
|
||||
() => {
|
||||
this.formValues = values;
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
Note that in the object above, the key `file` is the name of the attach file field in the start form of the process. The value of the `file` property must be a
|
||||
[`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md):
|
||||
|
||||
```html
|
||||
<adf-start-process
|
||||
[values]="formValues"
|
||||
[appId]="YOUR_APP_ID" >
|
||||
</adf-start-process>
|
||||
```
|
||||
|
||||
The result will be the start form prefilled with the file data:
|
||||
|
||||
|
||||
|
||||
## See also
|
||||
|
||||
- [Select Apps Dialog component](select-apps-dialog.component.md)
|
||||
38
docs/process-services/components/start-task.component.md
Normal file
38
docs/process-services/components/start-task.component.md
Normal file
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Title: Start Task Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Start Task Component](../../../lib/process-services/task-list/components/start-task.component.ts "Defined in start-task.component.ts")
|
||||
|
||||
Creates/Starts a new task for the specified app.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-start-task
|
||||
[appId]="YOUR_APP_ID"
|
||||
[name]="My Task Name">
|
||||
</adf-start-task>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | (required) The id of the app. |
|
||||
| name | `string` | "" | Default Task Name. |
|
||||
|
||||
### 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. |
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
Title: Task Attachment List Component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Task Attachment List Component](../../../lib/process-services/attachment/task-attachment-list.component.ts "Defined in task-attachment-list.component.ts")
|
||||
|
||||
Displays documents attached to a specified task.
|
||||
|
||||
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Transclusions](#transclusions)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Events](#events)
|
||||
- [Details](#details)
|
||||
- [How to Add Drag and Drop Functionality](#how-to-add-drag-and-drop-functionality)
|
||||
- [See also](#see-also)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-task-attachment-list
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
(attachmentClick)="YOUR_HANDLER">
|
||||
</adf-task-attachment-list>
|
||||
```
|
||||
|
||||
### [Transclusions](../../user-guide/transclusion.md)
|
||||
|
||||
Any content inside the `<adf-task-attachment-list>` element will be displayed
|
||||
when the list is empty:
|
||||
|
||||
```html
|
||||
<adf-task-attachment-list ...>
|
||||
<div><!-- Custom empty list message goes here --></div>
|
||||
</adf-task-attachment-list>
|
||||
```
|
||||
|
||||
|
||||
|
||||
A default "no content" template is displayed if you don't supply one to override it:
|
||||
|
||||
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| disabled | `boolean` | false | Disable/Enable read only mode for attachment list. |
|
||||
| taskId | `string` | | (**required**) The ID of the task to display. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| attachmentClick | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the attachment is double-clicked or a view option is selected from the context menu by the user from within the component. Returns a [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) representing the clicked object. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs while fetching the attachments. |
|
||||
| success | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<Object>` | Emitted when the attachment list has fetched all the attachments. Returns a list of attachments. |
|
||||
|
||||
## Details
|
||||
|
||||
### How to Add Drag and Drop Functionality
|
||||
|
||||
You can wrap the component with an [Upload Drag Area component](../../content-services/upload-drag-area.component.md)
|
||||
to enable the user to upload attachments for empty lists. When you do this, you can also pass
|
||||
a custom _no content template_ as shown below. The component invites the user to drag files to
|
||||
upload whenever the list is empty.
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-upload-drag-area
|
||||
[rootFolderId]="YOUR_TASK_ID"
|
||||
[showNotificationBar]="BOOLEAN">
|
||||
<adf-task-attachment-list
|
||||
[taskId]="YOUR_TASK_ID"
|
||||
(attachmentClick)="YOUR_HANDLER">
|
||||
<adf-empty-list>
|
||||
<div adf-empty-list-header>{{This List is empty}}</div>
|
||||
<div adf-empty-list-body>{{Drag and drop to upload}}</div>
|
||||
<div adf-empty-list-footer>
|
||||
<img [src]="Your custom image URL"></div>
|
||||
</adf-empty-list>
|
||||
</adf-task-attachment-list>
|
||||
</adf-upload-drag-area>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
```ts
|
||||
import { UploadService } from '@alfresco/adf-core';
|
||||
import { TaskUploadService } from '@alfresco/adf-process-services';
|
||||
```
|
||||
|
||||
Make sure you override the [`UploadService`](../../core/upload.service.md) with the [`TaskUploadService`](../../../lib/process-services/task-list/services/task-upload.service.ts)
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-custom-task-attachment',
|
||||
providers: [
|
||||
{ provide: UploadService, useClass: TaskUploadService }
|
||||
]
|
||||
})
|
||||
export class MyCustomTaskAttachmentComponent {
|
||||
constructor() {}
|
||||
}
|
||||
```
|
||||
|
||||
## See also
|
||||
|
||||
- [Upload Drag Area Component](../../content-services/upload-drag-area.component.md)
|
||||
76
docs/process-services/components/task-details.component.md
Normal file
76
docs/process-services/components/task-details.component.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
Title: Task Details component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-13
|
||||
---
|
||||
|
||||
# [Task Details component](../../../lib/process-services/task-list/components/task-details.component.ts "Defined in task-details.component.ts")
|
||||
|
||||
Shows the details of the task ID passed in as input.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-task-details
|
||||
[taskId]="taskId">
|
||||
</adf-task-details>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| debugMode | `boolean` | false | Toggles debug mode. |
|
||||
| fieldValidators | [`FormFieldValidator`](../../../lib/core/form/components/widgets/core/form-field-validator.ts)`[]` | \[] | Field validators for use with the form. |
|
||||
| readOnlyForm | `boolean` | false | Toggles read-only state of the form. All form widgets render as read-only if enabled. |
|
||||
| showChecklist | `boolean` | true | Toggles `Checklist` feature for the Header component. |
|
||||
| showComments | `boolean` | true | Toggles `Comments` feature for the Header component. |
|
||||
| showFormCompleteButton | `boolean` | true | Toggles rendering of the `Complete` outcome button. |
|
||||
| showFormRefreshButton | `boolean` | true | Toggles rendering of the `Refresh` button. |
|
||||
| showFormSaveButton | `boolean` | true | Toggles rendering of the `Save` outcome button. |
|
||||
| showFormTitle | `boolean` | false | Toggles rendering of the form title. |
|
||||
| showHeader | `boolean` | true | Toggles task details Header component. |
|
||||
| showHeaderContent | `boolean` | true | Toggles collapsed/expanded state of the Header component. |
|
||||
| showInvolvePeople | `boolean` | true | Toggles `Involve People` feature for the Header component. |
|
||||
| showNextTask | `boolean` | true | Automatically renders the next task when the current one is completed. |
|
||||
| taskId | `string` | | (**required**) The id of the task whose details we are asking for. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| assignTask | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when a task is assigned. |
|
||||
| claimedTask | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task is claimed. |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when an error occurs. |
|
||||
| executeOutcome | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormOutcomeEvent`](../../../lib/core/form/components/widgets/core/form-outcome-event.model.ts)`>` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. |
|
||||
| formCompleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Complete` outcome. |
|
||||
| formContentClicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ContentLinkModel`](../../../lib/core/form/components/widgets/core/content-link.model.ts)`>` | Emitted when the form field content is clicked. |
|
||||
| formLoaded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is loaded or reloaded. |
|
||||
| formSaved | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FormModel`](../../../lib/core/form/components/widgets/core/form.model.ts)`>` | Emitted when the form is submitted with the `Save` or custom outcomes. |
|
||||
| taskCreated | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskDetailsModel`](../../../lib/process-services/task-list/models/task-details.model.ts)`>` | Emitted when a checklist task is created. |
|
||||
| taskDeleted | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a checklist task is deleted. |
|
||||
| unClaimedTask | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted when a task is unclaimed. |
|
||||
|
||||
## Details
|
||||
|
||||
### Custom 'empty Task Details' template
|
||||
|
||||
By default the [Task Details component](task-details.component.md) shows a simple "No Tasks" message when there are
|
||||
no details. You can change this by adding the a custom HTML template as in the following
|
||||
example:
|
||||
|
||||
```html
|
||||
<adf-task-details [taskId]="taskId">
|
||||
<adf-no-task-details-template>
|
||||
<ng-template>
|
||||
<h1>Sorry, no tasks here</h1>
|
||||
<img src="example.jpg">
|
||||
</ng-template>
|
||||
</adf-no-task-details-template>
|
||||
</adf-task-details>
|
||||
```
|
||||
|
||||
Note that you can use any HTML content in the template, including other Angular components.
|
||||
56
docs/process-services/components/task-filters.component.md
Normal file
56
docs/process-services/components/task-filters.component.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
Title: Task Filters component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-16
|
||||
---
|
||||
|
||||
# [Task Filters component](../../../lib/process-services/task-list/components/task-filters.component.ts "Defined in task-filters.component.ts")
|
||||
|
||||
Shows all available filters.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-task-filters></adf-task-filters>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | Display filters available to the current user for the application with the specified ID. |
|
||||
| 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. If there is no match then the default filter (the first one the list) is selected. |
|
||||
| showIcon | `boolean` | | Toggles display of the filter's icon. |
|
||||
|
||||
### 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)`<`[`FilterRepresentationModel`](../../../lib/process-services/task-list/models/filter.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 APS task filters
|
||||
|
||||
Use the `filterParam` property to restrict the range of filters that are shown:
|
||||
|
||||
```html
|
||||
<adf-task-filters
|
||||
[filterParam]="{name:'My tasks'}">
|
||||
</adf-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 |
|
||||
| index | string | The zero-based position of the filter in the array. |
|
||||
57
docs/process-services/components/task-header.component.md
Normal file
57
docs/process-services/components/task-header.component.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
Title: Task Header component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-14
|
||||
---
|
||||
|
||||
# [Task Header component](../../../lib/process-services/task-list/components/task-header.component.ts "Defined in task-header.component.ts")
|
||||
|
||||
Shows all the information related to a task.
|
||||
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-task-header
|
||||
[taskDetails]="taskDetails">
|
||||
</adf-task-header>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| formName | `string` | null | The name of the form. |
|
||||
| taskDetails | [`TaskDetailsModel`](../../../lib/process-services/task-list/models/task-details.model.ts) | | (required) Details related to 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/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-task-header": {
|
||||
"presets": {
|
||||
"properties" : [ "assignee", "status", "priority", "parentName"]
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
With this configuration, only the four listed properties will be shown.
|
||||
233
docs/process-services/components/task-list.component.md
Normal file
233
docs/process-services/components/task-list.component.md
Normal file
@@ -0,0 +1,233 @@
|
||||
---
|
||||
Title: Task List component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-02-08
|
||||
---
|
||||
|
||||
# [Task List component](../../../lib/process-services/task-list/components/task-list.component.ts "Defined in task-list.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-tasklist
|
||||
[appId]="'1'"
|
||||
[state]="'open'"
|
||||
[assignment]="'assignee'">
|
||||
</adf-tasklist>
|
||||
```
|
||||
|
||||
### [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-tasklist>
|
||||
<adf-custom-empty-content>
|
||||
Your Content
|
||||
</adf-custom-empty-content>
|
||||
<adf-tasklist>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| appId | `number` | | The id of the app. |
|
||||
| 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). |
|
||||
| data | [`DataTableAdapter`](../../../lib/core/datatable/data/datatable-adapter.ts) | | Data source object that represents the number and the type of the columns that you want to show. |
|
||||
| dueAfter | `string` | | Filter the tasks. Display only tasks with `created_date` after `dueAfter`. |
|
||||
| dueBefore | `string` | | Filter the tasks. Display only tasks with `created_date` before `dueBefore`. |
|
||||
| includeProcessInstance | `boolean` | | Toggles inclusion of Process Instances |
|
||||
| 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. |
|
||||
| multiselect | `boolean` | false | Toggles multiple row selection, renders checkboxes at the beginning of each row |
|
||||
| name | `string` | | Name of the tasklist. |
|
||||
| page | `number` | 0 | The page number of the tasks to fetch. |
|
||||
| presetColumn | `string` | | Custom preset column schema in JSON format. |
|
||||
| processDefinitionId | `string` | | The Definition Id of the process. |
|
||||
| processInstanceId | `string` | | The Instance Id of the process. |
|
||||
| selectFirstRow | `boolean` | true | Toggles default selection of the first row |
|
||||
| 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. |
|
||||
| size | `number` | | The number of tasks to fetch. Default value: 25. |
|
||||
| sort | `string` | | Define the sort order of the tasks. Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc` |
|
||||
| start | `number` | | Starting point of the list within the full set of tasks. |
|
||||
| state | `string` | | Current state of the process. Possible values are: `completed`, `active`. |
|
||||
| taskId | `string` | | The id of a task |
|
||||
|
||||
### 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 process instances both active and completed, using any defined process filter, and
|
||||
renders details of any chosen instance.
|
||||
|
||||
### 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-tasklist ...>
|
||||
<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-tasklist>
|
||||
```
|
||||
|
||||
You can also set a static custom schema declaration in `app.config.json` as shown below:
|
||||
|
||||
```json
|
||||
"adf-task-list": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-tasklist
|
||||
[appId]="'1'"
|
||||
[presetColumn]="'customSchema'">
|
||||
</adf-tasklist>
|
||||
```
|
||||
|
||||
You can use an HTML-based schema and an `app.config.json` custom schema declaration at the same time:
|
||||
|
||||
```json
|
||||
"adf-task-list": {
|
||||
"presets": {
|
||||
"customSchema": [
|
||||
{
|
||||
"key": "id",
|
||||
"type": "text",
|
||||
"title": "Id",
|
||||
"sortable": true
|
||||
}],
|
||||
"default": [
|
||||
{
|
||||
"key": "name",
|
||||
"type": "text",
|
||||
"title": "name",
|
||||
"sortable": true
|
||||
}],
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<adf-tasklist
|
||||
[appId]="'1'"
|
||||
[presetColumn]="'customSchema'">
|
||||
<data-columns>
|
||||
<data-column key="assignee" title="Assignee" class="full-width name-column">
|
||||
<ng-template let-entry="$implicit">
|
||||
<div>{{entry.row.obj.assignee | fullName}}</div>
|
||||
</ng-template>
|
||||
</data-column>
|
||||
</data-columns>
|
||||
</adf-tasklist>
|
||||
```
|
||||
|
||||
### Setting Sorting Order for the list
|
||||
|
||||
You can pass a sorting order as shown in the example below:
|
||||
|
||||
```ts
|
||||
// Possible values are : `created-desc`, `created-asc`, `due-desc`, `due-asc`
|
||||
let sortParam = 'created-desc';
|
||||
```
|
||||
|
||||
```html
|
||||
<adf-tasklist
|
||||
[appId]="'1'"
|
||||
[sort]="sortParam">
|
||||
</adf-tasklist>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
### Pagination strategy
|
||||
|
||||
The Tasklist also supports pagination as shown in the example below:
|
||||
|
||||
```html
|
||||
<adf-tasklist
|
||||
[appId]="'1'"
|
||||
[page]="page"
|
||||
[size]="size"
|
||||
#taskList>
|
||||
</adf-tasklist>
|
||||
<adf-pagination
|
||||
*ngIf="taskList"
|
||||
[target]="taskList"
|
||||
[supportedPageSizes]="supportedPages"
|
||||
#taskListPagination>
|
||||
</adf-pagination>
|
||||
```
|
||||
|
||||
### DataTableAdapter example
|
||||
|
||||
See the [Data Table Adapter interface](../../core/datatable-adapter.interface.md) 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 [Data Column component](../../core/data-column.component.md) page for more information about these features.
|
||||
|
||||
## See also
|
||||
|
||||
- [Data column component](../../core/data-column.component.md)
|
||||
- [Data Table Adapter interface](../../core/datatable-adapter.interface.md)
|
||||
- [Pagination component](../../core/pagination.component.md)
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
Title: Task Standalone component
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-19
|
||||
---
|
||||
|
||||
# [Task Standalone component](../../../lib/process-services/task-list/components/task-standalone.component.ts "Defined in task-standalone.component.ts")
|
||||
|
||||
This component can be used when the task doesn't belong to any processes.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-task-standalone
|
||||
[taskName]= "taskname">
|
||||
</adf-task-standalone>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| hasCompletePermission | `boolean` | true | Toggles rendering of the `Complete` button. |
|
||||
| hideCancelButton | `boolean` | true | Toggles rendering of the `Cancel` button. |
|
||||
| isCompleted | `boolean` | false | If true then Task completed message is shown and `Complete` and `Cancel` buttons are hidden. |
|
||||
| taskId | `any` | | Id of the task. |
|
||||
| taskName | `any` | | Name of the task. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| cancel | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the "Cancel" button is clicked. |
|
||||
| complete | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the form associated with the task is completed. |
|
||||
| showAttachForm | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<void>` | Emitted when the form associated with the form task is attached. |
|
||||
Reference in New Issue
Block a user