Recently, the department wants to make and approve the Projects in Central And Taiwan. In the early stage, I have investigated some knowledge related to BPMN and NBF process center. Try your hand at creating the Web process editing + data management SDK with React, Midway. Js and bPMn.js.
The background, the whole idea
As a result of the prior understanding of the use of Ali NBF process center. For this widget, we first need to use React and bPMn. js to enable the browser to draw the BPMN 2.0 standard flowchart online. For each Node of the flowchart, we can customize its properties, associated tasks, and the Node.js data service that this Node task calls.
bpmn.js
We can draw a flow chart in accordance with BPMN2.0 standard on the web page. We can also use bPMn. js basic template, attribute template function, on the Web side, from the BPMN 2.0 standard flow chart (arbitrary add nodes, gateways, events and attributes of each node)
Recently, a combination of BPMn. js and React/Umi has been used to create a simple online version of BPMN process editing tool.
Here, I would like to start with the basic technologies (create-react-app, bpmn.js). First, I would like to discuss how to make a simple react online process editor using BPMn.js.
React + bPMn. js Process management – Implement simple BPMN process drawing, choreography
Bpmn. js and React to create a simple online BPMN process management tool. We set up a React project using the create-React-app scaffolding and then introduced bPMn.js via NPM.
Operation steps:
npx create-react-app newapproval
npm install bpmn-js --save
npm install antd --save
Copy the codeFirst-step: initial BPMN flowchart
Because the flowchart presented by BPMN.js is XML-driven SVG. So in the React project, we need to reference a written XML file as an example:
. / utils/testxml. Js:
export const xmlstr =
`
< Process ID ="Process_1" isExecutable="false">
SequenceFlow_0h21x7r
< Task ID ="Task_1hcentk">
SequenceFlow_0h21x7r
`
Copy the codeOk now that we have the static XML file, we can introduce our BPMN in the React code. We need to create a set of divs to be used as containers for the entire BPMN drawing.
BpmnModeler of BPMN-js /lib is then introduced to initialize modeling BPMN graphics.
Once you’ve written the method, just execute it in the uesEffect or componentDidMounted lifecycle.
import { useEffect } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import { xmlstr } from './utils/testxml';
import './App.css';
// Global components
function App() {
let bpmnModeler = null;
useEffect(() = > {
initBpmn();
}, [])
const initBpmn = () = > {
bpmnModeler = new BpmnModeler({
container: '#canvas'.// This is the first element of the array
height: '100vh'}); createBpmnDiagram(); }const createBpmnDiagram = async() = > {// Start plotting the BPMN
try {
const result = await bpmnModeler.importXML(xmlstr);
console.log(result);
} catch(error) {
console.error(error)
}
}
return (
<div className="App">{/* BPMN container */}<div id="canvas" className="container"></div>
</div>
);
}
export default App;
Copy the code.App {
/* background-color: #282c34 */
min-height: 100vh;
}
.container{
width: 100%;
height: 100%;
}
Copy the codeBpmnModeler belongs to an API of BPMN-js. It is defined by new BpmnModeler to determine the existing div node and the corresponding size, and then it is imported by importXML method. We can get the BPMN flowchart effect drawn by this modeler on a web page.
The React project may cause errors when writing the js file.
Bpmn. Modeler API:
Second-step: Add properties panel and draw toolbar
BPMN flowcharts (SVG) alone are certainly not enough. We also need the draw toolbar and properties panel so that we can fully draw the BPMN flowchart on a Web page.
The BPMn.js property panel is a separate NPM package that we need to introduce separately.
Operation steps:
npm install bpmn-js-properties-panel --save-D
npm install camunda-bpmn-moddle --save-D
Copy the codeWith these two packages installed, we can introduce the properties panel in the React project. BPMN 2.0’s Camunda namespace extension will be defined as a module descriptor. With this package, we can freely create BPMN process nodes using BPMN. moddle, and it can also be used in bPMN. Modeler’s Extension.
After that, in the React project, we first see a div node with className as properties-panel. Then introduce propertiesPanelModule, propertiesProviderModule, and camundaModdleDescriptor.
Add corresponding properties to BpmnModeler’s propertiesPane, additionalModules, and moddleExtensions.
// APP.js
import { useEffect } from 'react';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda';
import { xmlstr } from './utils/testxml';
import './App.css';
// Global components
function App() {
let bpmnModeler = null;
useEffect(() = > {
initBpmn();
}, [])
const initBpmn = () = > {
bpmnModeler = new BpmnModeler({
container: '#canvas'.// This is the first element of the array
height: '100vh'.// Add control panel
propertiesPanel: {
parent: '.properties-panel'
},
additionalModules: [
// Left toolbar and node
propertiesPanelModule,
propertiesProviderModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
createBpmnDiagram();
}
const createBpmnDiagram = async() = > {// Start plotting the BPMN
try {
const result = await bpmnModeler.importXML(xmlstr);
console.log(result);
console.log('Properties Panel Data:', bpmnModeler.get('propertiesPanel'));
} catch(error) {
console.error(error)
}
}
return (
<div className="App">{/* BPMN container */}<div id="canvas" className="container"></div>
<div className="properties-panel"></div>
</div>
);
}
export default App;
Copy the code.App {
/* background-color: #282c34 */
min-height: 100vh;
}
.container{
width: 100%;
height: 100%;
}
.properties-panel{
position: absolute;
right: 0;
top: 0;
width: 300px;
}
Copy the code(Step pit: the introduction of BpmnModeler must be written completely, otherwise the page drawing BPMN flow chart will not show the situation.)
This alone is not enough, we need to introduce the corresponding CSS styles so that the drawing tools and properties panels can be displayed. (Here, I put the relevant CSS and files in the main component.)
// mian.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Here is the style of the BPMN workflow drawing tool
import 'bpmn-js/dist/assets/diagram-js.css' // Style the left toolbar and edit the node
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css'
ReactDOM.render(
<App />.document.getElementById('root'));Copy the codeThe result:
Subsequent idea
This article mainly describes how to initially implement an online BPMN process display, drawing tool. Next, how to improve the Demo?
- It is necessary to establish the Node.js server system, and obtain the BPMN flow chart drawn by the user each time with bPMN-JS related events and pass it to the server.
- At the same time, we need to start different events for different nodes and processes, so as to meet different business requirements.
- How to customize BPMN’s palette, properties panel, overall tone, etc.