Append a text annotations to a task

Developers
1

Hi, i’m new in the bpmn world. I’m trying to append programmatically a text annotations to a task.
thanks

2 Likes
2

Programmatically creating and adding shapes and connections is possible. A good starting point is the starter example that let’s you try out the modeler without any setup. You can modify this example to your needs e.g. add code that adds a text annotation to the diagram.

// after importing the diagram

// you can get hold of any component of the modeler
var elementFactory = bpmnModeler.get('elementFactory'),
  elementRegistry = bpmnModeler.get('elementRegistry'),
  moddle = bpmnModeler.get('moddle'),
  modeling = bpmnModeler.get('modeling');

// get the element we want to append the text annotation to
var startEvent = elementRegistry.filter(function(element) {
  return element.type === 'bpmn:StartEvent';
})[0];

// create the new text annoatation we want to append
var textAnnotation = elementFactory.createShape({
  type: 'bpmn:TextAnnotation',
  businessObject: moddle.create('bpmn:TextAnnotation', {
    text: 'FOO'
  })
});

// finally append the new text annotation to our shape
modeling.appendShape(startEvent, textAnnotation, {
   x: 100,
   y: 100
});

I know there’s a lot to unwrap here. If you want to understand what’s going on under the hood check out the source code of the involved components (e.g. Modeling).

Hope that helps.

3 Likes