Source of demand

I’ve been working on BPMN lately, and I had an idea. Since the integrity of the process should be verified to improve user experience and business integrity when creating the process, the integrity of the actual business requirements also need to be verified. So start to prepare and search for information.

First through the online search to find “based on BPMN-JS process designer verification implementation” easy sample

Also thanks, easy kind

Let’s cut the rest of the nonsense and get started

1. Official example

Github.com/bpmn-io/bpm… Download the source code

npm install
npm run dev
Copy the code

Operation effect:

Basically meet no demand

2. Analysis and use

Combined with sample source code view analysis, core code

New BpmnModeler() // This place is familiarCopy the code

Combine the first solution provided by easy sample to configure

1. Download dependencies

Add the following dependencies to package.json

"Bpmnlint" : "^ 6.4.0", "BPMN - js - bpmnlint" : "^ 0.15.0", "bpmnlint - loader" : "^ 0.1.4", "file - drops" : "^ 0.4.0",Copy the code

2. Create a rule file

Create a new.bpmNlintrc file in your project and use the extends block to inherit from the common configuration:

{
  "extends": "bpmnlint:recommended"
}
Copy the code

3*. Load the program in configurationwebpack.config.js(This place is different from our project, we use VUE)

Load the program in configurationvue.config.js

module.exports = {
     chainWebpack(config) {
         config.module
              .rule('bpmnlintrc')
              .test(/\.bpmnlintrc$/)
              .use('bpmnlint-loader')
              .loader('bpmnlint-loader')
              .end()
     }
}
Copy the code

This will ensure that your build can use the BPMNLint configuration file.

4. Integrate Linter intoBPMN – js

import lintModule from 'bpmn-js-bpmnlint'; import BpmnModeler from 'bpmn-js/lib/Modeler'; import bpmnlintConfig from './.bpmnlintrc'; Bpmnlintrc var modeler = new BpmnModeler({linting: {bpmnlint: bpmnlintConfig}, additionalModules: [ lintModule ] });Copy the code
Now we’re going to do something different in fileDrop Vue that we haven’t heard of before, so let’s look at the code

Menu creates a button

Listen for event callbacks in CustomModeler

 handlerIntegrityCheck () {

      const linting = this.bpmnModeler.get('linting')
      linting.toggle(true);
    },
Copy the code

Ok, the basic effect is there. Although there are problems with the effect style, the checking function is already implemented

Add CSS styles

I looked at the source code and introduced a CSS style and we copied it into our project and referenced it

Into our project

The final result

Follow me in the next article to continue optimizing the bPMN-JS based process designer validation implementation