How to extend bpmn-io with custom elements?

Developers Modeler
21

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 :wink: - 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!

22

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.

23

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?

24

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.

25

Thanks a lot for the help! It’s working now :slight_smile:

26

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. :slight_smile:

27

clearly explain about custom elements to add with property panel

28

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

image

29

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

30