@optimajet/workflow-designer 0.0.19 → 0.0.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -23
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,16 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
## Introduction
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
WorkflowEngine Designer is a library developed to facilitate the use of this component. It provides a convenient way to interact and create the Workflow Designer on your web page.
|
|
6
6
|
|
|
7
7
|
## Prerequisites
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
To run the example below, you should create the WorkflowEngine backend capable of handling requests from the Workflow Designer.
|
|
10
10
|
|
|
11
11
|
## Installation
|
|
12
12
|
|
|
13
13
|
```shell
|
|
14
|
-
npm install @optimajet/workflow-designer
|
|
14
|
+
> npm install @optimajet/workflow-designer
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
## Basic Usage
|
|
@@ -27,7 +27,7 @@ const data = {
|
|
|
27
27
|
|
|
28
28
|
var wfdesigner = new WorkflowDesigner({
|
|
29
29
|
apiurl: '<YOUR_API_URL_VALUE>',
|
|
30
|
-
renderTo: 'root',
|
|
30
|
+
renderTo: 'root',
|
|
31
31
|
graphwidth: window.innerWidth,
|
|
32
32
|
graphheight: window.innerHeight,
|
|
33
33
|
});
|
|
@@ -38,14 +38,15 @@ if (wfdesigner.exists(data)) {
|
|
|
38
38
|
wfdesigner.create();
|
|
39
39
|
}
|
|
40
40
|
```
|
|
41
|
-
|
|
41
|
+
|
|
42
|
+
This code snippet is everything you need to initially display the Workflow Designer on your web page. Let's analyze it in more detail:
|
|
42
43
|
|
|
43
44
|
```javascript
|
|
44
45
|
import WorkflowDesigner from '@optimajet/workflow-designer'
|
|
45
46
|
//import '@optimajet/workflow-designer/localization/workflowdesigner.localization_ru'
|
|
46
47
|
```
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
This section is responsible for importing the `WorkflowDesigner` constructor. By uncommenting line 2, you can localize the workflow designer. By default, the workflow designer has the English localization.
|
|
49
50
|
|
|
50
51
|
```javascript
|
|
51
52
|
const data = {
|
|
@@ -61,14 +62,15 @@ var wfdesigner = new WorkflowDesigner({
|
|
|
61
62
|
});
|
|
62
63
|
```
|
|
63
64
|
|
|
64
|
-
|
|
65
|
+
In this section:
|
|
65
66
|
|
|
66
|
-
- `schemecode` -
|
|
67
|
-
- `processid` -
|
|
67
|
+
- `schemecode` - is the code for the Workflow diagram to be displayed in the Workflow Designer.
|
|
68
|
+
- `processid` - is the identifier of the WorkflowEngine process.
|
|
68
69
|
|
|
69
|
-
-
|
|
70
|
+
- the `WorkflowDesigner` constructor takes an object with the designer settings and creates a new instance of the WorkflowDesigner class. The example specifies all the necessary parameters of the designer, namely: the HTTP address of the WorkflowAPI for interacting with the back-end of the application (`apiurl`), the available width (` graphwidth`) and height (`graphheight`) for displaying the WorkflowDesigner window, and the element ID, inside which the entire WorkflowDesigner interface is rendered (`renderTo`). For a more detailed list of the parameters, see the **Designer** section of the documentation page about the WorkflowEngine.
|
|
70
71
|
|
|
71
|
-
|
|
72
|
+
|
|
73
|
+
If you want to display the Workflow scheme in the Workflow Designer interface, set the required value to the `schemeсode` variable, and assign the `undefined` value to the `processid`. In case you want to display the Workflow process, set the `undefined` value to the `schemecode`, and the required value to the `processid` variable of the WorkflowEngine process identifier.
|
|
72
74
|
|
|
73
75
|
```javascript
|
|
74
76
|
if (wfdesigner.exists(data)) {
|
|
@@ -78,17 +80,23 @@ if (wfdesigner.exists(data)) {
|
|
|
78
80
|
}
|
|
79
81
|
```
|
|
80
82
|
|
|
81
|
-
|
|
83
|
+
This section checks whether the above data exist and available for loading and displaying in the WorkflowDesigner. If the specified data exist, then they are loaded and rendered. Otherwise, a new empty Workflow diagram will be created.
|
|
84
|
+
|
|
85
|
+
## Building and Running the Example
|
|
82
86
|
|
|
83
|
-
|
|
87
|
+
We use the webpack package to build our example.
|
|
88
|
+
|
|
89
|
+
```shell
|
|
90
|
+
> npm i -D webpack webpack-cli
|
|
91
|
+
```
|
|
84
92
|
|
|
85
|
-
|
|
93
|
+
Next, add the packages necessary for the correct webpack setup
|
|
86
94
|
|
|
87
95
|
```shell
|
|
88
|
-
npm i -D @babel/preset-env @babel/core babel-loader css-loader html-webpack-plugin mini-css-extract-plugin uglifyjs-webpack-plugin
|
|
96
|
+
> npm i -D @babel/preset-env @babel/core babel-loader css-loader html-webpack-plugin mini-css-extract-plugin uglifyjs-webpack-plugin
|
|
89
97
|
```
|
|
90
98
|
|
|
91
|
-
|
|
99
|
+
The basic webpack configuration looks like this:
|
|
92
100
|
|
|
93
101
|
```js
|
|
94
102
|
const HtmlWebpackPlugin = require('html-webpack-plugin'); // for generate an HTML5 file
|
|
@@ -138,15 +146,15 @@ module.exports = () => ({
|
|
|
138
146
|
});
|
|
139
147
|
```
|
|
140
148
|
|
|
141
|
-
##
|
|
149
|
+
## IE11 Support
|
|
142
150
|
|
|
143
|
-
|
|
151
|
+
To support successful performance of the designer in IE11, we should slightly modify the webpack configuration in `webpack.config.js`, but first we should add another package to transpile and modify our JavaScript.
|
|
144
152
|
|
|
145
153
|
```shell
|
|
146
|
-
npm i -D @babel/plugin-proposal-decorators
|
|
154
|
+
> npm i -D @babel/plugin-proposal-decorators
|
|
147
155
|
```
|
|
148
156
|
|
|
149
|
-
|
|
157
|
+
Now, add the `target: ['web', 'es5']` property in the webpack config, and change the `babel-loader` rule in`module.rules` to the following:
|
|
150
158
|
|
|
151
159
|
```js
|
|
152
160
|
//...
|
|
@@ -166,11 +174,11 @@ rules: [
|
|
|
166
174
|
},
|
|
167
175
|
},
|
|
168
176
|
},
|
|
169
|
-
]
|
|
177
|
+
],
|
|
170
178
|
//...
|
|
171
179
|
```
|
|
172
180
|
|
|
173
|
-
|
|
181
|
+
The only thing left to do is to create the `babel.config.js` file in the project root. The file should contain the following babel configuration:
|
|
174
182
|
|
|
175
183
|
```js
|
|
176
184
|
module.exports = function (api) {
|
|
@@ -206,4 +214,4 @@ module.exports = function (api) {
|
|
|
206
214
|
}
|
|
207
215
|
```
|
|
208
216
|
|
|
209
|
-
|
|
217
|
+
The configuration is completed successfully, so you can enjoy using the WorkflowDesigner in IE11.
|