Adding linting plugin to web modeler

Developers Modeler
1

How do I add camunda-modeler-linter-plugin to my camunda web modeler?
I tried installing the plugin npm i camunda-modeler-linter-plugin and then tried calling the register plugin
registerBpmnJSPlugin({
init: [
function(linting) {
linting.setLinterConfig(customLinterConfig);
linting.active = true;
}
]
});

I cant get this to work.
I understand that on desktop modeler you dump the plugin into plugin into plugins folder but how add any given plugin such as camunda-modeler-linter-plugin into web modeler. Any example of a web modeler consuming a plugin would really help.

2

Anyone, can share an example of web modeler consuming a plugin such as camunda-modeler-linter-plugin ?

3

Hi,
camunda-modeler-linter-plugin is bpmn-js-bpmnlint bundled as a modeler plugin.

To use it in a bpmn-js instance, you want to use this Repo: GitHub - bpmn-io/bpmn-js-bpmnlint: A bpmnlint plug-in for bpmn-js.

4

I am doing this:

import camundaLintModule from ‘camunda-modeler-linter-plugin’;

bpmnModeler = new BpmnModeler({
container: ‘#js-canvas’,
propertiesPanel: {
parent: ‘#js-properties-panel’
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
formPropertiesProviderModule,
camundaLintModule

],
linting: {
bpmnlint: customLinterConfig,
active:true
},
moddleExtensions: {
form: formModdleDescriptor
}
});

Am I missing something?

5

import camundaLintModule from ‘camunda-modeler-linter-plugin’;

As mentioned here, you can’t use the Modeler plugin directly in your bpmn-js Modeler, you have to use the bpmn-js extension (bpmn-js-bpmnlint).

6

Thanks Niklas,

Well that’s how I initially started off.

I had this code in place using, bpmn-js-bpmnlint:

import customLinterConfig from ‘…/.bpmnlintrc’;
import lintModule from ‘bpmn-js-bpmnlint’;

bpmnModeler = new BpmnModeler({
container: ‘#js-canvas’,
propertiesPanel: {
parent: ‘#js-properties-panel’
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
formPropertiesProviderModule,
lintModule

],
linting: {
bpmnlint: customLinterConfig,
active:true
},
moddleExtensions: {
form: formModdleDescriptor
}
});

Now, this works for me and I get linting. How do I tie in camunda-modeler-linter-plugin linting into bpmn-js-bpmnlint, is the question then. I understand that camunda-modeler-linter-plugin has to be a plugin into bpmn-js-bpmnlint and then I use bpmn-js-bpmnlint in my bpmn-js instance. But I need to know how to hook in the plugin into bpmn-js-bpmnlint.
Very new to bpmn, so apologies if this is a basic question.

7

thisis my .bpmnlintrc

{
“extends”: [
“bpmnlint:recommended”,
“plugin:camunda/recommended”
]
}

8

How do I tie in camunda-modeler-linter-plugin linting into bpmn-js-bpmnlint, is the question then.

I fear I don’t quite get yet what you want to achieve. Can you maybe describe what parts of camunda-modeler-linter-plugin you need on top of bpmn-js-bpmnlint?

I’m speaking of features / use cases here.

9

I need to replicate the linting thats available on camunda desktop modeler onto the web modeler.

BTW, this is exactly how my code is placed right now

where in I use bpmn-js-bpmnlint and hook it up into my modeler into additionalModules and then add the plugin (.bpmnlintrc) into the inter as below:

const linting = bpmnModeler.get(‘linting’);
linting.setLinterConfig(customLinterConfig);

Like mentioned previously, the .bpmnlintrc has the camunda plugin into it:

{
“extends”: [
“bpmnlint:recommended”,
“plugin:camunda/recommended”
]
}

Thanks again, Niklas

10

For example this linting error shows up on desktop modeler:
ity_1emng6a - A must have a defined <Message Reference>
But doesnt on the web modeler for me at the moment.

I tried both the below distributions:
import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-platform/Modeler’;
and
import BpmnModeler from ‘camunda-bpmn-js/lib/camunda-cloud/Modeler’;

11

So, first of all, to which linting feature do you refer to? To this (built-in)

image

or to this (the plugin)

image

Note that these two features are independent of each other, e.g., the first (built-in) has nothing to do with bpmn-js-bpmnlint.

12

Thanks for the reply,

I dont refer to the built-in, I dont even know if the built-in can be used in the web modeler. If it can be, I may be good enough for me.
I use the plugin.
Please note, that I intend to use the web-modeler which is integrated into my application.

13

Thanks for the provided information. I created a CodeSandbox to show how it would work.

I assume you retrieved errors like “[bpmn-js-bpmnlint] Invalid lint rules configured.” somewhere in the console? That’s because simply inserting the .bpmnlintrc config file does not work, it needs to be bundled correctly so bpmnlint can work with it (cf. documentation).

In the example CodeSandbox, I simply transformed the config to the bundled JS file, which is also described in the attached docs.

14

Thank you!
I will check this out.

15

Hello Niklas,

I dont see all the linting errors in the sandbox. Like I said I want to replicate the desktop linting in web modeler. I think the built in is what I am looking for.
How do I enable the built-in linter in web modeler or alternatively replicate all those linting rules in the bomn-jsbpmnlint. Thanks again!

-Amjad

16

Anything on this @Niklas?
How do I enable inbuilt linting in web-modeler or alternately replicate it on bpmn-jsbpmnlint.

17

The lint rules used in the Camunda Desktop and Web Modeler can be found here: GitHub - camunda/bpmnlint-plugin-camunda-compat: A bpmnlint plug-in for Camunda BPMN compatibility.

The bottom panel listing the lint errors is not part of any plugin. You’ll have to build it yourself.

1 Like