These functions are available in Workflow Engine ≥ 4.0
You can customize appearance of the following designer sections:
See example of such change in our blog.
The designer now has a special templates folder. This folder contains all the forms that you can see in the designer. These templates use Vue.js and Element UI which can be now altered independently from the rest of the Designer. Thus, you can change each form individually, but note that they are cached in the browser and to see the changes you need to hard reload the page. To do this in chrome, first press F12 then right-click on the "Reload This Page" button and select "Empty cache and hard reload" from the context menu.
When creating designer javascript object you can fill in the forms
property in the object which will be transferred into the WorkflowDesigner
constructor as configuration settings. This is how it looks in code:
var wfdesigner = new WorkflowDesigner({
...
forms:{
activity: function(params){
},
transition: function(params){
},
actors: function(params){
},
commands: function(params){
},
timers: function(params){
},
codeactions: function(params){
},
parameters: function(params){
},
localization: function(params){
},
legend: function(params){
},
processinfo: function(params){
}
},
...
}
As you can see in this code, to customize any window you need to write the following customization function:
function(params){
...
}
and assign it to the appropriate edit window (for example, activity
).
var wfdesigner = new WorkflowDesigner({
...
forms:{
activity: function(params){
//do something
},
},
...
}
Customization function accepts the params
object with the following properties:
params.data
- data displayed in the form, this property is the object params.elements
- description of input fields which will be displayed in the form, this property is the objects array [{name: "Name", field: "Name", type: "input" },{ name: "State", field: "State", type: "input" }]
name
- name displayed in the form field
- name of the params.data
property, used for binding data to the form type
- control type which will be displayed in the form (for example, "input", "textarea", "checkbox", etc.)params.readonly
- if returns true - the form is non-editable params.saveFunc
- basic function to save forms params.title
- form headline This is the basic algorithm of form customization using Customization function:
params
object propertyparams
into object constructor var form = new WorkflowDesignerForm(params);
var saveFunc = function (data) {
form.ClearTempField(data);
//write any custom code here
form.parameters.saveFunc(Object.assign(params.data, data));
return true;
};
showModal
function to show modal windowform.showModal(saveFunc);
Result code will look like this:
var wfdesigner = new WorkflowDesigner({
...
forms:{
activity: function(params){
//change params object
var form = new WorkflowDesignerForm(params);
var saveFunc = function (data) {
form.ClearTempField(data);
//write any custom code here
form.parameters.saveFunc(Object.assign(params.data, data));
return true;
};
form.showModal(saveFunc);
},
},
...
}
When creating designer javascript object you can fill in the drawElements
property in the object which will be transferred into the WorkflowDesigner
constructor as configuration settings. This is how it looks in code:
var wfdesigner = new WorkflowDesigner({
...
drawElements:{
activity: function(element){
},
transitionActivePoint: function(element, x, y){
},
},
...
}
activity
is responsible for rendering the activity box. The element
object in the input is the WorkflowDesignerActivityControl
object instance. To access the object scheme description, use element.item
. The scheme element itself must be rendered into the element.control
property. If this function returns false, a standard element will be rendered.transitionActivePoint
is responsible for rendering the transition central point. The element
object in the input is the WorkflowDesignerTransitionControl
object instance. To access the object scheme description, use element.item
. The function should return the Konva.Group
object as a result, which will be displayed on the canvas. If this function returns false, a standard element will be rendered.For fuller understanding of rendering customization see Konva.js documentation and the following example.