Designer Appearance Customization
These features are available, starting with version 4.0.
The appearance of the following Designer sections can be customized:
- all edit forms for scheme elements;
- activity rendering on the designer canvas;
- transition rendering on the designer canvas;
Form customization for Workflow Engine starting with v5.0 and up
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 modified independently of the rest of the Designer.
Once the user opens the edit form, the Workflow Engine creates a window and loads the content from the HTML template, then executes
the <template name>_Init
initialization method (for example, for the template toolbar.html
the name would be toolbar_Init
). Afterward,
the Vue instance is initiated and the me.VueConfig.methods.onUpdate
method is called if it has been declared.
function toolbar_Init(me) {
const data = me.VueConfig.data;
const designer = me.graph.designer;
// version 8.0.0 and later
const Vue = me.Vue;
// version 8.0.0 and later
me.VueConfig.methods.onVueAppCreated = function (vueApp) {
console.log(vueApp)
}
// ...
me.VueConfig.methods.onUpdate = function () {
data.settings = me.graph.Settings;
// ...
}
};
You can use me.graph
to access Graph
and also me.graph.data
to access data
.
Since version 8.0.0, you can call me.Vue
to get a Vue
object and the onVueAppCreated
method to get an instance of the Vue
application.
The forms can be changed individually, but note that they are cached in the browser and to see the changes you need to hard reload the page. First press F12 then right-click on the Reload This Page button and select Empty cache and hard reload from the context menu to do this in Chrome.
You can use designer property cacheLoadedFiles
to disable template caching.
The templates might be customized considering your requirements, but you shouldn't forget to merge them correctly.
Templates list using Vue.js
In the templates folder are available
the custom forms
for particular plugin actions, and the svg
files where you can change the appearance
of elements
on the graph (for instance, an activity, transition, decision, etc.). The complete available list is provided below:
- activity.htmlActivity form.
- activitygroup.htmlInline activity form in running process view mode.
- activityinline.htmlInline activity form.
- activitytoolbar.htmlToolbar with activity forms.
- actors.htmlActors form.
- assignments.htmlForm to work with the Assigment plugin.
- codeactions.htmlCodeActions form.
- codeform.htmlCode editing form form.
- commandParameters.htmlCommand parameters form.
- commands.htmlCommands form.
- comment.htmlComment form.
- commenttoolbar.htmlComment toolbar.
- confirmDialog.htmlStandard form used in confirmation dialog.
- customformsCustom forms for plugins.
- assignmentpluginCustom forms for Assigment plugin.
- assignmentchangeform.htmlAssignmentChange activity from.
- assignmentcreateform.htmlAssignmentCreate activity from.
- assignmentshavestatus.htmlAssignmentHaveStatus activity from.
- basicspluginCustom forms for Basic plugin.
- createprocessform.htmlCreateProcess activity from.
- httprequestform.htmlHTTPRequest activity from.
- sendemailform.htmlSendEmail activity from.
- loopspluginCustom forms for Loops plugin.
- startloopforeachform.htmlStartLoopForeach activity from.
- startloopforform.htmlStartLoopFor activity from.
- assignmentpluginCustom forms for Assigment plugin.
- decision.htmlActivity form - decision.
- decisiontable.htmlActivity form - decision table.
- dropdownValues.htmlIt allows the user to choose one value from a list.
- elements.htmlForm with a list of available Activities and Inline schemes.
- elementsSVG templates folder.
- activity.svgActivity SVG template.
- comment.svgComment SVG template.
- decision.svgDecision SVG template.
- decisiontable.svgDecisionTable SVG template.
- transition.svgTransition SVG template.
- expressionform.htmlEditing form for Expressions.
- jsonform.htmlForm to display user's form that is defined by the user or json editor.
- legend.htmlForm with legend.
- library.jsonJSON file with process template descriptions.
- libraryProcess templates, see descriptions in library.json.
- AutoTransitions.xml
- DirectAndReverseTransitionsWithApprovalAndDeny.xml
- DirectTransitionsWithApproval.xml
- DirectoryCompress.xml
- ExpressionConditionOtherwise.xml
- ExpressionOtherwise.xml
- FileWriteRead.xml
- HTTPRequest.xml
- LoopForDateTime.xml
- LoopForInt.xml
- LoopForeach.xml
- LoopForeachFromParameter.xml
- ParallelApprovalWithoutBranches.xml
- ParallelProcessesWithWaiting.xml
- ParallelProcessesWithoutWaiting.xml
- ParameterExpressionConditionOtherwise.xml
- ParameterExpressionOtherwise.xml
- ParametersAndExpressions.xml
- Timer.xml
- localization.htmlElement Localization form.
- logs.htmlForm with logs.
- parameters.htmlParameters form.
- parametersform.htmlEditing parameters form for CodeActions.
- processinfo.htmlProcess status display form.
- timers.htmlTimers form.
- toolbar.htmlMain toolbar.
- toolbarinfo.htmlBottom toolbar.
- toolbarside.htmlSide toolbar.
- transition.htmlTransitions form.
- transitiontoolbar.htmlToolbar form displayed at the transition.
Form customization for Workflow Engine v4.2 and previous versions
This section provides information for older and unsupported versions of the Workflow Engine.
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 the 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 theparams.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:
- change the
params
object property. - create a new form object transferring the
params
into object constructor:var form = new WorkflowDesignerForm(params);
- create a save form function; it's a typical function, but you can write custom logic in it
var saveFunc = function (data) {
form.ClearTempField(data);
// write any custom code here
form.parameters.saveFunc(Object.assign(params.data, data));
return true;
}; - call
showModal
function to show modal window.The result code will look like this:form.showModal(saveFunc);
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);
},
},
// ...
});
A customization example for these versions can be read here.
Activity customization and transition rendering on the Designer canvas
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) {
},
},
// ...
});
- Customization function
activity
is responsible for rendering the activity box. Theelement
object in the input is theWorkflowDesignerActivityControl
object instance. Useelement.item
to access the object scheme description. The scheme element itself must be rendered into theelement.control
property. If this function returns false, a standard element will be rendered. - Customization function
transitionActivePoint
is responsible for rendering the transition central point. Theelement
object in the input is theWorkflowDesignerTransitionControl
object instance. Useelement.item
to access the object scheme description. The function should return theKonva.Group
object as a result, which will be displayed on the canvas. If this function returns false, a standard element will be rendered.
More information related to rendering customization can be read in Konva.js documentation and the following example is also available.