Add text in a custom-element

Hi :slight_smile: ,

how can I make a custom element text-editable?
You can label a bpmn task. I would like to realize the same with my customelements.

What are you referring to as custom elements? Are you using a specific example?

I am using your “bpmn-js-example-custom-shape”:
Elements like the circle.

What’s your use case for customizing elements? Have you had a look at this overview of customizing elements? The example you’re currently using is probably not the right example for your use case.

At the end, I want to create cloud-like elements that are text-editable.

Are you of the opinion that the example “bpmn-js-example-custom-shape” is not the right one? Which one would you recommend to me?

What are your custom elements supposed to represent?

The clouds should represent softgoals.
An Example:

1 Like

Are you sure that bpmn-js is the right solution for the job? There are numerous general purpose rendering toolkits out there that may be better suited for a top-down tree.


That’s ok. I only need clouds (for example, as a png, similar to the nyan-cat example), which is text-editable.

The BPMN does not have the semantics of a top-down tree, is fine and does not bother.

So you still want to use bpmn-js? Makes no sense to me. You’d be much better off just using diagram-js.

Ok, if I take the diagram-js, what bpmn-js is built on, I’m facing the same problem. The element is not writable.

It does not matter if the chart is a top-down-tree or not. It’s about how to make customElements writable.
Why we talk about the meaning of my diagram is unclear to me …

The bpmn task is also writeable element. I would also like to transfer this property to CustomElements.

In general we want to help users by making sure that they are on the right track regarding the user of our tools.

Does the following apply to you?

  • You have an underlying BPMN 2.0 diagram
  • You would like to add cloud-shaped custom element to it

If that is the case, checkout our freshly updated custom elements guide. Custom elements created this way have direct editing support, out of the box.

If you need full customizability (via bpmn-js-example-custom-shapes), look into our default LabelEditingProvider for inspiration. That one sets up label editing for BPMN shapes. You’d need to roll your own for your custom elements.

Hope that helps you!

Thank you. Here I could make the elements text-editable by adding ‘custom: circle’. Unfortunately, the text is not visible after leaving the text box. If I double-click on the element, the text reappears. What could that be?

I set the custom-circle transparency to 0.2 to check if the text is behind the element. Negative. The text ist just not there. Only when I double-click on the element to get into the edit-mode, the element appears.

You have to render the custom elements text with your CustomRenderer.