Add extra properties for sequenceFlow element in $attr field

Hello all,

I would like to create some shapes and connect them directly via the Modeler Api. Currently I have something like this - I create a task and and an event and connect the via a sequence flow. I also want to add some custom properties to them in the $attr property from the shape. Below is an example of what I’m doing

    const taskOneBO = bpmnFactory.create('bpmn:Task', { id: transitionInfo.StatusStart.Id, name: transitionInfo.StatusStart.Name , customEl : "taskCustomEl"})
    //create Shape
    const taskOneShape = elementFactory.createShape({ type: 'bpmn:Task', businessObject: taskOneBO });
    //add the new task to the Diagram
    modeling.createShape(taskOneShape, { x: 200, y: 100 }, process);

create the event

    const eventBO = bpmnFactory.create('bpmn:IntermediateThrowEvent', { id: transitionInfo.Action.Id, name: transitionInfo.Action.Name, customEl: "EventcustomElement" })
    const eventShape = elementFactory.createShape({ type:'bpmn:IntermediateThrowEvent', businessObject: eventBO });
    modeling.createShape(eventShape, { x: 600, y: 300 }, process);

create the SequenceFlow

   const sequenceBO = bpmnFactory.create('bpmn:SequenceFlow', { id: 'Seq_1', name: `Seq1`, customEl: "seqcustomElement" })
   const sequenceShape = elementFactory.createShape({ type: 'bpmn:SequenceFlow', businessObject: sequenceBO });

and afterwards connect them like this

modeling.createConnection(taskOneShape, eventShape, sequenceShape, process);  

The name of se sequence flow is show correctly “Seq” but the id and customEl are not shown.

Is there something I’m doing wrong ?

Also would this be achievable via autoPlace ?

Something like autoPlace.append(taskOneShape, eventShape, sequenceShape ) ?

Thank you in advance!

Properties inside $attr won’t be serialized when you try to export the diagram. For model extension, check out this example: GitHub - bpmn-io/bpmn-js-example-model-extension: An example of creating a model extension for bpmn-js


I’ve tried to save the diagram and I see that the property is added in xml .
When I use bpmnModeler.saveXML I get an xml that looks something like this
<bpmn:task id="Status_1" name="Status_Start" customEl="taskCustomEl" />
I can see that the customEl from the businessObject is added to it.

Is there something I’m getting wrong ? It’s like having extra customProperties.

Sorry, it’s just serialized incorrectly. When you try to open the diagram again, it will complain about unknown properties. Please have a look at the example - this is the proper way to add custom properties.