Custom shape for Tasks with additional information

Developers Modeler
1

Hi everybody,

I’m trying to override userTask’s shape in the modeler. I checked the custom-elements example but I need more advanced design. What I want to achieve is something like below;

Untitled

I want to display assignee, task label and task description (which you may think custom property) on the modeler. Is it possible?

I tried to draw boxes (red and blue in my case) using tiny-svg lib but I couldn’t done it yet. I’ve tried to draw rectangles and append them to each other, however I’m getting an error like below;

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

If there are more complex designing (rather than circle, square) examples for tiny-svg library, please let me know. Besides, how could I display custom properties (or assigned user) on modeler?

2

This example will help you: https://github.com/bpmn-io/bpmn-js-example-custom-rendering

3

Yeap, I checked it out however I couldn’t put text in to drawn items (i.e rectangles). Is there any Documentation for tiny-svg?

4

What exactly are you looking for? tiny-svg is low-level library for working with SVG. It’s really simple.

5

I can managed to draw two rectangles and append them to each other for UserTask using CustomRenderer. Code snippet is below.

if (is(element, "bpmn:UserTask")) {
      const head = drawRect(parentNode, 100, 20, TASK_BORDER_RADIUS, "#52B111");
      const body = drawRect(head, 100, 80, TASK_BORDER_RADIUS, "#52B166");
      prependTo(body, parentNode);
      svgRemove(shape);
      return shape;
}

And here is the output svg,

Capture

What I would like to do;

  • put hello text in the upper rectangle (like a title),
  • put some description (which will be custom property for the task) inside the lower rectangle
  • remove user icon (you can see it is still on the back)
6

What exactly is keeping you from doing this?

7

I don’t know how to do or where to look. For example, which code blocks add the user icon? Where exactly I could place my string to the drawn rectangle?

8

I had some progress on these issue. I found where the icons (user icon in upper left top for bpmn:UserTask and X in the center of bpmn:ExclusiveGateway) added to the model and it’s okay. However, for the textRenderer part, I couldn’t make it work. Is there any example how to use textRenderer within CustomRenderer?