How to create a participant programmatically

Developers
1

Hello together,

i currently try to create N participants (pools) with bpmn-js programmatically.
As I understood I need a process to attach the participant to, correct?

While creating them programmatically works fine so far, they are collapsed when being added (Missing Process I assume).
How do I actually create a Process in a Collaboration?

This is the current result when creating the participant on the Collaboration ID

var participant_2 = modeling.createShape( { type: 'bpmn:Participant'}, { x: 550, y: yaxis }, technical_ids[0].parent );
image

Any help is appreciated! Thanks in advance

2

Hi @Steven1,

you can do something like this:

// (1) Get the modules
const elementFactory = modeler.get('elementFactory'),
      elementRegistry = modeler.get('elementRegistry'),
      modeling = modeler.get('modeling');

// (2) Get the existing process and the start event
const process = elementRegistry.get('Process_1'),
      startEvent = elementRegistry.get('StartEvent_1');

// (3) Create a new participant shape using `createParticipantShape`
const participant = elementFactory.createParticipantShape({ type: 'bpmn:Participant' });

// (4) Add the new participant to the diagram turning the process into a collaboration
modeling.createShape(participant, { x: 400, y: 100 }, process);

See a working example here: https://github.com/bpmn-io/bpmn-js-examples/tree/master/modeling-api (in particular this snippet)

3

Hey @maxtru,

that’s exactly what i am using currently. :sweat_smile:
How would you create a second pool (attached to a new Process?) after the first one is created with the shown snippet?

The screenshot in the original post has the following elements:
image

4

Hi Steven1,

you need to select the collaboration as root for the second participant. Note that two processes will be the result, while only one is executeable.

    // (1) Get the modules
    const elementFactory = bpmnJS.get("elementFactory"),
      elementRegistry = bpmnJS.get("elementRegistry"),
      modeling = bpmnJS.get("modeling");

    // (2) Get the existing process and the start event
    const process = elementRegistry.get("Process_1"),
      startEvent = elementRegistry.get("StartEvent_1");

    // (3) Create a new participant shape using `createParticipantShape`
    const participant = elementFactory.createParticipantShape({
      type: "bpmn:Participant"
    });

    // (4) Add the new participant to the diagram turning the process into a collaboration
    modeling.createShape(participant, { x: 400, y: 100 }, process);

    // (5) Get the collaboration
    const collaboration = elementRegistry.filter(function (element) {
      return is(element, "bpmn:Collaboration");
    })[0];

    // (6) Create yet another participant shape using `createParticipantShape`
    const participant2 = elementFactory.createParticipantShape({
      type: "bpmn:Participant"
    });

    // (7) Add the new participant to the diagram with collaboration as root
    modeling.createShape(participant2, { x: 400, y: 500 }, collaboration);

Please share a codeSandbox if you require more help.

1 Like
5

Thank you @maxtru,

that part // (6) Create yet another participant shape using createParticipantShape fixed my problem. Now the Participant is expanded.
I was just using the part below. Apparently the function createParticipantShape creates a new participant with a new process attached to it.

Problem fixed, thanks. :slight_smile: