Bpmn-js add extensionElements

[SebastianAT]

Hello,

i wanted to ask if someone can explain me how i can add custom extensionElements (property type=“mode” value=“on”) programmically to an custom bpmn-js project.

I achieved to add a custom Task directly from the palette but now i am stucking here.

I read that i can somehow reference the businessObject and call getExtensionElements or addExtensionElements but i did not figured it out.

I jumped into all the examples like add property panel extenstion and so on but for me it is not clear how i can add custom properties to a task.

You see here in the picture that a custom task is already within the palette and also a console.log message where i see that this task do not have any children.

Maybe i can do the following: simple adding children (extensionElements → properties → property).

this is the custom code:

Thanks in Advance.
Best regards
Sebastian

[SebastianAT]

I solved it like this.

There is only one problem left.
If i download the process i clearly see that there is a property added but in the moddeler form bpmn-js this does not get recognized.

Code:

In the modeler exe it is there in the properties panel but in custom bpmn-js not.

Custom Bpmn-js modeler:

[philippfromme]

You should never use moddle.createAny. As you can see it doesn’t lead to the expected result. Use moddle.create.

const moddle = modeler.get('moddle');

...

const { businessObject } = shape;

let extensionElements = businessObject.get('extensionElements');

if (!extensionElements) {
  extensionElements = moddle.create('bpmn:ExtensionElements', { values: [] });
}

const camundaProperties = moddle.create('camunda:Properties', { values: [] });

camundaProperties.$parent = extensionElements;

extensionElements.set('values', [ camundaProperties ]);

const camundaProperty = moddle.create('camunda:Property', { name: 'foo', value: 'bar' });

camundaProperty.$parent = camundaProperties;

camundaProperties.set('values', [ camundaProperty ]);

modeler.get('modeling').updateProperties(shape, { extensionElements });

Extension properties are defined here: https://github.com/camunda/camunda-bpmn-moddle/blob/master/resources/camunda.json

Full example: Add Extension Elements Example - CodeSandbox

[SebastianAT]

Appreciate your help. Thank you.