Custom UI to configure the BPMN elements/shapes

Developers Modeler
1

Hi,

I am trying to provide custom palette and props ui to build the BPMN.

Below is the high-level process i am following. Appereciate if you can validate the approach

  1. The palette will have custom entries. (ex: a service task with a known java delegate class and couple of know input params)
  2. Once the entry is dropped onto canvas, i create the shape using modeling.createShape with type as bpmn:ServiceTask.
  3. Then the business object is populated with known info. (with code similar to below)
var bussObj = shape.businessObject;
bussObj.extensionElements = moddle.create('bpmn:ExtensionElements');
var inputOutput = this.moddle.create('camunda:InputOutput');
bussObj.extensionElements.get("values").push(inputOutput);
var inputParams = inputOutput.get("inputParameters");
inputParams.push(moddle.create('camunda:InputParameter', { name: 'testInput', value: 'testVal'}));

Does the above appoarch looks ok. Reading through the forum, i came acrosss multiple ways to edit the bpmn element/shape. using moddle.create(), modelling.updateProperties, elementFactory etc. Could not figure out the differences between the different approaches.

Also, is there any link you can provide that can help in the javascript model of business object.
For example, how do i know that i have to push element to extensionElement.values array. Most of the code above was written with various trail-and-error attempts after looking at the forum threads. However, if the structure of the businessObject is defined somewhere … it would help us a lot. Ex: how do i add an input params with camunda:script as a child to it.

Thanks & Regards,
Harsha.

2

just now identified a way to add camunda:script child to an inputParameter.

var inputScript = moddle.create(‘camunda:Script’, { scriptFormat: ‘groovy’, value: ‘test_groovy_script_template’});
inputParam[‘definition’] = inputScript;

this gives the appropriate XML.

But again identifying this was a trail-and-error attempt. This is affecting the development a LOT. Is there a better way to identify these things.

Awaitting your reply.

Thanks,
Harsha.

3

Hi,
Can someone please help me with my queries above.

Thanks,
Harsha.

4

Have you checked out this guide: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-elements