+
+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, see this [page](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
+necessary configuration [prerequisites](https://github.com/Alfresco/alfresco-ng2-components/blob/master/PREREQUISITES.md).
## Install
-```sh
-npm install --save ng2-activiti-tasklist
-```
+Follow the 3 steps below:
-### Dependencies
+1. Npm
-Add the following dependency to your index.html:
+ ```sh
+ npm install ng2-activiti-tasklist --save
+ ```
-```html
-
-```
+2. Html
-You must separately install the following libraries for your application:
+ Include these dependencies in your index.html page:
-- [ng2-translate](https://github.com/ocombe/ng2-translate)
-- [ng2-alfresco-core](https://www.npmjs.com/package/ng2-alfresco-core)
-- [ng2-alfresco-datatable](https://www.npmjs.com/package/ng2-alfresco-datatable)
+ ```html
+
+
-```sh
-npm install --save ng2-translate ng2-alfresco-core ng2-alfresco-datatable
-```
+
+
+
+
-#### Material Design Lite
+
+
+
+
-The style of this component is based on [material design](https://getmdl.io/), so if you want to visualize it correctly you have to add the material
-design dependency to your project:
+
+
+
-```sh
-npm install --save material-design-icons material-design-lite
-```
+
+
+
+
-Also make sure you include these dependencies in your `index.html` file:
+
+
+
+
-```html
-
-
-
-
-```
-#### Dialogs Polyfill
+
+
+
+
-To make the dialog working with all the browser you have to add the dialog polyfill to you project:
+ ```
-```sh
-npm install --save dialog-polyfill
-```
+3. SystemJs
-Also make sure you include these dependencies in your `index.html` file:
+ Add the following components to your systemjs.config.js file:
-```html
-
-
-
-
-```
+ - ng2-translate
+ - alfresco-js-api
+ - ng2-alfresco-core
+ - ng2-activiti-form
+ - ng2-alfresco-datatable
+ - ng2-activiti-tasklist
+
+ Please refer to the following example file: [systemjs.config.js](demo/systemjs
+ .config.js) .
## Basic usage example Activiti Task List
-The component shows the list of all the tasks filter by the
-FilterParamRepresentationModel passed in input.
+
+The component shows the list of all the tasks filter by the FilterParamRepresentationModel passed in input.
+
```html
```
+**main.ts**
+```ts
+
+import { NgModule, Component } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { FilterRepresentationModel, ActivitiTaskListModule } from 'ng2-activiti-tasklist';
+import { CoreModule } from 'ng2-alfresco-core';
+import { AlfrescoAuthenticationService, AlfrescoSettingsService } from 'ng2-alfresco-core';
+import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable';
+
+@Component({
+ selector: 'alfresco-app-demo',
+ template: ``
+})
+class MyDemoApp {
+
+ dataTasks: 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.dataTasks = 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.dataTasks.setSorting(new DataSorting('started', 'desc'));
+
+ this.filterRepresentationModel = new FilterRepresentationModel({
+ appId: '3003',
+ filter: {
+ processDefinitionKey: null,
+ assignment: 'involved',
+ name: null,
+ state: 'running',
+ sort: 'created-desc'
+ }
+ });
+ }
+}
+
+@NgModule({
+ imports: [
+ BrowserModule,
+ CoreModule.forRoot(),
+ ActivitiTaskListModule.forRoot()
+ ],
+ declarations: [MyDemoApp],
+ bootstrap: [MyDemoApp]
+})
+export class AppModule {
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+
+```
+
#### Events
-**onSuccess**: The event is emitted when the task list is loaded
-**rowClick**: The event is emitted when the task in the list is
-clicked
+
+| Name | Description |
+| --- | --- |
+| `onSuccess` | The event is emitted when the task list is loaded |
+| `rowClick` | The event is emitted when the task in the list is clicked |
#### Options
-**taskFilter**: { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that
-is passed to the task list API to filter the task list.
+| Name | Description |
+| --- | --- |
+| `taskFilter` | { FilterParamRepresentationModel } required) FilterParamRepresentationModel object that is passed to the task list API to filter the task list. |
+
Example:
+
```json
{
- "appDefinitionId": "1",
- "processDefinitionId": "1533",
- "sort": "created-desc",
- "text": "",
- "state": "open",
- "assignment": "involved",
- "page": "0",
- "size": "25"
+ appId: '3003',
+ filter:{
+ processDefinitionKey: null,
+ name:null,
+ assignment: 'involved',
+ state:'running',
+ sort: 'created-desc'
+ }
}
```
-**schemaColumn**: { any[] } optional) JSON object that represent
-the number and the type of the columns that you want show
+
+| Name | Description |
+| --- | --- |
+| `schemaColumn` | { any[] } optional) JSON object that represent the number and the type of the columns that you want show |
+
Example:
+
```json
[
{type: 'text', key: 'id', title: 'Id'},
@@ -110,31 +227,34 @@ Example:
```
## Basic usage example Activiti Task Details
+
The component shows the details of the task id passed in input
+
```html
```
#### Events
+
| Name | Description |
| --- | --- |
-| **formLoaded** | Invoked when form is loaded or reloaded. |
-| **formSaved** | Invoked when form is submitted with `Save` or custom outcomes. |
-| **formCompleted** | Invoked when form is submitted with `Complete` outcome. |
-| **executeOutcome** | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
-| **onError** | Invoked at any error |
+| `formLoaded` | Invoked when form is loaded or reloaded. |
+| `formSaved` | Invoked when form is submitted with `Save` or custom outcomes. |
+| `formCompleted` | Invoked when form is submitted with `Complete` outcome. |
+| `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` |
+| `onError` | Invoked at any error |
#### Options
| Name | Type | Required | Description |
| --- | --- | --- | --- |
-| **taskId** | {string} | required | The id of the task details that we are asking for. |
-| **showNextTask** | {boolean} | optional | Automatically render the next one, when the task is completed. |
-| **showFormTitle** | {boolean} | optional | Toggle rendering of the form title. |
-| **readOnlyForm** | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
-| **showFormRefreshButton** | {boolean} | optional | Toggle rendering of the `Refresh` button. |
-| **showFormSaveButton** | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
-| **showFormCompleteButton** | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
+| `taskId` | {string} | required | The id of the task details that we are asking for. |
+| `showNextTask` | {boolean} | optional | Automatically render the next one, when the task is completed. |
+| `showFormTitle` | {boolean} | optional | Toggle rendering of the form title. |
+| `readOnlyForm` | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. |
+| `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. |
+| `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. |
+| `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button |
### Custom 'empty Activiti Task Details' template
@@ -157,6 +277,7 @@ This can be changed by adding the following custom html template:
```
## Basic usage example Activiti Filter
+
The component shows all the available filters.
```html
@@ -164,16 +285,20 @@ The component shows all the available filters.
```
#### Events
-**filterClick**: The event is emitted when the filter in the list is
- clicked
+
+| Name | Description |
+| --- | --- |
+| `filterClick` | The event is emitted when the filter in the list is clicked |
#### Options
+
No options
## Build from sources
Alternatively you can build component from sources with the following commands:
+
```sh
npm install
npm run build
@@ -185,7 +310,7 @@ npm run build
$ npm run build:w
```
-### Running unit tests
+## Running unit tests
```sh
npm test
@@ -205,3 +330,17 @@ before performing unit testing.
```sh
npm run coverage
```
+
+## Demo
+
+If you want have a demo of how the component works, please check the demo folder :
+
+```sh
+cd demo
+npm install
+npm start
+```
+
+## License
+
+[Apache Version 2.0](https://github.com/Alfresco/alfresco-ng2-components/blob/master/LICENSE)
diff --git a/ng2-components/ng2-alfresco-login/README.md b/ng2-components/ng2-alfresco-login/README.md
index 57924643d3..31247ea484 100644
--- a/ng2-components/ng2-alfresco-login/README.md
+++ b/ng2-components/ng2-alfresco-login/README.md
@@ -83,6 +83,7 @@ Follow the 3 steps below:
- ng2-translate
- ng2-alfresco-core
+ - alfresco-js-api
- ng2-alfresco-login
Please refer to the following example file: [systemjs.config.js](demo/systemjs
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+