Before you start using this development framework, make sure you have installed all required software and done all the necessary configuration, see this page.

Install

npm install --save ng2-activiti-diagrams

Dependencies

Add the following dependency to your index.html:

<script src="node_modules/alfresco-js-api/dist/alfresco-js-api.js"></script>

The following component needs to be added to your systemjs.config.js file:

ng2-alfresco-core

raphael

npm install raphael --save

Also make sure you include these dependencies in your index.html file:

    <script src="node_modules/raphael/raphael.min.js"></script>

Material Design Lite

The style of this component is based on material design, so if you want to visualize it correctly you have to add the material design dependency to your project:

npm install --save material-design-icons material-design-lite

Also make sure you include these dependencies in your index.html file:

<!-- 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">

Basic usage example Activiti Diagrams

The component shows the diagram of the input process.

<activiti-diagrams [processDefinitionId]="processDefinitionId"></activiti-diagrams>

Events

onSuccess: The event is emitted when the diagrams element are loaded

onError: The event is emitted when the an error occur during the loading

Options

metricPercentages The array that contains the percentage of the time for each element

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