Generated xml in bpmn io looks weird after Appending shape to bpmn diagram using appendShape

Developers Modeler
1

Hi, I am trying to append shape using elementRegistry as below between two events for bpmn from UI which is displaying bpmn diagram in a flowchart The flow chart has a button after each event/ task to add any usertask in between .
image

I have tried below approach:

  1. remove existing connection between source and event.
  2. append new task to source
  3. connect source and event.
    the xml generated for the flow chart looks very weird in bpmn.io as below
    image 
const processId = this.bpmn.get('canvas').getRootElement().id;
const process = this.elementRegistry.get(processId);
let sequenceFlowObjectArray = this.getAllDiagramElements().sequenceFlowObject;

// removing old connection
this.modeling.removeConnection(this.elementRegistry.get(sequenceFlowObjectArray[index].id));
const sourceEvent = this.elementRegistry.get(item.sourceEventId);
const oldTargetEvent = this.elementRegistry.get(item.targetEventId);

// create shape
let newUserTask = this.elementFactory.createShape({ type: 'bpmn:UserTask' });

// connect shape to source
this.modeling.appendShape(sourceEvent, newUserTask, { x: 400, y: 100 }, process);
const flow1 = this.getNewFlow(sourceEvent.id, newUserTask.id)[0];

// connect shape to previous target
newUserTask = this.elementRegistry.get(flow1.businessObject.targetRef.id);
this.modeling.connect(newUserTask, oldTargetEvent);



Can you help out? or suggest another way to add user task?
2

Hi @Sanjana, welcome!

We have a modeling behavior in place which is doing similar things when dropping an element on a sequence flow, and recreating the connections.

Kapture 2022-03-25 at 14.48.57

Maybe this helps you as a starting point.

3

Hi Niklas,
Thank you that was helpful. I tried using the same in my code, but i am getting error.

let newUserTask = this.elementFactory.createShape({ type: 'bpmn:UserTask' });
const oldTargetEvent = this.elementRegistry.get(item.targetEventId);
this.modeling.insertShape(newUserTask, oldTargetEvent, { x: 400, y: 100 });

i am getting this error - this.modeling.insertShape is not a function
Is there anything wrong with how i am using it? Thanks.

4

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

This way it will be easier to see what is broken in your implementation.