Getting JSON Body to create BPMN with bpmn-js

Hello together,

I try to work with an express REST API to create valid BPMN with the bpmn-js Framework. I already have a working prototype that works with regular forms (working with bpmn-js-cli).

Im struggling on getting the data from my express server file to the actual logic that includes all bpmn-js related stuff.

So the scenario is like this:

server.js (holds express server) will have the information from my POST Request - I want this information in my file app.js (holds bpmn-js logic). Now I tried serveral approaches of export and import but none worked. As I have little to no experience with webpack, could this be related to that?

The app.js is getting bundled, since bpmn-js requires that?!

Is there any easy way to get the JSON Information from my POST Request to my actual bpmn logic? Im actually out of ideas right now. Maybe you guys already tried something like this and can help out?

Thanks in advance!

This is correct. bpmn-js is a client-side library that requires actual DOM APIs to be present.

You can use bpmn-js entirely without prior bundling. If you do not need bundling, do not add it. Our starters should be the right place for you to checkout if you would like to embed bpmn-js quickly into your app.

To fetch the diagram from your backend use a built-in browser utility such as fetch. Our starters rely on jQuery which provides its own API for data fetching.

Note that you cannot import JSON into the BPMN editor, as it reads BPMN 2.0 XML documents only. Cf. search.

Please be specific what you tried and why that did not work.

1 Like

Hey nikku,

thanks for your response.

What is the advantage of using bpmn-js bundled compared to non-bundled? I am also using the extension bpmn-js-cli to create BPMN Elements with the given information. That gives me a valid xml document in the end. Does that work with the non-bundled version of bpmn-js?

Tried both of these ways:

image

Gonna reply to myself here:

Just using a normal GET Request via fetch (as mentioned by nikku) did the job. Wasnt thinking of that simple solution.

1 Like