Integration of BPMN in reactjs

Developers Modeler
1

I am trying to integrate BPMN into my react application

this is the app file

import React from “react”;
import “./styles.css”;
import Modeler from “bpmn-js/lib/Modeler”;
import pizzaBpmn from “./sample.bpmn”;

export default function App() {
React.useEffect(() => {
const modeler = new Modeler({
container: canvasRef.current,
});
modeler.importXML(pizzaBpmn);
return () => {
modeler.destroy();
};
}, );
const canvasRef = React.useRef(null);
return <div id=“canvas” ref={canvasRef} style={{ height: “50vh” }}>;
}

I am able to see the elements to the side.

Issues:

  1. unable to drag and drop the elements and create a new process
  2. what changes i need to make so that, when we have an xml to show , need to show or else we need to create a new process.

Screenshot 2023-12-15 at 12.56.34 PM
Screenshot 2023-12-15 at 12.56.34 PM3440×1058 112 KB

Screenshot 2023-12-15 at 1.52.53 PM

2

Is your initial diagram being imported successfully?

3

i am trying to display a saved xml , unable to view

my code:

import React, { useEffect } from ‘react’;
import ‘./App.css’;
import BpmnViewer from ‘bpmn-js/lib/Modeler’;
//import Viewer from ‘bpmn-js/lib/Viewer’;
//import pizzaBpmn from ‘./sample.bpmn’
import BpmnJS from ‘bpmn-js/dist/bpmn-navigated-viewer.production.min.js’;

function App() {
const xml =BpmnJS

const canvasRef= React.useRef(null)
//const canvasRef1= React.useRef(null)
useEffect(() => {
// Create a new instance of the BPMN viewer
//const bpmnViewer = new BpmnViewer({ container: ‘#bpmn-container’ });
const bpmnViewer = new BpmnViewer({ container: canvasRef.current})
//bpmnViewer.get(‘canvas’).zoom(‘fit-viewport’)
const bpmnXML = <?xml version="1.0" encoding="UTF-8"?><bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn:process id="Process_1" isExecutable="false"><bpmn:startEvent id="StartEvent_1"/><bpmn:task id="Task_1" name="Sample Task"/><bpmn:endEvent id="EndEvent_1"/><bpmn:sequenceFlow id="Flow_1" sourceRef="StartEvent_1" targetRef="Task_1"/><bpmn:sequenceFlow id="Flow_2" sourceRef="Task_1" targetRef="EndEvent_1"/></bpmn:process></bpmn:definitions>
// Load and display the BPMN XML
bpmnViewer.importXML(bpmnXML, (err, warnings) => {
if (err) {
console.error(‘Error importing BPMN XML’, err);
} else {
if (warnings.length > 0) {
console.warn(‘BPMN XML loaded with warnings’, warnings);
} else {
console.log(‘BPMN XML loaded successfully’);
}
}
});
// bpmnViewer.createDiagram();
// Clean up the viewer instance on component unmount
return () => bpmnViewer.destroy();
}, [xml]);

return <div id=“canvas” ref={canvasRef} style={{ height: ‘100vh’}}>
}

export default App;

getting ERRORS in CONSOLE:

Error importing BPMN XML Error: no diagram to display
at Object.handleDefinitions (BpmnTreeWalker.js:173:1)
at render (Importer.js:60:1)
at importBpmnDiagram (Importer.js:70:1)
at Viewer.open (Viewer.js:311:1)
at Viewer.importDefinitions (Viewer.js:256:1)
at Viewer.js:215:1
at read.js:871:1

4

Your XML doesn’t contain any DI information. Without that it can’t be displayed. How did you create this XML?

5

I have taken a sample BPMN xml from google.

6

As I said, without the DI the process cannot be displayed.

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.