Activiti Process List Component for Angular 2
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.
Install
Follow the 3 steps below:
-
Npm
npm install ng2-activiti-processlist --save -
Html
Include these dependencies in your index.html page:
<!-- Moment js --> <script src="node_modules/moment/min/moment.min.js"></script> <!-- Date picker --> <script src="node_modules/md-date-time-picker/dist/js/mdDateTimePicker.min.js"></script> <script src="node_modules/md-date-time-picker/dist/js/draggabilly.pkgd.min.js"></script> <link rel="stylesheet" href="node_modules/md-date-time-picker/dist/css/mdDateTimePicker.css" media="all"> <!-- Google Material Design Lite --> <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css"> <script src="node_modules/material-design-lite/material.min.js"></script> <link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css"> <!-- Polyfill(s) for Safari (pre-10.x) --> <script src="node_modules/intl/dist/Intl.min.js"></script> <script src="node_modules/intl/locale-data/jsonp/en.js"></script> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/dom4/1.8.3/dom4.js"></script> <script src="node_modules/element.scrollintoviewifneeded-polyfill/index.js"></script> <!-- Polyfill(s) for dialogs --> <script src="node_modules/dialog-polyfill/dialog-polyfill.js"></script> <link rel="stylesheet" type="text/css" href="node_modules/dialog-polyfill/dialog-polyfill.css" /> <style>._dialog_overlay { position: static !important; } </style> <!-- Modules --> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> -
SystemJs
Add the following components to your systemjs.config.js file:
- ng2-translate
- alfresco-js-api
- ng2-alfresco-core
- ng2-activiti-form
- ng2-alfresco-datatable
- ng2-activiti-tasklist
- ng2-activiti-processlist
Please refer to the following example file: [systemjs.config.js](demo/systemjs .config.js) .
Basic usage
Activiti Process Instance List
This component renders a list containing all the process instances matched by the filter specified.
<activiti-process-instance-list [filter]="processFilterModel"></activiti-tasklist>
Usage example of this component :
main.ts
import { NgModule, Component } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FilterRepresentationModel } from 'ng2-activiti-tasklist';
import { CoreModule } from 'ng2-alfresco-core';
import { ActivitiProcessListModule } from 'ng2-activiti-processlist';
import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
@Component({
selector: 'alfresco-app-demo',
template: `<activiti-process-instance-list [filter]="filterRepresentationModel" [data]="dataProcesses"
#activitiprocesslist></activiti-process-instance-list>`
})
class MyDemoApp {
dataProcesses: ObjectDataTableAdapter;
filterRepresentationModel: FilterRepresentationModel;
constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) {
settingsService.bpmHost = 'http://localhost:9999';
this.authService.login('admin', 'admin').subscribe(
ticket => {
console.log(ticket);
},
error => {
console.log(error);
});
this.dataProcesses = new ObjectDataTableAdapter([], [
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true}
]
);
this.dataProcesses.setSorting(new DataSorting('started', 'desc'));
this.filterRepresentationModel = new FilterRepresentationModel({
appId: '3003',
filter: {
processDefinitionKey: null,
name: null,
state: 'running',
sort: 'created-desc'
}
});
}
}
@NgModule({
imports: [
BrowserModule,
CoreModule.forRoot(),
ActivitiProcessListModule
],
declarations: [MyDemoApp],
bootstrap: [MyDemoApp]
})
export class AppModule {
}
platformBrowserDynamic().bootstrapModule(AppModule);
Options
| Name | Description |
|---|---|
filter |
{ UserProcessInstanceFilterRepresentationModel } (required) UserProcessInstanceFilterRepresentationModel object that is passed to the process instance list API to filter the returned list. |
Example:
{
appId: '3003',
filter:{
processDefinitionKey: null,
name:null,
state:'running',
sort: 'created-desc'
}
}
| Name | Description |
|---|---|
schemaColumn |
{any} List of columns to display in the process instances datatable |
Example:
[
{type: 'text', key: 'id', title: 'Id', sortable: true},
{type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true},
{type: 'text', key: 'started', title: 'Started', sortable: true},
{type: 'text', key: 'startedBy.email', title: 'Started By', sortable: true}
]
Events
- rowClick: Emitted when a row in the process list is clicked
- onSuccess: Emitted when the list of process instances has been loaded successfully from the server
- onError: Emitted when an error is encountered loading the list of process instances from the server
Process Filters component
Process filters are a collection of criteria used to filter process instances, which may be customized by users. 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 in order to allow the user to choose which process instances are displayed in the list.
<activiti-process-instance-filters appId="1001"></activiti-process-instance-filters>
Options
| Name | Description |
|---|---|
appId |
Display filters available to the current user for the application with the specified ID |
appName |
Display filters available to the current user for the application with the specified name |
If both appId and appName are specified then appName will take precedence and appId will be ignored.
Events
| Name | Description |
|---|---|
onSuccess |
Emitted when the list of filters hase been successfully loaded from the server |
onError |
Emitted when an error occurs |
ilterClick |
Emitted when the user selects a filter from the list |
Start Process Button component
Displays a button which in turn displays a dialog when clicked, allowing the user to specify some basic details needed to start a new process instance.
<activiti-start-process-instance></activiti-start-process-instance>
Options
| Name | Description |
|---|---|
appId |
Limit the list of processes which can be started to those contained in the specified app |
Events
No events are emitted by this component
Process Details component
This component displays detailed information on a specified process instance
<activiti-process-instance-details processInstanceId="123"></activiti-process-instance-details>
Options
| Name | Description |
|---|---|
processInstanceId |
(required): The numeric ID of the process instance to display |
Events
| Name | Description |
|---|---|
processCancelledEmitter |
Emitted when the current process is cancelled by the user from within the component |
taskFormCompletedEmitter |
Emitted when the form associated with an active task is completed from within the component |
Process Instance Details Header component
This is a sub-component of the process details component, which renders some general information about the selected process.
<activiti-process-instance-header processInstance="localProcessDetails"></activiti-process-instance-details>
Options
| Name | Description |
|---|---|
processInstance |
(required): Full details of the process instance to display information about |
Events
| Name | Description |
|---|---|
processCancelled |
Emitted when the Cancel Process button shown by the component is clicked |
Process Instance Tasks component
Lists both the active and completed tasks associated with a particular process instance
<activiti-process-instance-tasks processInstanceId="123" showRefreshButton="true"></activiti-process-instance-tasks>
Options
| Name | Description |
|---|---|
processInstanceId |
(required): The numeric ID of the process instance to display tasks for |
showRefreshButton |
(default: true): Whether to show a refresh button next to the list of tasks to allow this to be updated from the server |
Events
| Name | Description |
|---|---|
taskFormCompletedEmitter |
Emitted when the form associated with an active task is completed from within the component |
Process Instance Comments component
Displays comments associated with a particular process instances and allows the user to add new comments
<activiti-process-instance-comments processInstanceId="123"></activiti-process-instance-comments>
Options
| Name | Description |
|---|---|
processInstanceId |
(required): The numeric ID of the process instance to display comments for |
Events
No events are emitted by this component
Build from sources
Alternatively you can build component from sources with the following commands:
npm install
npm run build
Build the files and keep watching for changes
$ npm run build:w
Running unit tests
npm test
Running unit tests in browser
npm test-browser
This task rebuilds all the code, runs tslint, license checks and other quality check tools before performing unit testing.
Code coverage
npm run coverage
Demo
If you want have a demo of how the component works, please check the demo folder :
cd demo
npm install
npm start
NPM scripts
| Command | Description |
|---|---|
| npm run build | Build component |
| npm run build:w | Build component and keep watching the changes |
| 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 |