Designer Appearance Customization

info

These functions are available in Workflow Engine ≥ 4.0

You can customize appearance of the following designer sections:

• all edit forms for scheme elements;
• activity rendering on the designer canvas;
• transition rendering on the designer canvas;

See example of such change in our blog.

Form customization for the Workflow Engine ≥ 5.0

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.

Form customization for the Workflow Engine < 5.0

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);

  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);
          },
      },
      // ...
  });

Customization of activity 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. 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.
• Customization function 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.