Adding text dynamically to custom elements

Developers Modeler
1

Hi,
my goal is to add text to show Tasks and DataStoreReference elements names .

The relevant code

const task = elementFactory.createShape({ type: 'bpmn:Task' });
var task_name = 'task1';
  
modeling.createShape(task, { x: 100, y: 100, width: 100, height: 80 },
    modeler_canvas.getRootElement()
);
var textAnnotation = elementFactory.createShape({
  type: 'bpmn:TextAnnotation',
  businessObject: moddle.create('bpmn:TextAnnotation', {
    text: task_name
   })
});
modeling.appendShape(task, textAnnotation, {
  x: 100,
  y: 100  }
);

and I get
task_name_a

where the red text is what I’m trying to achieve.
Thank you for your help.

2

So you want to render the label of the text annotations in a different position? Why that?

3

I’d need the task_name to be displayed in the middle of the shape Task. Maybe this is not handled by bpmn:TextAnnotation…

4

Sorry, then I misunderstood you. Here is the part of the task renderer. As you can see, the label of a task is already rendered in the middle. What do you expect then?

5

Thank you, now I know TextAnnotation is not what I’m looking for. I’ve seen the renderEmbeddedLabel() and renderLabel() functions. My goal is to set semantic.name to the value of a local variable, a variable that is set automatically without the need for the user to click on the shape and enter the text.
I create the Task shape as follow:

const task = elementFactory.createShape({ type: 'bpmn:Task' });
var task_name = 'task1';
modeling.createShape(task, { x: x_task, y: current_Y, width: task_width, height: task_height },
   modeler_canvas.getRootElement()
);

How can I use the renderEmbeddedLabel() on the task element created with the code above?
Thank you in advance for your help

1 Like
6

The renderer is using an element’s label to render it. We have API for that to update the label whenever you want: Modeling#updateLabel.

const modeling = modeler.get('modeling');

const element = modeling.createShape(...); // as you are already doing

// update the label of an element
modeling.updateLabel(element, 'new Label');
3 Likes