This is the 19th day of my participation in the Genwen Challenge

The business scenario

Bpmn-js is currently a popular option in the front-end development of workflow drawing, but it itself uses the Camunda template

The Activiti system, which is used by most workflow systems in Korea, has become a rival to Camunda

Simple process drawing is fine, but when it comes to designing related properties such as general parameters/listeners, the bPMN-JS default template does not support them, and the built-in Camunda is preferred

So how do we get BPMN-JS to support Activiti?

plan

XML analysis

Camunda generated template, the variables are defined like this:

<bpmn2:userTask id="firstBranchTask" name="Branch Mission one." camunda:assignee="${assignee}">
Copy the code

Activiti looks like this:

<bpmn2:userTask id="firstBranchTask" name="Branch Mission one." activiti:assignee="${assignee}">
Copy the code

As I briefly observed, the current difference between Camunda and Activiti is the prefix of the variable

So there’s a neat solution: manually replace the XML text

Manual replacement

First, we need to generate the process editor like this:

import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';

let bpmnModeler = new BpmnModeler({
    container: canvas,
    propertiesPanel: {
      parent: '#jpanel'
    },
    additionalModules: [
      propertiesProviderModule,
      propertiesPanelModule
    ],
     moddleExtensions: {
       camunda: camundaModdleDescriptor
    }
});
        
watch: {
    'bpmnFile': {
      handler(val) {
        const string = JSON.parse(JSON.stringify(this.bpmnFile));
      // string.replace(/camunda/, 'activiti');
      this.bpmnFile = string.replace(new RegExp('camunda:'.'g'), 'activiti:'); }}}Copy the code

When importing XML files, we manually replace keywords to support variable display:

bpmnModeler.importXML(xml.replace(new RegExp('activiti:'.'g'), 'camunda:'), err= > {
    if (!err) {
        addBpmnListener();
        addModelerListener();
        addEventBusListener();
    }
});
Copy the code

The author uses VUE for development, so we can use a listening mode to process keywords in XML while the user is editing the process:

watch: {
    'xml': {
        handler(val) {
            const string = JSON.parse(JSON.stringify(val));
            this.xml = string.replace(new RegExp('camunda:'.'g'), 'activiti:'); }}}Copy the code

Modify the source code

In fact, a close look at the code shows that in order to support custom attributes, we actually need to do two things:

  1. PropertiesPanelModule: Custom property panel implementation
  2. PropertiesProviderModule: custom properties model

Examples are also available, and can be found in Exmaples

Since Camunda is not much different from Activiti at the moment, I replaced Camunda content and packaged it to NPM

You can install it using YARN: yarn add houtaroy-bPMn-js-properties-panel-activiti

Then modify the import content to use:

import propertiesProviderModule from 'houtaroy-bpmn-js-properties-panel-activiti/lib/provider/activiti';
Copy the code

conclusion

Bpmn-js supports Camunda in my opinion, but officially supports the extension of custom attributes

Domestic content of this aspect is less

I hope to maintain a custom property pack for Activiti in the future, and I will continue to update my NPM content (after all, I am simply replacing Camunda).