Creating a sub-process and setting properties

Hi,

I’m rather new to bpmn-js, and I couldn’t understand how I can create a subprocess with service tasks inside.In order to better explain what I want to achieve, here is an example of what I want to achieve: Anmerkung%202020-01-22%20100900

I already have a custom palette entry to call the function to create a subprocess, but I don’t know how to pre-populate the subprocess with other elements like shown in the image above.

EDIT: I could achieve this with the following snippet:

let parent = canvas.getRootElement();
      const testSubTaskShape = elementFactory.createShape({
        type: 'bpmn:SubProcess',
        isExpanded: true,
        id:"sub_1"
      });
      testSubTaskShape.businessObject.name = "Sub Process";

      const testStartTaskShape = elementFactory.createShape({
        type: 'bpmn:StartEvent',
        id: "subStart_1"
      });

      const testServiceTask1 = elementFactory.createShape({
        type: 'bpmn:ServiceTask',
        implementation: "External",
        id:"ser_1"
      });

      testServiceTask1.businessObject.name = "Initiate Service";

      const testServiceTask2 = elementFactory.createShape({
        type: 'bpmn:ServiceTask',
        id:"ser_2"
      })

      modeling.createShape(testSubTaskShape, { x: 300, y: 250 }, parent);
      modeling.createShape(testStartTaskShape, {x:200, y:250}, testSubTaskShape);
      modeling.appendShape(testStartTaskShape, testServiceTask1, {x:testStartTaskShape.x+150, y:250}, testSubTaskShape);

However, now I can’t figure how to change the properties of the service tasks. I want to change the implementation type to a connector and change the connector properties, including the input and output parameters. How can I achieve this?

1 Like

Hey,

Have you tried Modeling.updateProperties API?

Hi oguz,

firstly, thank you for your response. I haven’t tried updateProperties API before, but I have followed steps from this thread, and now I’m seeing ERROR Error: “unknown type camunda:connector in console.

Snippet:

let extensionElements = moddle.create('bpmn:ExtensionElements');
let connector = moddle.create('camunda:connector');
extensionElements.values.push(connector);
....
modeling.updateProperties(testServiceTask1, {
        extensionElements: extensionElements
      })

Hey,

Could you please share the console output including the stack trace. So that we can debug which part of the code causes this behavior.

Did you include the camunda-bpmn-moddle into your Modeler?

Try camunda:Connector. :wink:

Hi oguz,

here is the rest of the console output.

ERROR Error: "unknown type <camunda:connector>"
    mapTypes index.esm.js:518
    getEffectiveDescriptor index.esm.js:543
    getType index.esm.js:768
    create index.esm.js:736
    createTask custom-palette.service.ts:44
    trigger Palette.js:302
    _init Palette.js:150
    1 index.esm.js:356
    Angular 7
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        invokeTask
        invokeTask
        globalZoneAwareCallback
core.js:6014:19
    Angular 4
        defaultErrorLogger
        handleError
        next
        schedulerFn
    RxJS 5
        __tryOrUnsub
        next
        _next
        next
        next
    Angular 11
        emit
        onHandleError
        invoke
        run
        runOutsideAngular
        onHandleError
        handleError
        runTask
        invokeTask
        invokeTask
        globalZoneAwareCallback

Hi Niklas, yes it is already included.

Hi philipp, when I tried camunda:Connector I saw this in console:

ERROR TypeError: "extensionElements.values is undefined"
    createTask custom-palette.service.ts:46
    trigger Palette.js:302
    _init Palette.js:150
    1 index.esm.js:356

Thank you all for the responses.

When adding your first extension element make sure that extensionElements is an array and not undefined.

Hi philipp,

thank you for your response once again. I fixed the issue by writing the following:

extensionElements.get('values').push(connector);

Yes, that also solves the issue. Using get returns an array if the property has been specified as such.