How to add the Panel Properties in the modeler example?

Developers
1

Guys,
I used the modeler example in an app, but when I try to send the XML created to the Zeebe Broker. It returns me this error:

Element: Activity_1ei96q5
    - ERROR: Must have exactly one 'zeebe:taskDefinition' extension element

Probably because I did not defined the “type” from a service task, but in the modeler I cant do that without the properties panel.

Is there any implementation of panel properties that the panel is exactly the same of the Zeebe Modeler ?

Thanks

2

Hi,

can you please be a bit more specific?

I used the modeler example in an app,

Which example did you use?

I suspect you just created a generic BPMN model and tried to execute deploy it to Zeebe?

If you want to create a Zeebe compliant (executeable) BPMN using a custom modeler, when initiating bpmn-js and the properties-panel make sure to:

  1. Load GitHub - camunda/zeebe-bpmn-moddle: Zeebe moddle extensions for BPMN 2.0 as moddleExtension
  2. Load the ZeebePropertiesProvider for the properties-panel zeebe-modeler/client/src/app/tabs/bpmn/custom/properties-provider/index.js at develop · zeebe-io/zeebe-modeler · GitHub

Regards
Max

3

Hi,

It was exactly what I tried to do.

I generate an model with the BPMN-JS modeler, but it was not compliant with the Zeebe Broker.

What I need is an JavaScript with the modeler + the zeebe panel to control the elements properties as Zeebe expect.

Are there any project whit this functionality ? Or exist some easy way to do this, I am not a JS expert.

Thanks,

4

Hi,

well did you follow the steps I posted above?

I just double checked and it is not super easy. Since you were saying “I am not a JS expert”, I am afraid you might get stuck. In detail:

  1. Load https://github.com/zeebe-io/zeebe-bpmn-moddle as moddleExtension

=> This can easily be done. Just import zeebe-bpmn-moddle and load it as bpmn-js moddleExtension. E.g., something like:

var bpmnJS = new BpmnJS({
  additionalModules: [
    ...
  ],
  container: '#canvas',
  propertiesPanel: {
    ...
  },
  moddleExtensions: {
    zeebe: zeebeModdleExtensions
  }
});
  1. Load the ZeebePropertiesProvider for the properties-panel https://github.com/zeebe-io/zeebe-modeler/blob/develop/client/src/app/tabs/bpmn/custom/properties-provider/index.js

So the Properties-Panel requires a PropertiesProvider. For Camunda BPMN, this propertiesProvider is in the GitHub - bpmn-io/bpmn-js-properties-panel: A properties panel for bpmn-js. repo. However, for Zeebe BPMN, this provider is located in zeebe-modeler repo (here). So what you would need to do is to manually copy/paste / extract this provider from the zeebe-modeler repo and then integrate it into your project (reason: unlike bpmn-js-properties-panel, zeebe-modeler is not on npmjs). Afterwards it is straightforward, and you can instantiate your bpmn-js with a custom properties panel. Something like:

var bpmnJS = new BpmnJS({
  additionalModules: [
    propertiesPanelModule,
    myCustomExtractedZeebePropertiesProviderModule
  ],
  container: '#canvas',
  propertiesPanel: {
    parent: '#properties'
  },
  // make camunda prefix known for import, editing and export
  moddleExtensions: {
    zeebe: zeebeModdleExtensions
  }
});

(Please also read GitHub - bpmn-io/bpmn-js-properties-panel: A properties panel for bpmn-js.).

We know that having the zeebePropertiesProvider baked into zeebe-modeler repo is unfortunate. This is something we would like to fix mid-term (actually, we already started extracting such stuff out. Example is GitHub - camunda/zeebe-bpmn-moddle: Zeebe moddle extensions for BPMN 2.0).

1 Like
5

Maxtru,

Very Thank man, It’s working very well!!

6

Glad to hear that!

Would you mind sharing your solution / is that possible?

7

Yes, I can share what I did.

First, I download the project bpmn-js-examples, and use the properties-panel as the base of the project.

First I changed the package.json file and change the dependency of “camunda-bpmn-moddle”: “^4.0.1” to “zeebe-bpmn-moddle”: “^0.4.0”.

I change in the app/index.js file, the CamundaMoodle, to the ZeebeMoodle, as follow:

//import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
import zeebeModdleDescriptor from 'zeebe-bpmn-moddle/resources/zeebe.json';

In the same file, I change the moodle extensions:

moddleExtensions: {
    //camunda: camundaModdleDescriptor
    zeebe: zeebeModdleDescriptor
  }

Then I run the npm install command to download and install the node modules.

After the modules installed I create a directory named zeebe in the “node_modules/bpmn-js-properties-panel/lib/provider” and put these files inside it.

Then, I come back to the app/index.js file and change the propertiesProviderModule as follow:

//import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/zeebe';

Then I just run the npm install and npm run all .

I think that was It. Sorry by the english errors, and feel free to edit the post to make it more clear.

2 Likes