How to use BPMN modeler in a React application

Developers Modeler
1

I want to use BPMN.iO in my react js web application and below mentioned are questions:

  1. How to create new BPMN diagram by drag and drop bpmn shapes for particular user.
  2. How to get created BPMN flow diagram(JSON/XML format to retrieve) and show the same in another page for that user.

Thanks in advance

Answer

You can instantiate the BPMN editor in your React app in an effect hook or componentDidMount life-cycle callback.

The following shows an example how to instantiate the BPMN editor and mount it into a React provided DOM container reference:

import BpmnModeler from 'bpmn-js/dist/bpmn-modeler.production.min.js';

import React from 'react';

export default class ReactEditor extends React.Component {
  constructor() {
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    const container = this.containerRef.current;

    this.bpmnViewer = new BpmnModeler({ container });
  }

  componentWillUnmount() {
    this.bpmnViewer.destroy();
  }
  
  render() {
    return (
      <div ref={ this.containerRef }></div>
    );
  }
}

This technique is also used by react-bpmn.

2

Hi @sathiyamoorthy!

  1. How to create new BPMN diagram by drag and drop bpmn shapes for particular user.

Can you be a bit more specific with this use case? What scenario do you want to describe?

  1. How to get created BPMN flow diagram(JSON/XML format to retrieve) and show the same in another page for that user.

I think what you’re looking for is the saveXML API.

const { xml } = await modeler.saveXML();

You can use the exported XML then wherever you want.

3

Thanks for the reply Niklas_Kiefer.

STEP 1: I want to create a new BPMN diagram in my react js project using the modeler concept in BMPN. how to import this in react js? and i have attached an screenshot of my expected output.
STEP 2: Second thing is like, I want to get the XML/JSON of created BPMN diagram. Which was created in step1 to use in some other part of my project.

Example: Am creating new BPMN diagram in react js. after creation i have save button onclicking save button i want XML of created JSONExpected_Output

4

Question 1: Did you check out this example? Next to this, how to embed bpmn-js into a React application was asked quite often in this forum, you can use the search function.

Question 2: As I already said in my previous comment, the saveXML API is what you’re looking for.

5

Answer 1: Yes i have tried out https://github.com/bpmn-io/react-bpmn this example and it showing blank page. Not able see BPMN shapes on left side for flow creation. Missing feature is highlited in red mark.

BPMN.io_creation|1366x768 BPMN.io_missing

6

Sorry, I just saw the react-bpmn module only embeds the NavigatedViewer, not the Modeler.

You can simply create another React component, but using the Modeler instead.

import BpmnJS from 'bpmn-js/dist/bpmn-modeler.production.min.js';
7

Thanks Niklas, It is working now. But i have another issue.

  1. Unable to drag and drop icons and also not able to type text in icon.

Attached Screenshot FYR.
Unabletodrop|1366x768

8

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

9

Thanks Niklas_Kiefer,

I have implemented successfully

10
11

Hi,
how to enable “save” button based on drag and drop tools. If user drag and drop any shapes then enable save button else disable. Is there any envent to know about this?

12

Hello @sathiyamoorthy I’m facing same issue as urs. How did u implemented drag and drop?

1 Like
14

Hello @sathiyamoorthy, can you share the source code.

15