Urgent - How to implement bpmn-js with React?

Developers
1

Hello everyone…
I’ve been working on a React bpmn-js project for almost two weeks with little to no luck, and I’ve come here for advice from some experienced bpmn-js users…

Project requirements:

  1. React
  2. Bpmn-js
  3. Bpmn-js custom property panel
  4. Bpmn-js custom palette.

I haven’t found a way to implement all 4 of these requirements together. I’ve been running through a pile of code-sandbox examples and most of them have different plugin versions, making it extremely confusing to migrate and implement wanted features…
I managed to get the bpmn-js to work with a custom property panel and palette, but I couldn’t integrate it inside React…
On the other hand…I’ve managed to implement Bpmn-js with the Custom palette inside React, but had no luck when it came to adding the Custom property panel.
Basically now I’m just spinning in circles retrying everything I’ve already tried…

I would greatly appreciate if someone could help me in adding the custom palette inside the following example: GitHub - bpmn-io/bpmn-js-example-react-properties-panel: An example how to build a simple properties panel for bpmn-js using React

Is there a detailed guide for my specific use case?
Was anyone able to get all 4 requirements to work?

2

What exactly works and what doesn’t?

1 Like
3

Ok, so this is the React project I’m working on: alert-flow-main - CodeSandbox

The component that uses the bpmn-js plugin is the “Starting Diagram” component inside src/Pages
I need to add custom properties panel to this example, but I just haven’t been able to, nothing seems to work…I tried to base my implementation on the “properties-panel-extention” subfolder from the bpmn-examples zip.

Thank you for the reply, your help is truly appreciated :slight_smile:

4

It seems that the issue you are facing with integration into React is due to incompatibilities between React and the Properties panel Extensions. Both use the JSX syntax extension, but the properties panel extension requires the Preact preprocessor to work correctly.

I would recommend to create the properties panel extension in separate project to be transpiled independently from your react project.

Cf. Loader when compiling Spell · Issue #200 · bpmn-io/bpmn-js-examples · GitHub

1 Like
5

I’m afraid I don’t fully understand how to do this…How do I go about it?

6

How do I go about it?

Instead of having a single application, like you currently have, you can create separate project with all your BPMN-JS extensions and compile that before your main project, using preact for the propeties panel entries.

In your main project, you can then import and use the compiled version of the extensions without the compiler clashes.