How to add bpmn elements to the canvas e.g. via input fields?

Developers
1

Hello guys,

i just started using the bpmn-js Framework and went trough the walktrough.
I installed bpmn-js via npm and made a small webserver to start the appilcation.

Now if i want to add bpmn elements (Tasks etc.) to the Modeler with e.g. input fields (Dropdown with different Elements for example), how can i achieve that? For now these do not get attached to any other element, i just want to understand the concept on how to create valid bpmn elements outside the default way.

Any help is appreciated. Thanks in advance.

2

The ElementFactory module is a good starting point for this.

Here is a simple example on how to use it for creating a simple task: https://codesandbox.io/s/create-task-element-nhxo6

3

Thank you, that already helps a lot.
Where do I find all the available functions of the ElementFactory?
https://github.com/bpmn-io/diagram-js/blob/master/lib/core/ElementFactory.js doesnt list the used functions.

4

That’s the ElementFactory you’re searching

5

Thanks :slight_smile:

Will look into this and try things out.

1 Like
6

You may also find this project interesting: https://github.com/bpmn-io/bpmn-js-cli

7

Hey together, thanks for the great advices.

We already made some great progress in this project and can model simple BPMN with a User guided Form. Technically i create an array with the help of cli for this. See an example:
image

Now with gateways comes great complexity (since they can have N sequence flows and additional gateways within) and i dont know if there is a proper way to handle this with forms, do you guys have any tips for this scenario?
Is there also an easy way to draw connections within my Gateways Sector? Still trying to figure how to this in the best way, i guess with proper variable names i can see the individual path.

8

Hi Steven,

can you please explain what “Gateways Sector” means and what in particular you are trying to achieve in more detail?

If you want to continue modeling using API or CLI, the Modeling via API might be helpful. It also includes a snippet for connecting shapes.

Regards
Max

9

Oh there is an API now? Nice.

Im trying to achieve generating valid BPMN out of a HTML/JS Form.
See this screenshot for some basic information (It’s german though):

Screenshot

image

With “Gateways Sector” i mean the section between the two gateways in the above screenshot. The task in between these are seperated in 2 sequence flows (lanes or how you would call it. so they work in parallel) for example.

Will it be easier working with the API than with CLI for my scenario?

10

Hi Steven,

I think the CLI is sufficient.

But also without the CLI this should be straightforward, see this sandbox

If you have an additional issue, I would recommend to open another thread.

Best
Max