Create custom task in submenu

[amsequera]

Hi,
I need to create a few custom tasks in submenu like this:

but when i click in any of them i get this: Uncaught Error: unknown type bpmn:whateverTask.
I included the task in ReplaceOptions.js inside module.exports.TASK and also in BpmnRenderer.js , i have followed several examples like this but none of them seem to work for me , i would appreciatte if somenone can tell me how to do it or show an example.

thank you in advance.

[philippfromme]

What exactly did you do to achieve this? Can you share some code for context?

[amsequera]

Hello and thank you for your early reply,

I added the custom tasks to the module.exports.TASK inside ReplaceOptions.js just like that:
{
label: ‘User Task’,
actionName: ‘replace-with-user-task’,
className: ‘bpmn-icon-user’,
target: {
type: ‘bpmn:UserTask’
}
},
{
label: ‘Upload Document Task’,
actionName: ‘replace-with-upload-task’,
className: ‘bpmn-icon-data-input’,
target: {
type: ‘bpmn:UploadDocumentTask’
}
},
{
label: ‘Revison Cicle Task’,
actionName: ‘replace-with-revision-cicle-task’,
className: ‘bpmn-icon-loop-marker’,
target: {
type: ‘bpmn:RevisionCicleTask’
}
},
{
label: ‘Send Document Task’,
actionName: ‘replace-with-send-document-task’,
className: ‘bpmn-icon-send-task’,
target: {
type: ‘bpmn:SendDocumentTask’
}
},
And after that in BpmnRenderer.js file inside var handlers y added a function for each task like:
‘bpmn:UploadDocumentTask’: function(parentGfx, element) {},

But when i click on any of the custom tasks on the submenu i get this error:

What i want is to get rid of the js error, display the icon inside the task just like when you click on User Task and add it to the xml like:

<bpmn2:task id=“Task_10d3rgt”>
<bpmn2:incoming>SequenceFlow_0cjf848</bpmn2:incoming>
<bpmn2:outgoing>SequenceFlow_0y7v3cf</bpmn2:outgoing>
</bpmn2:task>

I think it has something to do with the bpmn moddle but im not sure, im bit confused because i have already followed a lot of examples and been unable to find a solution.

Thank you again

[philippfromme]

Have you defined your custom types in the meta model? Otherwise they can not be created. You can use this example as a starting point.

[amsequera]

Hi,

Thank you Philip, the example was very helpful to find the solution. Now i have another problem, when i click on upload task document or in any other of the custom task i created the icon does not show inside the task box instead it shows like this:

I dont know how to parametrize the svg so that it fits like the rest of the svg’s inside the task box ,i’m having problems following the documentation, i’m including the code inside PathMap.js like this

this.pathMap = {

…

‘TASK_TYPE_UPLOAD_DOCUMENT’: {
d: ‘M626 103.9C482.9 103.9 339.7 103.9 196.6 103.9L196.6 896.1 803.4 896.1 803.4 286.1C744.2 225.4 685.1 164.7 626 103.9ZM573.9 148.9L573.9 334.8 758.4 334.8 758.4 851.1 241.6 851.1 241.6 148.9C352.4 148.9 463.1 148.9 573.9 148.9ZM618.9 161.2L744.1 289.8 618.9 289.8ZM391.6 182.5L391.6 275.1 285.6 275.1 285.6 354.9 391.6 354.9 391.6 447.5 532.7 315Z’
},

And i also tried adding the height ,width … properties but didn’t work.

thanks for your time.

[philippfromme]

I think the issue is that you’re using absolute coordinates instead of relative coordinates. You can read more about that on MDN. Take the user task symbol as an example. It also uses relative coordinates.

[amsequera]

Thanks, found the solution here

[ehsan_kabiri_33]

Could you share your code? I have the same problem.

[philippfromme]

Please do not necrobump old topics. Instead link to this thread from new topic.