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-2463] Moved doc files to subfolders (#3073)

Browse Source
This commit is contained in:
Andy Stark
2018-03-13 17:29:07 +00:00
committed by Eugenio Romano
parent 766bb082f5
commit 6dc758889f
34 changed files with 103 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
docs/process-services/apps-list.component.md Normal file
View File

@@ -0,0 +1,76 @@
---
Added: v2.0.0
Status: Active
---
# Apps List Component
Shows all available apps.
![how-filter-apps](../docassets/images/how-filter-apps.png)
## Basic Usage
```html
<adf-apps
[layoutType]="'GRID'">
</adf-apps>
```
## Passing custom no-apps template
If we intend to show a custom template if there are no apps present
```html
<adf-apps
[layoutType]="'GRID'">
<adf-empty-list>
<div adf-empty-list-header class="adf-empty-list-header">No apps present</div>
</adf-empty-list>
</adf-apps>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| layoutType | `string` | `AppsListComponent.LAYOUT_GRID` | (**required**) Defines the layout of the apps. There are two possible values, "GRID" and "LIST". |
| filtersAppId | `any[]` | | Provides a way to filter the apps to show. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| appClick | `EventEmitter<AppDefinitionRepresentationModel>` | Emitted when an app entry is clicked. |
| error | `EventEmitter<any>` | Emitted when an error occurs. |
## Details
### How filter the activiti apps
If you want to show some specific apps you can specify them through the filtersAppId parameters
```html
<adf-apps
[filtersAppId]="'[
{defaultAppId: 'tasks'},
{deploymentId: '15037'},
{name : 'my app name'}]'">
</adf-apps>
```
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be shown.
![how-filter-apps](../docassets/images/how-filter-apps.png)
You can use inside the filter one of the following property
```json
{
"defaultAppId": "string",
"deploymentId": "string",
"name": "string",
"id": "number",
"modelId": "number",
"tenantId": "number"
}
```

33
docs/process-services/checklist.component.md Normal file
View File

@@ -0,0 +1,33 @@
---
Added: v2.0.0
Status: Active
---
# Checklist Component
Shows the checklist task functionality.
## Basic Usage
```html
<adf-checklist
[readOnly]="false"
[taskId]="taskId"
[assignee]="taskAssignee.id"
</adf-checklist>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| taskId | `string` | | (required) The id of the parent task to which subtasks are attached. |
| readOnly | `boolean` | `false` | Toggle readonly state of the form. All form widgets will render as readonly if enabled. |
| assignee | `string` | | (required) The assignee id that the subtasks are assigned to. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| checklistTaskCreated | `EventEmitter<TaskDetailsModel>` | Emitted when a new checklist task is created. |
| checklistTaskDeleted | `EventEmitter<string>` | Emitted when a checklist task is deleted. |
| error | `EventEmitter<any>` | Emitted when an error occurs. |

69
docs/process-services/comment-list.component.md Normal file
View File

@@ -0,0 +1,69 @@
---
Added: v2.0.0
Status: Active
---
# Comment list component
Shows a list of comments.
![ADF Comment List](../docassets/images/adf-comment-list.png)
## Basic Usage
Populate the comments in the component class:
```ts
import { CommentProcessModel } from '@alfresco/adf-core';
export class SomeComponent implements OnInit {
comments: CommentProcessModel[] = [
{
id: 1,
message: 'Comment number 1',
created: new Date(),
createdBy: {
id: 1,
email: 'john.doe@alfresco.com',
firstName: 'John',
lastName: 'Doe'
},
},
{
id: 2,
message: 'Comment number 2',
created: new Date(),
createdBy: {
id: 2,
email: 'jane.doe@alfresco.com',
firstName: 'Jane',
lastName: 'Doe'
},
}
];
onClickCommentRow(comment: CommentProcessModel) {
console.log('Clicked row: ', comment);
}
```
In the component template use the comment list component:
```html
<adf-comment-list
[comments]="comments"
(clickRow)="onClickCommentRow($event)">
</adf-comment-list>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| comments | `any[]` | | The comments data used to populate the list. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| clickRow | `EventEmitter<any>` | Emitted when the user clicks on one of the comment rows. |

31
docs/process-services/comments.component.md Normal file
View File

@@ -0,0 +1,31 @@
---
Added: v2.0.0
Status: Active
---
# Comments Component
Displays comments from users involved in a specified task and allows an involved user to add a comment to the task.
![adf-comments](../docassets/images/adf-comments.png)
## Basic Usage
```html
<adf-comments
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
</adf-comments>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| taskId | `string` | | The numeric ID of the task. |
| readOnly | `boolean` | `false` | Are the comments read only? |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | `EventEmitter<any>` | Emitted when an error occurs while displaying/adding a comment. |

32
docs/process-services/create-process-attachment.component.md Normal file
View File

@@ -0,0 +1,32 @@
---
Added: v2.0.0
Status: Active
---
# Create Process Attachment component
Displays Upload Component (Drag and Click) to upload the attachment to a specified process instance
![process-create-attachment](../docassets/images/process-create-attachment.png)
## 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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processInstanceId | `string` | | (required) The ID of the process instance to display. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| error | `EventEmitter<any>` | Emitted when an error occurs while creating or uploading an attachment from the user within the component. |
| success | `EventEmitter<any>` | Emitted when an attachment is successfully created or uploaded from within the component. |

32
docs/process-services/create-task-attachment.component.md Normal file
View File

@@ -0,0 +1,32 @@
---
Added: v2.0.0
Status: Active
---
# Create Task Attachment Component
Displays Upload Component (Drag and Click) to upload the attachment to a specified task
![task-create-attachment](../docassets/images/task-create-attachment.png)
## 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>
```
### Properties
| Name | Type | Description |
| ---- | ---- | ----------- |
| taskId | string | (**required**): The numeric ID of the task to display |
### Events
| Name | Description |
| ---- | ----------- |
| error | Raised when the error occurred while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachment created/uploaded successfully from within the component |

82
docs/process-services/people-list.component.md Normal file
View File

@@ -0,0 +1,82 @@
---
Added: v2.0.0
Status: Active
---
# People list component
Shows a list of users (people).
![ADF People List](../docassets/images/adf-people-list.png)
## 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);
}
```
In the component template use the people list component:
```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="people-email">{{ entry.row.obj.email }}</div>
</ng-template>
</data-column>
</data-columns>
</adf-people-list>
```
Note that the people list component is based on the
[Datatable component](../datatable.component.md).
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| users | `any[]` | | The array of user data used to populate the people list. |
| actions | `boolean` | `false` | Toggles whether or not actions should be visible, i.e. the 'Three-Dots' menu. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| clickRow | `EventEmitter<any>` | Emitted when the user clicks a row in the people list. |
| clickAction | `EventEmitter<UserEventModel>` | Emitted when the user clicks in the 'Three Dots' drop down menu for a row. |

40
docs/process-services/people-search.component.md Normal file
View File

@@ -0,0 +1,40 @@
---
Added: v2.0.0
Status: Active
---
# People Search component
Searches users/people.
## Basic Usage
```html
<adf-people-search></adf-people-search>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| results | `Observable<any[]>` | | The parameters to show people list. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| searchPeople | `EventEmitter<any>` | Emitted when a search is performed with a new keyword. |
| success | `EventEmitter<any>` | Emitted when a user is selected and the action button is clicked. |
| closeSearch | `EventEmitter<{}>` | Emitted when the "close" button is clicked. |
## Details
```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>
```

104
docs/process-services/people.component.md Normal file
View File

@@ -0,0 +1,104 @@
---
Added: v2.0.0
Status: Active
---
# People Component
Displays users involved with a specified task
## Contents
- [Basic Usage](#basic-usage)
- [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>
```
![activiti-people](../docassets/images/activiti_people.png)
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| people | `any[]` | `[]` | The array of User objects to display. |
| taskId | `string` | `''` | The numeric ID of the task. |
| readOnly | `boolean` | `false` | Should the data be read-only? |
## Details
### How to customize the people component behavior
The people component provide two methods to customize the behavior:
- involveUserAndCloseSearch: The selected user is going to be added and the search section closed
- involveUserWithoutCloseSearch: The selected user is going to be added without close the search section
In this way will be easy customize the people component to involve the user with the 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-and-close-search](../docassets/images/involve-people-single-click-and-close-search.gif)
### 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-single-click-without-close-search](../docassets/images/involve-people-single-click-without-close-search.gif)
### 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-click-and-close-search](../docassets/images/involve-people-double-click-and-close-search.gif)
### 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>
```
![involve-people-double-click-without-close-search](../docassets/images/involve-people-double-click-without-close-search.gif)

83
docs/process-services/process-attachment-list.component.md Normal file
View File

@@ -0,0 +1,83 @@
---
Added: v2.0.0
Status: Active
---
# Process Attachment List component
Displays attached documents on a specified process instance
![process-attachment-list-sample](../docassets/images/process-attachment-list.png)
## Basic Usage
```html
<adf-process-attachment-list
[processInstanceId]="YOUR_PROCESS_INSTANCE_ID"
(attachmentClick)="YOUR_ATTACHMENT_CLICK_EMITTER_HANDLER">
</adf-process-attachment-list>
```
If the List is empty, a default no content template is displayed.
![default-no-content-template-sample](../docassets/images/default-no-content-template.png)
Make sure to override the UploadService with the ProcessUploadService
```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() {}
}
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processInstanceId | `string` | | (**required**) The ID of the process instance to display. |
| disabled | `boolean` | `false` | Disable/Enable read-only mode for attachment list. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| attachmentClick | `EventEmitter<{}>` | 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 representing the object that was clicked. |
| success | `EventEmitter<{}>` | Emitted when the attachment list has fetched all the attachments. Returns a list of attachments. |
| error | `EventEmitter<any>` | Emitted when the attachment list is not able to fetch the attachments (eg, following a network error). |
## Details
### How to Add Drag and Drop Functionality
If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom _no content template_ as shown below with our component urging the user to drag files to upload whenever the list is empty.
```html
<adf-upload-drag-area
[parentId]="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>
```
If the List is empty, the custom no-content template we passed is displayed.
![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png)

38
docs/process-services/process-audit.directive.md Normal file
View File

@@ -0,0 +1,38 @@
---
Added: v2.0.0
Status: Active
---
# Process Audit Directive
Fetches the Process Audit information in the pdf or json format.
![adf-process-audit-directive](../docassets/images/adf-process-audit-directive.png)
## Basic Usage
```html
<button
adf-process-audit
[process-id]="processId"
[format]="'pdf'"
[download]="true"
mat-icon-button (clicked)="onAuditClick($event)" (error)="onAuditError($event)" >
<mat-icon>assignment_ind</mat-icon>
</button>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processId | `string` | | ID of the process. |
| fileName | `string` | `'Audit'` | Name of the file to download (for PDF downloads). |
| format | `string` | `'pdf'` | Format for the audit information (can be "pdf" or "json"). |
| download | `boolean` | `true` | Enables downloading of the audit file on clicking. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| clicked | `EventEmitter<any>` | Emitted when the decorated element is clicked. |
| error | `EventEmitter<any>` | Emitted when an error occurs. |

28
docs/process-services/process-comments.component.md Normal file
View File

@@ -0,0 +1,28 @@
---
Added: v2.0.0
Status: Active
---
# Process Instance Comments component
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>
```
### 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<any>` | Emitted when an error occurs. |

321
docs/process-services/process-content.service.md Normal file
View File

@@ -0,0 +1,321 @@
---
Added: v2.0.0
Status: Active
---
# Process Content Service
Manipulates content related to a Process Instance or Task Instance in APS.
Related content can be uploaded to APS via for example a file upload dialog.
## Importing
```ts
import { RelatedContentRepresentation } from 'alfresco-js-api';
import { ProcessContentService } from '@alfresco/adf-core';
export class SomePageComponent implements OnInit {
constructor(private contentService: ProcessContentService) {
}
```
## Methods
#### createProcessRelatedContent(processInstanceId: string, content: any, opts?: any): Observable`<any>`
Associate an uploaded file with a Process Instance.
Let's say we have an upload button as follows:
```html
<div class="button-row">
<button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
<mat-icon>attachment</mat-icon>
</button>
<input hidden type="file" #fileInput (change)="onUploadFile($event)"/>
</div>
```
We can then create related content as follows:
```ts
export class SomePageComponent implements OnInit {
@ViewChild('fileInput') fileInput;
...
onUploadFile() {
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
const file: File = fileBrowser.files[0];
const processInstanceId = '11337';
const opts = {
isRelatedContent: true
};
this.contentService.createProcessRelatedContent(processInstanceId, file, opts).subscribe(
(relContent: RelatedContentRepresentation) => {
console.log('Related content: ', relContent);
}, error => {
console.log('Error: ', error);
});
}
}
```
In the above sample code the `file` is uploaded via an HTML input element.
The `processInstanceId` refers to a process instance ID for a running process in APS.
The returned `relContent` object looks like in this sample:
```
Related content:
contentAvailable: true
created: Wed Nov 08 2017 10:50:30 GMT+0000 (GMT) {}
createdBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
id: 6007
link: false
mimeType: "application/pdf"
name: "simple.pdf"
previewStatus: "queued"
relatedContent: true
simpleType: "pdf"
thumbnailStatus: "queued"
```
The related content `id` can be used by other methods in this service to get to the content and to
delete it. It is referred to as the `contentId`.
If you look at attachments for the process instance it should now display the new file.
#### createTaskRelatedContent(taskId: string, file: any, opts?: any)
Associate an uploaded file with a Task Instance. This is in effect very similar
to the `createProcessRelatedContent` call. Just use `taskInstanceId` instead of `processInstanceId`.
```ts
onUploadFile() {
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
const file: File = fileBrowser.files[0];
const taskInstanceId = '15303';
const opts = {
isRelatedContent: true
};
this.contentService.createTaskRelatedContent(taskInstanceId, file, opts).subscribe(
(relContent: RelatedContentRepresentation) => {
console.log('Related content: ', relContent);
}, error => {
console.log('Error: ', error);
});
}
}
```
For more information see the docs for `createProcessRelatedContent`.
#### createTemporaryRawRelatedContent(file: any): Observable`<RelatedContentRepresentation>`
Create temporary related content from an uploaded file. This means that the related content
is not yet associated with a process instance or a task instance.
```ts
onUploadFile() {
const fileBrowser = this.fileInput.nativeElement;
if (fileBrowser.files && fileBrowser.files[0]) {
const file: File = fileBrowser.files[0];
this.contentService.createTemporaryRawRelatedContent(file).subscribe(
(relContent: RelatedContentRepresentation) => {
console.log('Related content: ', relContent);
}, error => {
console.log('Error: ', error);
});
}
}
```
For more information see the docs for `createProcessRelatedContent`.
#### deleteRelatedContent(contentId: number): Observable`<any>`
Delete related content via the content identifier:
```ts
const contentId = 6008;
this.contentService.deleteRelatedContent(contentId).subscribe(
res => {
console.log('Delete response: ', res);
}, error => {
console.log('Error: ', error);
});
```
The response is going to be `null` if the delete was successful.
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getFileContent(contentId: number): Observable`<RelatedContentRepresentation>`
Get the metadata for a related content item in the format of a `RelatedContentRepresentation` object:
```ts
const contentId = 6008;
this.contentService.getFileContent(contentId).subscribe(
res => {
console.log('Response Metadata: ', res);
}, error => {
console.log('Error: ', error);
});
```
The metadata response looks like in this example:
```
contentAvailable: true
created: Wed Nov 08 2017 11:26:14 GMT+0000 (GMT) {}
createdBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
id: 6008
link: false
mimeType: "application/pdf"
name: "simple.pdf"
previewStatus: "created"
relatedContent: true
simpleType: "pdf"
thumbnailStatus: "created"
```
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getFileRawContentUrl(contentId: number): string
Get the URL for direct access to a related content file:
```ts
const contentId = 6008;
const url = this.contentService.getFileRawContentUrl(contentId);
console.log('URL: ', url);
```
The URL response looks something like this:
`http://localhost:4200/bpm/activiti-app/api/enterprise/content/6008/raw`
This URL can be used to directly access the content file, such as from a browser.
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getFileRawContent(contentId: number): Observable`<Blob>`
Get the raw content bytes as a BLOB for a related content file:
```ts
const contentId = 5006;
this.contentService.getFileRawContent(contentId).subscribe(
res => {
console.log('Response BLOB: ', res);
}, error => {
console.log('Error: ', error);
});
```
The BLOB response looks something like this:
`Blob(205824) {size: 205824, type: "application/msword"}`
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getContentPreview(contentId: number): Observable`<Blob>`
Get the preview file for a related content file. A content file might be for example a
MS Word document. This method would give you the PDF preview for this document,
if it has been generated:
```ts
const contentId = 5006;
this.contentService.getContentPreview(contentId).subscribe(
res => {
console.log('Response Preview BLOB: ', res);
}, error => {
console.log('Error: ', error);
});
```
The preview BLOB response looks something like this:
`Blob(44101) {size: 44101, type: "application/pdf"}`
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getContentThumbnail(contentId: number): Observable`<Blob>`
Get the thumbnail file for a related content file. A content file might be for example a
MS Word document. This method would give you the image thumbnail for this document,
if it has been generated:
```ts
const contentId = 5006;
this.contentService.getContentThumbnail(contentId).subscribe(
res => {
console.log('Response thumbnail BLOB: ', res);
}, error => {
console.log('Error: ', error);
});
```
The response looks like in this sample:
`Blob(13780) {size: 13780, type: "image/png"}`
See `getProcessRelatedContent` and `getTaskRelatedContent` for how to get to the `contentId`.
#### getProcessRelatedContent(processId: string): Observable`<any>`
Get related content items for passed in Process Instance ID, only metadata for related content is returned:
```ts
const processId = '11337';
this.contentService.getProcessRelatedContent(processId).subscribe(
res => {
console.log('Response: ', res);
}, error => {
console.log('Error: ', error);
});
```
The response looks like in the following sample:
```
size: 2
start:0
total:2
data:
0:
contentAvailable: true
created: "2017-10-29T07:28:15.546+0000"
createdBy: {id: 1, firstName: null, lastName: "Administrator", email: "admin@app.activiti.com"}
id: 5006
link: false
mimeType: "application/msword"
name: "More info for Invoice.doc"
previewStatus: "created"
relatedContent: true
simpleType: "word"
thumbnailStatus: "created"
1:
id: 6008,
name: "simple.pdf",
created: "2017-11-08T11:26:14.162+0000",
createdBy: {…},
relatedContent: true,
…}
```
The `id` property corresponds to the `contentId` property used in many of the other methods of this service.
#### getTaskRelatedContent(taskId: string): Observable`<any>`
Get related content items for passed in Task Instance ID, only metadata for related content is returned:
```ts
const taskId = '15303';
this.contentService.getTaskRelatedContent(taskId).subscribe(
res => {
console.log('Response: ', res);
}, error => {
console.log('Error: ', error);
});
```
The response format is the same as for the `getProcessRelatedContent` method, see its docs.
<!-- seealso start -->
<!-- seealso end -->

202
docs/process-services/process-filter.service.md Normal file
View File

@@ -0,0 +1,202 @@
---
Added: v2.0.0
Status: Active
---
# Process Filter Service
Manage Process Filters, which are pre-configured Process Instance queries.
## Importing
```ts
import { ProcessFilterService, FilterProcessRepresentationModel } from '@alfresco/adf-process-services';
export class SomePageComponent implements OnInit {
constructor(private processFilterService: ProcessFilterService) {
}
```
## Methods
#### createDefaultFilters(appId: number): Observable`<any[]>`
Create and return the default filters for a Process App:
```ts
const processAppId = 2;
this.processFilterService.createDefaultFilters(processAppId)
.subscribe( filters => {
console.log('filters: ', filters);
}, error => {
console.log('Error: ', error);
});
```
The response is an array of `FilterProcessRepresentationModel` objects:
filters:
0: {
appId: 2
filter:
name: ""
sort: "created-desc"
state: "running"
icon: "glyphicon-random"
id: null
index: undefined
name: "Running"
recent: true
}
1: {id: null, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
2: {id: null, appId: 2, name: "All", recent: true, icon: "glyphicon-th", …}
These filters can now be used to get matching process instances for Process App with ID 2,
such as 'Running', 'Completed', and 'All' .
#### getProcessFilters(appId: number): Observable`<FilterProcessRepresentationModel[]>`
Get all filters defined for a Process App:
```ts
const processAppId = 2;
this.processFilterService.getProcessFilters(processAppId)
.subscribe( (filters: FilterProcessRepresentationModel[]) => {
console.log('filters: ', filters);
}, error => {
console.log('Error: ', error);
});
```
The response is an array of `FilterProcessRepresentationModel` objects:
filters:
0: {id: 15, appId: 2, name: "Running", recent: true, icon: "glyphicon-random", …}
1: {id: 14, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
2: {id: 13, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
3: {id: 3003, appId: 2, name: "Running", recent: false, icon: "glyphicon-random", …}
4: {id: 3004, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …}
5: {id: 3005, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …}
In this example I had run the `createDefaultFilters` method ones and that created the duplicate of
the default filters.
These filters can now be used to get matching process instances for Process App with ID 2,
such as 'Running', 'Completed', and 'All' .
#### getProcessFilterById(filterId: number, appId?: number): Observable`<FilterProcessRepresentationModel>`
Get a specific Process Filter based on its ID, optionally pass in Process App ID to improve performance
when searching for filter:
```ts
const processAppId = 2;
const filterId = 3003;
this.processFilterService.getProcessFilterById(filterId, processAppId)
.subscribe( (filter: FilterProcessRepresentationModel) => {
console.log('filter: ', filter);
}, error => {
console.log('Error: ', error);
});
```
The response is a `FilterProcessRepresentationModel` object:
appId: 2
filter: {sort: "created-desc", name: "", state: "running"}
icon: "glyphicon-random"
id: 3003
name: "Running"
recent: false
The filter can now be used to get 'Running' process instances for Process App with ID 2.
#### getProcessFilterByName(filterName: string, appId?: number): Observable`<FilterProcessRepresentationModel>`
Get a specific Process Filter based on its name, optionally pass in Process App ID to improve performance
when searching for filter:
```ts
const processAppId = 2;
const filterName = 'Running';
this.processFilterService.getProcessFilterByName(filterName, processAppId)
.subscribe( (filter: FilterProcessRepresentationModel) => {
console.log('filter: ', filter);
}, error => {
console.log('Error: ', error);
});
```
The response is a `FilterProcessRepresentationModel` object:
appId: 2
filter: {sort: "created-desc", name: "", state: "running"}
icon: "glyphicon-random"
id: 15
name: "Running"
recent: true
If there are several filters with the same name for the Process App, then you get back the
first one found matching the name.
The filter can now be used to get 'Running' process instances for Process App with ID 2.
#### addProcessFilter(filter: FilterProcessRepresentationModel): Observable`<FilterProcessRepresentationModel>`
Add a new Process Instance filter:
```ts
const processAppId = 2;
const filterName = 'RunningAsc';
const filterRunningAsc = new FilterProcessRepresentationModel({
'name': filterName,
'appId': processAppId,
'recent': true,
'icon': 'glyphicon-random',
'filter': { 'sort': 'created-asc', 'name': 'runningasc', 'state': 'running' }
});
this.processFilterService.addProcessFilter(filterRunningAsc)
.subscribe( (filterResponse: FilterProcessRepresentationModel) => {
console.log('filterResponse: ', filterResponse);
}, error => {
console.log('Error: ', error);
});
```
The response is a `FilterProcessRepresentationModel` object:
appId: 2
icon: "glyphicon-random"
id: 3008
name: "RunningAsc"
recent: false
The filter can now be used to get 'Running' process instances for
Process App with ID 2 in created date ascending order.
See also the `getRunningFilterInstance` method.
#### getRunningFilterInstance(appId: number): FilterProcessRepresentationModel
Convenience method to create and return a filter that matches `running` process instances
for passed in Process App ID:
```ts
const processAppId = 2;
const runningFilter: FilterProcessRepresentationModel = this.processFilterService.getRunningFilterInstance(processAppId);
console.log('Running filter', runningFilter);
```
The response is a `FilterProcessRepresentationModel` object:
appId: 2
filter: {sort: "created-desc", name: "", state: "running"}
icon: "glyphicon-random"
id: null
index: undefined
name: "Running"
recent: true
The filter can now be used to get 'Running' process instances for
Process App with ID 2 in created date ascending order.

77
docs/process-services/process-filters.component.md Normal file
View File

@@ -0,0 +1,77 @@
---
Added: v2.0.0
Status: Active
---
# Process Filters Component
Collection of criteria used to filter process instances, which may be customized by users.
## Basic Usage
```html
<adf-process-instance-filters
appId="1001">
</adf-process-instance-filters>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| filterParam | `FilterProcessRepresentationModel` | | 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. |
| 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. |
| showIcon | `boolean` | `true` | Toggle to show or hide the filter's icon. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| filterClick | `EventEmitter<ProcessInstanceFilterRepresentation>` | Emitted when the user selects a filter from the list. |
| success | `EventEmitter<ProcessInstanceFilterRepresentation[]>` | Emitted when the list of filters has been successfully loaded from the server. |
| error | `EventEmitter<any>` | Emitted when an error occurs. |
## 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-filters>
```
You can use inside the filterParam one of the properties defined by [FilterParamsModel](#filterparamsmodel) (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. |
### How to create an accordion menu with the processes filter
The process filter often works well as an item in an accordion menu. See the [Accordion component](../core/accordion.component.md)
page for an example of how to do set this up.
## See also
- [Filter model](../filter.model.md)

32
docs/process-services/process-instance-details.component.md Normal file
View File

@@ -0,0 +1,32 @@
---
Added: v2.0.0
Status: Active
---
# Process Details component
Displays detailed information on a specified process instance
## Basic Usage
```html
<adf-process-instance-details
processInstanceId="YOUR_PROCESS_INSTANCE_ID">
</adf-process-instance-details>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processInstanceId | `string` | | (required) The numeric ID of the process instance to display. |
| showTitle | `boolean` | `true` | Toggles whether to show or hide the title. |
| showRefreshButton | `boolean` | `true` | Toggles whether to show or hide the refresh button. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| processCancelled | `EventEmitter<any>` | Emitted when the current process is cancelled by the user from within the component. |
| error | `EventEmitter<any>` | Emitted when an error occurs. |
| taskClick | `EventEmitter<TaskDetailsEvent>` | Emitted when a task is clicked. |
| showProcessDiagram | `EventEmitter<any>` | Emitted when the "show diagram" button is clicked. |

41
docs/process-services/process-instance-header.component.md Normal file
View File

@@ -0,0 +1,41 @@
---
Added: v2.0.0
Status: Active
---
# Process Instance Details Header component
Sub-component of the process details component, which renders some general information about the selected process.
![adf-process-instance-header](../docassets/images/adf-process-instance-header-attachment.png)
## Basic Usage
```html
<adf-process-instance-header
processInstance="localProcessDetails">
</adf-process-instance-details>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processInstance | `ProcessInstance` | | (**required**) Full details of the process instance to display information about. |
## Customise the properties showed
By default all the properties are showed :
***status***, ***ended***, ***category***, ***businessKey***, ***assignee***, ***created***,***id***, ***description***.
It is possible to customise the showed properties via "app.config.json".
This is how the configuration looks like:
```json
"adf-process-instance-header": {
"presets": {
"properties" : [ "status", "ended", "created", "id"]
}
}
```
In this way only the listed properties will be showed.

30
docs/process-services/process-instance-tasks.component.md Normal file
View File

@@ -0,0 +1,30 @@
---
Added: v2.0.0
Status: Active
---
# Process Instance Tasks component
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>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| processInstanceDetails | `ProcessInstance` | | (**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<any>` | Emitted when an error occurs. |
| taskClick | `EventEmitter<TaskDetailsEvent>` | Emitted when a task is clicked. |

137
docs/process-services/process-list.component.md Normal file
View File

@@ -0,0 +1,137 @@
---
Added: v2.0.0
Status: Active
---
# Process Instance List
Renders a list containing all the process instances matched by the parameters specified.
## Basic Usage
**app.component.html**
```html
<adf-process-instance-list
[appId]="'1'"
[state]="'open'">
</adf-process-instance-list>
```
You can also use custom schema declaration as shown below:
define custom schema in the app.config.json as shown below json format.
```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]="'open'"
[presetColumn]="'customSchema'">
</adf-process-instance-list>
```
You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below:
```json
"adf-process-list": {
"presets": {
"customSchema": [
{
"key": "id",
"type": "text",
"title": "Id",
"sortable": true
}],
"default": [
{
"key": "name",
"type": "text",
"title": "name",
"sortable": true
}],
}
}
```
```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>{{getFullName(entry.row.obj.assignee)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-process-instance-list>
```
### Pagination strategy
adf-process-instance-list also supports pagination and the same can be used as shown below.
```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>
```
### Properties
| Name | Type | Default | Description |
| ---- | ----------- | --- | --- |
| appId | number | | The id of the app. |
| processDefinitionKey | string | | The processDefinitionKey of the process. |
| presetColumn | string | | The presetColumn of the custom schema to fetch. |
| state | string | | Define state of the processes. Possible values are `running`, `completed` and `all` |
| sort | string | | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` |
| name | string | | The name of the list. |
| page | number | 0 | The page of the processes to fetch. |
| size | number | 25 | The number of processes to fetch. |
| data | DataTableAdapter | | Data source to define the datatable. |
| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each 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. |
### Events
| Name | Description |
| ---- | ----------- |
| rowClick | Emitted when a row in the process list is clicked |
| success | Emitted when the list of process instances has been loaded successfully from the server |
| error | Emitted when an error is encountered loading the list of process instances from the server |
## See also
- [Data column component](../core/data-column.component.md)
- [DataTableAdapter](../datatable-adapter.interface.md)
- [Pagination component](../pagination.component.md)

132
docs/process-services/process.service.md Normal file
View File

@@ -0,0 +1,132 @@
---
Added: v2.0.0
Status: Active
---
# Process Service
Manages Process Instances, Process Variables, and Process Audit Log.
## Methods
- `getProcessInstances(requestNode: ProcessFilterParamRepresentationModel, processDefinitionKey?: string): Observable<ProcessListModel>`
Get process instances for a filter and optionally a process definition.
- `requestNode` - Filter for instances
- `processDefinitionKey` - (Optional) Limits returned instances to a process definition
- `fetchProcessAuditPdfById(processId: string): Observable<Blob>`
Fetches the Process Audit information as a pdf
- `processId` - ID of the target process
- `fetchProcessAuditJsonById(processId: string): Observable<any>`
Fetches the Process Audit information in a json format.
- `processId` - ID of the target process
- `getProcess(processInstanceId: string): Observable<ProcessInstance>`
Gets Process Instance metadata.
- `processInstanceId` - ID of the target process
- `getProcessTasks(processInstanceId: string, state?: string): Observable<TaskDetailsModel[]>`
Gets task instances for a process instance.
- `processInstanceId` - ID of the process instance
- `state` - (Optional) Task state filter (can be "active" or "completed")
- `getProcessDefinitions(appId?: number): Observable<ProcessDefinitionRepresentation[]>`
Gets process definitions associated with an app.
- `appId` - (Optional) ID of a target app
- `getProcessDefinitionVersions(appId?: number): Observable<ProcessDefinitionRepresentation[]>`
Gets the versions of process definitions associated with an app.
- `appId` - (Optional) ID of a target app
- `startProcess(processDefinitionId: string, name: string, outcome?: string, startFormValues?: FormValues, variables?: ProcessInstanceVariable[]): Observable<ProcessInstance>`
Starts a process based on a process definition, name, form values or variables.
- `processDefinitionId` - Process definition ID
- `name` - Process name
- `outcome` - (Optional) Process outcome
- `startFormValues` - (Optional) Values for the start form
- `variables` - (Optional) Array of process instance variables
- `cancelProcess(processInstanceId: string): Observable<void>`
Cancels a process instance.
- `processInstanceId` - ID of process to cancel
- `getProcessInstanceVariables(processInstanceId: string): Observable<ProcessInstanceVariable[]>`
Gets the variables for a process instance.
- `processInstanceId` - ID of the target process
- `createOrUpdateProcessInstanceVariables(processInstanceId: string, variables: ProcessInstanceVariable[]): Observable<ProcessInstanceVariable[]>`
Creates or updates variables for a process instance.
- `processInstanceId` - ID of the target process
- `variables` - Variables to update
- `deleteProcessInstanceVariable(processInstanceId: string, variableName: string): Observable<void>`
Deletes a variable for a process instance.
- `processInstanceId` - ID of the target process
- `variableName` - Name of the variable to delete
## Details
Parameter and return value classes are defined in the Alfresco JS API. See the
[Activiti REST API](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api)
pages for further information.
### Importing
```ts
import { ProcessService, ProcessInstance, ProcessInstanceVariable,
ProcessDefinitionRepresentation, ProcessFilterParamRepresentationModel, TaskDetailsModel } from '@alfresco/adf-process-services';
export class SomePageComponent implements OnInit {
constructor(private processService: ProcessService) {
}
```
### Example of starting a process
When starting a process, you can choose to pass in form field values or process variables
but not both in the same call.
In this example, values are supplied to the start form that has been defined for the process:
```ts
const processDefinitionId = 'InvoiceApprovalProcess:2:21';
const name = 'Sample Invoice Process';
const outcome = null;
const startFormValues = {
approver: 'admin@app.activiti.com',
companyemail: 'someone@acme.com',
invoicetobeapproved: null
};
this.processService.startProcess(processDefinitionId, name, outcome, startFormValues)
.subscribe( (processInstance: ProcessInstance) => {
console.log('ProcessInstance: ', processInstance);
}, error => {
console.log('Error: ', error);
});
```
A `ProcessInstance` object is returned for a successfully started process. This implements the
[ProcessInstanceRepresentation interface](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/ProcessInstanceRepresentation.md).
You can start the process with process variables instead of form field values using
code like the following:
```ts
const processDefinitionId = 'InvoiceApprovalProcess:2:21';
const name = 'Sample Invoice Process (Var)';
const variables: ProcessInstanceVariable[] = [
{name: 'approver', value: 'admin@app.activiti.com'},
{name: 'companyemail', value: 'someone@acme.com'},
{name: 'invoicetobeapproved', value: null},
{name: 'sampleVar', value: 'hello'}
];
this.processService.startProcess(processDefinitionId, name, null, null, variables)
.subscribe( (processInstance: ProcessInstance) => {
console.log('ProcessInstance: ', processInstance);
}, error => {
console.log('Error: ', error);
});
```
You can also start a process that has no start form and no process variables:
```ts
const processDefinitionId = 'SimpleProcess:1:2';
const name = 'Sample Process';
this.processService.startProcess(processDefinitionId, name)
.subscribe( (processInstance: ProcessInstance) => {
console.log('ProcessInstance: ', processInstance);
}, error => {
console.log('Error: ', error);
});
```