I’ve tried to write a plugin on my own since 2 weeks. With the plugin-example, custom-control-example and moddle-example.
But I failed all the time.
So my request is:
Is here somebody who knows how to write a plugin for custom-elements which will appear in the palette with an own image?
For example: some new Tasks - same rectangle but another image
Some new events - same circle but another image
I’m ready to pay for that because I see no way to do it on myself.
Sorry to hear you’re having such a hard time with the plugin. Though it is an advanced topic, maybe with a little help you can write it yourself. Let’s start with what exactly you’re trying to achieve in terms of customizing bpmn-js and worry about bringing it into the Camunda Modeler later. I’d suggest heading over to the bpmn.io forum which is focused on the bpmn.io toolkit which bpmn-js is part of. You’ll find a lot of topics discussing custom elements already but if none of them helps feel free to open a new topic. Make sure to provide enough context so we can help you.
Thank you for your answer philipp.
I read many examples/plugins/readme-files on github, installed them, looked how they work and so on.
As well as in the bpmn.io-forum.
The people are always linking to the examples on github.
What I want to achieve is:
Add some custom tasks, events and one dataobject.
Custom means here: they have their own name and their own image/icon.
They can appear either in the palette or context pad - it doesnt matter.
So the plugin which is near to that is that one:
Lets talk about the first one:
Here is shown how to add an existing task the “ServiceTask” to the palette.
But how I can add my own tasks, events and object?
Also this example doesn’t work after “npm install” - there are errors which can’t be fixed with “npm audit fix”.
In the second one there are like I understand new elements “QualityAssurance” and “AnaylisDetails” made in the qa.js-file.
But that one works after “npm install” and “npm run”
My problem is I don’t exactly understand in which files I have to change/add code and sometimes how this code has to look like:
I tried to add code in the file “CustomPalette.js” in the directory /app/custom (to extend the palette) and in qa.js in /resources to add my own elements
qa.js was like this:
{
“name”: “QualityAssurance”,
“uri”: “http://some-company/schema/bpmn/qa”,
“prefix”: “qa”,
“xml”: {
“tagAlias”: “lowerCase”
},
“types”: [
{
“name”: “AnalyzedNode”,
“extends”: [
“bpmn:FlowNode”
],
“properties”: [
{
“name”: “suitable”,
“isAttr”: true,
“type”: “Integer”
}
]
}
And I changed it to:
{
“name”: “ReaderTask”,
“superClass”: [ “Element” ],
“properties”: []
},
{
“name”: “ReaderEvent1”,
“superClass”: [ “Element” ],
“properties”: []
},
CustomPalette.js was this:
getPaletteEntries(element) {
const {
create,
elementFactory,
translate
} = this;
function createServiceTask(event) {
const shape = elementFactory.createShape({ type: 'bpmn:ServiceTask' });
create.start(event, shape);
}
return {
'create.service-task': {
group: 'activity',
className: 'bpmn-icon-service-task',
title: translate('Create ServiceTask'),
action: {
dragstart: createServiceTask,
click: createServiceTask
}
}
}
}
And I changed it to:
getPaletteEntries(element) {
const {
create,
elementFactory,
translate
} = this;
function createReaderTask(event) {
const shape = elementFactory.createShape({ type: 'bpmn:ReaderTask' });
create.start(event, shape);
}
function createReaderEvent(task) {
const shape = elementFactory.createShape({ type: 'bpmn:ReaderEvent1' });
create.start(task, shape);
}
return {
'create.reader-task': {
group: 'activity',
className: 'bpmn-icon-reader-task',
title: translate('Create ReaderTask'),
action: {
dragstart: createReaderTask,
click: createReaderTask
}
},
'create.reader-event': {
group: 'activity',
className: 'bpmn-icon-reader-event',
title: translate('Create ReaderEvent'),
action: {
dragstart: createReaderEvent,
click: createReaderEvent
}
}
}
}
I added CSS-classes to the css-file in /app/css with a background-image to add a custom icon to this task and event.
But I don’t know if its the right way to add icons to the tasks. And it also didn’t work.
After adding code and execute “npm install” there are always errors which can not be fixed with “npm audit fix”.
And also I mentioned that this plugin-examples on github above are different to for example the linter-plugin.
When I install linter I can see what the plugin is doing in the camunda-modeler.exe itself.
The others need “npm run” and after that I can open my browser with localhost:5000 and kind of modelling there.
So after 2 weeks I get more and more confused. I really want to use the modeler but I’m getting hopeless about this custom stuff.
Like I said I’m ready to pay for help or donate to camunda. Whatever it takes.
I don’t know why but there was en error about posting more links than two. But here is the second example-plugin about which I talked above.
You cannot add new Elements to the BPMN namespace, that is the most important takeaway from the example. bpmn:MyCustomElement is not valid BPMN. As the example states (An example of how to support custom elements in bpmn-js while ensuring BPMN 2.0 compatibility.) it maintains BPMN 2.0 compatibility. The BPMN 2.0 specification has an extension mechanism that is used in the example:
You can add a custom qa:suitable attribute to the existing bpmn:Task element.
<bpmn2:task id="Task_1" name="Examine Situation" qa:suitable="70">
...
</bpmn2:task>
You can add entirely custom elements like qa:AnalysisDetails using bpmn:ExtensionElements.
<bpmn2:task id="Task_1" name="Examine Situation" qa:suitable="70">
<bpmn2:outgoing>SequenceFlow_1</bpmn2:outgoing>
<bpmn2:extensionElements>
<qa:analysisDetails lastChecked="2015-01-20" nextCheck="2015-07-15">
<qa:comment author="Klaus">
Our operators always have a hard time to figure out, what they need to do here.
</qa:comment>
<qa:comment author="Walter">
I believe this can be split up in a number of activities and partly automated.
</qa:comment>
</qa:analysisDetails>
</bpmn2:extensionElements>
</bpmn2:task>
The first question is: What is ReaderEvent1 supposed to represent? Is it a BPMN event with custom attributes/elements. Then you need to create the extension in such a way as shown in the example.
Does this help?
I don’t want to add a custom qa:suitable attribute to the existing bpmn:Task element.
And also don’t wanna add entirely custom elements like qa:AnalysisDetails using bpmn:ExtensionElements.
ReaderEvent for example or ReaderTask should look and act like usual BPMN tasks and events but only with an own name and icon.
I’ll attach a file/screenshot which shows exactly what I want to achieve / add to the modeler.
You gave me something looking like xml code.
I changed it to something else - is that right?
<bpmn2:task id=“Task_1” name=“ReaderTask”>
<bpmn2: outgoing>SequenceFlow_1</bpmn2:outgoing>
<bpmn2: extensionElements>
</bpmn2:extensionElements>
</bpmn2:task>
And when it’s right - where do I put this code?
in which file?
Is my code from the last post completely wrong and also the files which I have chosen?
qa.js and CustomPalette.js
Or is only the type wrong - so it has to be:
const shape = elementFactory.createShape({ type: ‘bpmn:Task’ });
→ Task instead of ReaderTask - because ReaderTask is not valid BPMN.
Can you maybe tell me which files in that example need to be changed?
And it would be amazing when you could give me an example of changes in the files.
When I get it to add one task or event. Then I can do the rest by myself.
And just want to mention the last time:
If its a question of payment - just send me a direct message or e-mail: a.mausbach439@gmail.com
What are you trying to build and how is it related to BPMN? Looking at these symbols I’m starting to question whether bpmn-js is the right tool for the job.
Im trying to build:
Add these symbols into the modeler
and then want to use them trough drag & drop.
Creating bpmn models.
For example:
A readerTask can be used like a ServiceTask
But a readerTask has an own icon.
When bpmn-js is not the right way.
Which way is better or easier for that case?
If a reader task is a service task under the hood the XML could look like this:
<bpmn:serviceTask myCustomNamespace:type="reader" />
It’s the same as the qa:suitable="70" attribute that I already mentioned. Based on that attribute you can render the task differently. Again, all of this is shown in the example.
Its not a service task
Its just a task
In the example is nowhere explained which files should be changed
Philipp the example doesnt help me
So what is it? Anyway, I’m not sure how to help you. I think the example is quite comprehensive.
I mean these tasks and events which I want to add have no special properties or something like that.
Their behaviour can be like a ServiceTask.
But these elements in themselves are not directly a servicetask.
I’ll try to do it again with the example.
Just my last question is about your message that the bpmn-js maybe isn’t the right way to do it for my case.
Is there maybe another option you can recommend for adding customs Tasks and Events to the palette?
(squares and circles with other icon)
Or is maybe the bpmn-model-api like here:
https://docs.camunda.org/manual/latest/user-guide/model-api/bpmn-model-api/extension-elements/
A better option?
Philipp thank you very much for your answers and your time.
May God bless you.
bpmn-js is a library for BPMN and extensions of that notation. If your diagrams have no BPMN semantics I wouldn’t recommend using it. bpmn-js is built on top of diagram-js which is a general-purpose diagram library. It might make sense to build your diagram editor on top of that library or a similar one. Basically, if the answer to Do you only want to use custom elements? is Yes then I’d say don’t use bpmn-js.
They should have simply linked you to their other thread.
I’m not sure that BPMN is the best base-language to build it from either.
@GotnOGuts Thanks for the context. I’m not sure why it wasn’t provided in the first place.
So it seems like this is really supposed to be an extension of BPMN. With all the information I’ve already provided and the custom elements example it should be possible to implement this.