Add Label to Shapes with Javascript

Users
1

Hi Everyone,

I have created a shape and I need to add a label on it. The label has to be shown inside the task. How can I do it?
my Code looks like this:

  var test = elementFactory.createBpmnElement("shape", {
        type: "bpmn:Task",
        x: 10,
        y: 10
      });
2

While using the elementFactory, you can simply add a name. Please refer to this thread

3

Thank you very much. I tried both adding name: “a name” to my code and also the one from the thread you referred. My code is a little bit chaotic right now, but I tries it here: [https://codesandbox.io/s/create-task-element-nhxo6?file=/src/index.js:1232-1435]. It keeps giving me error and not updating the task with the label on it. Is it still anything I am missing?

4

Thanks for sharing the sandbox! I don’t see the place where you set the name? Only type and the coordinates.

5

https://codesandbox.io/s/create-task-element-9boso?file=/src/index.js

hope it shows now :slight_smile:

thank you!

6

I modified your solution a bit: https://codesandbox.io/s/create-task-element-uifgt?file=/src/index.js

Note that the name property goes into the business object of an element. By the way, for connecting element, there is the Modeling API to make it easier.

7

Thank you very much. That was a great help. Besides That, is there any possibility to customize each element separately? I know about bpmnRenderer, but that will customize all the element involved. Is there any option I can add the same way that I added name , type and position , but specifically for customization like color, stroke-width, etc.?

Or should I open a new topic for this question?

8

Always makes sense in order to give a better explanation of what you want to achieve. As a first starting point, our custom element examples are a good starting point.

But please do not hesitate open another thread and describe your use case :+1: