Skip to main content

Designer Appearance Customization

keep in mind

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.

toolbar.html
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.

remember

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:

Form customization for Workflow Engine v4.2 and previous versions​

remember

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 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:

  • 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.
    form.showModal(saveFunc);
    The 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);
            },
        },
        // ...
    });
note

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. The element object in the input is the WorkflowDesignerActivityControl object instance. Use element.item to access the object scheme description. The scheme element itself must be rendered into the element.control property. If this function returns false, a standard element will be rendered.
  • Customization function transitionActivePoint is responsible for rendering the transition central point. The element object in the input is the WorkflowDesignerTransitionControl object instance. Use element.item to access the object scheme description. 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.

More information related to rendering customization can be read in Konva.js documentation and the following example is also available.