Creating a new task type

Developers Modeler
1

Hi there,
I’m trying to extend modeler so a new task type could be added whether using context pad or by adding a task then using popup-menu or whatever other approach possible.
I’ve read all the documents and examples which BPMN-IO amazing developers have provided.
But after spending a couple or more weeks on trying all these examples, I couldn’t find my way towards my goal.
IS there anyone who could give me a hint what am I missing? or it could be a lot more helpful if a simple (step by step like for dummies :roll_eyes:) walk-through for this was possible?
Regards

ps: I wasn’t sure if it’s possible to extend moddle by adding new task type till I read some topics and figured others have done such
ps: sorry for the long description

2

We will of course try to help you! To do this, it would be great if you could do some work to prepare us with more details.

  • Could describe your full use case in an orderly manner?
  • What have you already tried out? Is there any code you already used to solve your problem? Can you share it inside a CodeSandbox?
3

Hi @Niklas_Kiefer,
In the way of completing my thesis work, I have to add a new task type for analysts in order to give them the possibility of querying and inserting into some sort of a knowledge base (a knowledge graph).
What I have tried so far is I was able to create a new icon according to bpmn-font guidelines and added that to a context pad.
but when I click on the new item in the context pad it shows errors.
then I figured there should be something I’ve been missing so tried examples related to element factory but that come to a dead-end.
now I think I should have some sort of create function and for example in the context pad code have something like this:

'append.cusom-task': {
        group: 'model',
        className: 'custom-task-class-name',
        title: translate('Append Custom Task'),
        action: {
          click: appendCustomTask,
          dragstart: appendCustomTaskStart
        }
      }

first is this right? second, how do I do that?
I thought I could do that in a custom element factory but now I’m not sure.

By the way thank you for your quick response; that’s really promising and I really appreciate it.
ps: sorry if I didn’t use the CodeSandBox link that you sent. actually I didn’t know how to work with it (please don’t be disappointed of me :sweat_smile:)
ps: again sorry for this long message

4

What I have tried so far is I was able to create a new icon according to bpmn-font guidelines and added that to a context pad.

How does your custom task look like?
Do you have any moddle descriptors defined for it?

but when I click on the new item in the context pad it shows errors.

What kind of errors?

Again, these questions would be easier to solve for you and for us if you could provide the stuff inside a CodeSandbox. You can also post the code here, but a Sandbox would make our lives much easier. So maybe worth it to try it out :wink:

5

if you mean the extension I must define in json format yes I have.

ok I give it a try.
this is what I ended up with: CodeSandBox

@Niklas_Kiefer I made it like the way it is shown in the Sandbox and when I click on the custom icon a triangle appends to my diagram. and now I have some more questions.
first of all how can I change that so it could be like the icon for my task that I designed formerly?
secondly I couldn’t figure out how to do it with popup-menu instead of context pad. Is there a way to do that?

again thanks for your support

1 Like
6

What do you mean by that?

secondly I couldn’t figure out how to do it with popup-menu instead of context pad. Is there a way to do that?

Just like you did with a custom context pad provider, you can do this for the replace menu. Unfortunately, there is no example for this currently, but we have an extension, which uses this thing.

7

Hi @Niklas_Kiefer

I wanna append an appropriate icon instead of a triangle. I’ve read BpmnRenderer.js and apparently I have a short knowledge of svg so I’m currently spending time on that.

thank you @Niklas_Kiefer. you really helped me out of my situation.