Create Participant and split it

Hello ,
I want to know how we can create a participant with a lane ( I need to add a title for participant and its lane ). We can do this if we split participate into two lanes and delete one of them .
Example :
image
Thank you for help .

Regards,

The easiest way to create a single lane without having to calculate its size is to create two using modeling.splitLane and remove one of the two created lanes.

// (1) create participant
const participant = elementFactory.createParticipantShape();

// (2) add participant to diagram
modeling.createShape(
  participant,
  { x: 400, y: 200 },
  canvas.getRootElement()
);

// (3) create two lanes
modeling.splitLane(participant, 2);

const lanes = participant.children.filter(child => is(child, "bpmn:Lane"));

// (4) remove first lane
modeling.removeShape(lanes[0]);

// (5) set name of remaining lane
modeling.updateProperties(lanes[1], { name: "Foo" });

Here’s a full example: https://codesandbox.io/s/create-lane-programmatically-tkw79 :+1:

Thank you for help ! I just want to know if we can do a drag and drop instead of set coordinates X Y of shapes
modeling.createShape(
participant,
{ x: 400, y: 200 },
canvas.getRootElement()
);

Thank you

Drag and drop of what exactly? Please be specific about what you want to do.

Drag and drop participant with one lane

This is how you’d create a participant with a lane programatically:

const participant = elementFactory.createParticipantShape();

const lane = elementFactory.createShape({
  type: "bpmn:Lane",
  x: LANE_INDENTATION,
  y: 0,
  width: participant.width - LANE_INDENTATION,
  height: participant.height
});

participant.children.push(lane);

lane.parent = participant;

create.start(mouse.getLastMoveEvent(), [participant, lane]);

Full example: https://codesandbox.io/s/create-participant-with-lane-programatically-k4y9n

2 Likes

Thank you :slight_smile: