I am experiencing a very similiar problem than the one described in this thread initially. I am modifying the bpmn-js so it shows a custom item in the palette. However when I click on it, it does create a real shape. I even tried what was suggested here but I keep getting a javascript error "Uncaught Error: unknown type ". Can someone tell me if I am missing something?
Try to debug the code to gain additional understanding of where the error originates.
From the demand for adding custom elements we should probably add an example how to add custom elements in the near future.
1 Like
Could you guys give me some input on your custom element use cases? It helps us building an example that is actually useful for you.
(a) When do the additional elements get created? (during import, post import, via user interaction)
(b) How are the custom elements getting persisted? (in BPMN 2.0 XML, server side, other file)
In my use case the palette should be extended with other elements (and some of the existing ones should be removed). The user only creates a model with these elements. There will be no imports. The model should be stored in an XML file for further processing.
(a) via user interaction
(b) XML file
Thank you for building an example!
@Kerstin Based on your feedback I got two additional questions:
- After saving the diagram, the BPMN 2.0 XML contains the custom elements?
- Given that is true, what should happen if the user reopens the diagram with existing custom elements?
The underlying issue I would like to clarify, if or how the custom elements should reside in the BPMN 2.0 document. If they should be stored in the document, they must be attached in a BPMN compliant manner. If they should be stored externally these overlays or however you call them can be added separately and have to be saved separately, too.
The custom elements can be stored in a separate XML file and do not have to be BPMN compliant.
Thanks a lot!
Just two more questions:
- How can I connect custom elements? (a custom element must only be connected to another custom element)
- Is there a chance to store the custom elements and their connections in a XML file? (can be included in the BPMN file or in another separated one)
Allow custom connections to be created, create a new context pad entry for custom elements and make sure to override modeling.connect() to create the correct connection type.
It is up to you, where you store the custom elements. In the example we choose JSON, simply because it is dead easy to implement. If you would like to have your custom XML datastucture or hijack the <bpmn:documentation /> tag to inline custom elements into the BPMN 2.0 XML, go ahead. We do the latter in the bpmn-js commenting example.
Is there a way to extend the ContextPadProvider in my own application or do I have to change the bpmn-js code?
I have tried to include a CustomContextPadProvider with the entries for the custom elements, but it does not work. Here is the index.js of my application:
window.jQuery = require(‘jquery’);
var angular = require(‘angular’);
var ngModule = module.exports = angular.module(‘app’, [
require(‘./dialog’).name,
require(‘./editor’).name
]);
var CustomModeler = require(‘./custom-modeler’);
var overrideModule = {
contextPadProvider: [ ‘type’, require(‘./custom-modeler/custom/CustomContextPadProvider’) ]
};
var modeler = new CustomModeler({ container: ‘#canvas’, keyboard: { bindTo: document }, additionalModules: [ overrideModule ]});
window.bpmnjs = modeler;
I’m still struggling with the connection of custom elements due to the issue that I do not exactly know how to add a context pad entry…
Along the way, I tried to add labels to the custom elements (like the label of a BPMN start event). So far, the result is the following: When I double-click on a custom element, a textbox opens and I can insert text. But the text disappears, when the textbox looses focus. Which part of the code is responsible for the feature that the content of the textbox is added as label to the element?
All in all, I need labels - that stay 
- and I need to verify the content of the label. For instance, I have a list of attributes (from another API) and the label has to be one valid attribute of this list.
Thanks for your help! I’m using your project as basis for the prototype of my master thesis. So, hopefully, I will be able to implement all the features in time!
The above code should override the contextPadProvider, providing only your context pad entries. It is not necessary to change any code in bpmn-js in order to update the context-pad.
Labels are just elements like any other on the diagram. If you would like them to be displayed, add them to the canvas during element creation and provide a renderer that draws the label text. You can do all that as part of your modeler extension.
The label related part you got working already is the directEditing feature, that allows you to change text directly from the element.
PS: Put your code up somewhere and we can have a quick look into it.
Here is my code.
So my CustomContextPadProvider seems to be incorrect. The context pad for my custom elements does only show a trash can for deleting the element.
Do I need to create a CustomImporter to use the ‘addLabel’ function?
Your CustomContextPadProvider is not compiling due to this syntax error.
Trying to build your project from the command line clearly indicated that issue:
Running "browserify:watchModeler" (browserify) task
>> /.../event-query-modeler/app/lib/custom-modeler/custom/CustomContextPadProvider.js:52
>> CustomContextPadProvider.$inject = [ 'contextPad', 'connect', 'elementFactory' ];
>> ^
>> ParseError: Unexpected token
As written before, labels are just normal elements. Add them once you add your custom elements. Just make sure it has the type label and a labelTarget set, pointing to the custom element that is labeled by it.
You can copy and paste from the BPMNImporter code. I suggest you to debug the whole thing at least once though in order to understand a bit of what is happening.
If you have troubles getting it working it might be simpler for you to just use internal (i.e. embedded) labels.
Thanks a lot for the help! It’s working now 
I tried running the above example on my browser, using the instructions provided. But when I did, the triangle and circle element didn’t get loaded.
On further inspection, found out that the url in
.icon-custom-triangle {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg/" fill="#3CAA82" width="270" height="240"><path d="M8,40 l 15,-27 l 15,27 z"/></svg>');
}
wasn’t being loaded. “Failed to load the given url”
Any help would be appreciated.
clearly explain about custom elements to add with property panel
Hi , Need your help to download github code with download and re open the existing bmpn file ,
Need to create flow chart diagram and also need to import xml file from bmpn
