ng2-activiti-tasklist
v1.9.0
Activiti Angular2 Task List Component
0/weekUpdated 3 years agoApache-2.0
Published by Alfresco Software, Ltd.
npm install ng2-activiti-tasklistAPS Task List Component
- Prerequisites
- Install
- Activiti Task List
* DataColumn Properties
* Events
* Properties
- Activiti Task Details
* Properties
* Events
* Custom 'empty Activiti Task Details' template
- Activiti Apps Component
* Properties
* Events
* How filter the activiti apps
- Activiti Filter
* Properties
* Events
* How filter the activiti task filters
* FilterParamsModel
* How to create an accordion menu with the task filter
- Activiti Checklist Component
* Properties
- Task Attachment List Component
* Properties
* Events
- Create Task Attachment Component
* Properties
+ Events
- Activiti Task Header
* Properties
* Events
- TaskDetailsModel
- Task People Component
* Properties
+ Events
- Build from sources
- NPM scripts
- Demo
- License
Displays lists of process instances both active and completed, using any defined process filter, and
render details of any chosen instance.
Prerequisites
Before you start using this development framework, make sure you have installed all required software and done all the
necessary configuration prerequisites.
> If you plan using this component with projects generated by Angular CLI, please refer to the following article: Using ADF with Angular CLI
Install
``sh`
npm install ng2-activiti-tasklist
Activiti Task List
This component renders a list containing all the tasks matched by the parameters specified.
`html`
[state]="'open'"
[assignment]="'assignee'">
You can also use HTML-based schema declaration like shown below:
`html`
$3
Here's the list of available properties you can define for a Data Column definition.
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| key | string | | Data source key, can be either column/property key like title or property path like createdBy.name |TemplateRef
| type | string (text\|image\|date) | text | Value type |
| format | string | | Value format (if supported by components), for example format of the date |
| sortable | boolean | true | Toggles ability to sort by this column, for example by clicking the column header |
| title | string | | Display title of the column, typically used for column headers |
| template | | | Custom column template |
| sr-title | string | | Screen reader title, used for accessibility purposes |
| class | string | | Additional CSS class to be applied to column (header and cells) |
$3
| Name | Description |
| --- | --- |
| onSuccess | Raised when the task list is loaded |
| rowClick | Raised when the task in the list is clicked |
$3
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| appId | string || The id of the app. |
| processDefinitionKey | string || The processDefinitionKey of the process. |
| assignment | string || The assignment of the process.
- Possible values are:
- assignee : where the current user is the assignee
- candidate: where the current user is a task candidate
- group_x: where the task is assigned to a group where the current user is a member of.
- no value: where the current user is involved
| state | string || Define state of the processes. Possible values are: completed
, active |
| hasIcon | boolean | true | Toggle the icon on the left . |
| landingTaskId | string | | Define which task id should be selected after the reloading. If the task id doesn't exist or nothing is passed it will select the first task |
| sort | string | | Define the sort of the processes. Possible values are : created-desc, created-asc, due-desc, due-asc |
| data | DataTableAdapter | | JSON object that represent the number and the type of the columns that you want show |Example:
`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}
]
`Activiti Task Details
The component shows the details of the task id passed in input
html
`$3
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| taskId | string | | (required) The id of the task details that we are asking for. |
| showNextTask | boolean | true | Automatically render the next one, when the task is completed. |
| showFormTitle | boolean | true | Toggle rendering of the form title. |
| readOnlyForm | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| showFormRefreshButton | boolean | true | Toggle rendering of the
button. |
| showFormSaveButton | boolean | true| Toggle rendering of the Save outcome button. |
| showFormCompleteButton | boolean | true | Toggle rendering of the Form Complete outcome button |
| peopleIconImageUrl | string | | Define a custom people icon image |
| showHeader | boolean | true | Toggle task details Header component |
| showHeaderContent | boolean | true | Toggle collapsed/expanded state of the Header component |
| showInvolvePeople | boolean | true | Toggle Involve People feature for Header component |
| showComments | boolean | true | Toggle Comments feature for Header component |
| showChecklist | boolean | true | Toggle Checklist feature for Header component |$3
| Name | Description |
| --- | --- |
| formLoaded | Raised when form is loaded or reloaded. |
| formSaved | Raised when form is submitted with
Save or custom outcomes. |
| formCompleted | Raised when form is submitted with Complete outcome. |
| taskCreated | Raised when a checklist task is created. |
| executeOutcome | Raised when any outcome is executed, default behaviour can be prevented via event.preventDefault() |
| onError | Raised at any error |$3
By default the Activiti Task Details provides the following message for the empty task details:
`
No Tasks
This can be changed by adding the following custom html template:
html
Sorry, no tasks here
`Note that can put any HTML content as part of the template, includuing other Angualr components.
Activiti Apps Component
The component shows all the available apps.
html
`$3
| Name | Type | Description |
| --- | --- | --- |
| layoutType | string | (required) Define the layout of the apps. There are two possible values: GRID or LIST. |
| filtersAppId | Object | Provide a way to filter the apps to show. |
$3
| Name | Description |
| --- | --- |
| appClick | Raised when an app entry is clicked |
$3
If you want show some specific apps you can specify them through the filtersAppId parameters
html
{defaultAppId: 'tasks'},
{deploymentId: '15037'},
{name : 'my app name'}]'">
`In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be showed
!how-filter-apps
You can use inside the filter one of the following property
json
{
"defaultAppId": "string",
"deploymentId": "string",
"name": "string",
"id": "number",
"modelId": "number",
"tenantId": "number"
}
`
Activiti Filter
The component shows all the available filters.
html
`$3
| Name | Type | Description |
| --- | --- | --- |
| filterParam | FilterParamsModel | The params to filter the task filter. If there is no match the default one (first filter of the list) is selected |
| appId | string | Display filters available to the current user for the application with the specified ID. |
|
| string | Display filters available to the current user for the application with the specified name. |
| hasIcon | boolean | Toggle to show or not the filter's icon. |If both
appId and appName are specified then appName will take precedence and appId will be ignored.$3
| Name | Description |
| --- | --- |
| filterClick | Raised when the filter in the list is clicked |
| onSuccess | Raised when the list is loaded |
| onError | Raised if there is an error during the loading |
$3
`html
`You can use inside the filterParam one of the following property.
$3
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 | string | The zero-based position of the filter in the array. |
$3
You can create an accordion menu using the AccordionComponent that wrap the activiti task filter.
The AccordionComponent is exposed by the alfresco-core.
html
[hasIcon]="false"
(filterClick)="onTaskFilterClick($event)"
(onSuccess)="onSuccessTaskFilterList($event)"
#activitifilter>
`Activiti Checklist Component
The component shows the checklist task functionality.
html
[taskId]="taskId"
[assignee]="taskAssignee.id"
`$3
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (required) The id of the parent task which sub tasks are attached on. |
| readOnlyForm | boolean | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
| assignee | string | (required) The assignee id where the subtasks are assigned to. |
Task Attachment List Component
This component displays attached documents on a specified task
html
(attachmentClick)="YOUR_HANDLER">
`
!task-attachment-list-sample$3
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (required): The ID of the task to display |
$3
| Name | Description |
| --- | --- |
| attachmentClick | Raised when the attachment double clicked or selected view option from context menu by the user from within the component and return a Blob obj of the object clicker|
| success | Raised when the attachment list fetch all the attach and return a list of attachments |
| error | Raised when the attachment list is not able to fetch the attachments for example network error |
Create Task Attachment Component
This component displays Upload Component(Drag and Click) to upload the attachment to a specified task
html
(error)="YOUR_CREATE_ATTACHMENT_ERROR_HANDLER"
(success)="YOUR_CREATE_ATTACHMENT_SUCCESS_HANDLER">
`$3
| Name | Type | Description |
| --- | --- | --- |
| taskId | string | (required): The numeric ID of the task to display |
#### Events
| Name | Description |
| --- | --- |
| error | Raised when the error occured while creating/uploading the attachment by the user from within the component |
| success | Raised when the attachement created/uploaded successfully from within the component |
Activiti Task Header
The component shows all the information related to a task.
The purpose of the component is populate the local variable called
(array of CardViewModel), with all the information that we want display.`html
`$3
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| taskDetails | TaskDetailsModel | | (required) The task details related to the task. |
| formName | string | | The name of the form. |
$3
| Name | Description |
| --- | --- |
| claim | Raised when the task is claimed. |
TaskDetailsModel
json
{
"id": "string",
"assignee": "User",
"dueDate": "data",
"endDate": "string",
"description": "string"
}
`
Task People Component
This component displays involved users to a specified task
html
[taskId]="YOUR_TASK_ID"
[readOnly]="YOUR_READ_ONLY_FLAG">
`$3
| Name | Type | Description |
| --- | --- | --- |
| people | User[] | The array of User object to display |
| taskId | string | The numeric ID of the task |
| readOnly | boolean | The boolean flag |
#### Events
No Events
Build from sources
You can build component from sources with the following commands:
sh
npm install
npm run build
`> The
task rebuilds all the code, runs tslint, license checks
> and other quality check tools before performing unit testing.NPM scripts
| Command | Description |
| --- | --- |
| npm run build | Build component |
| npm run test | Run unit tests in the console |
| npm run test-browser | Run unit tests in the browser
| npm run coverage | Run unit tests and display code coverage report |
Demo
Please check the demo folder for a demo project
`sh
cd demo
npm install
npm start
``