BPMN Events in React Diagram
21 Aug 202624 minutes to read
Overview
An event is a common BPMN process model element that is notated with a circle. Events can occur at the beginning, middle, or end of a process flow.
The types of events are as follows:
- Start: Indicates where a process begins.
- Intermediate: Occurs during the course of a process flow.
- NonInterruptingStart: A start event that does not interrupt the current activity.
- NonInterruptingIntermediate: An intermediate event that does not interrupt the current activity.
- ThrowingIntermediate: An intermediate event that is thrown to trigger a corresponding catch event.
- End: Marks where a process terminates.
The event property of the node allows you to define the type of the event. The default value of the event property is Start. The following code example illustrates how to create a BPMN event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, Inject, BpmnDiagrams } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node = [
{
// Position of the node
offsetX: 150,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as Start and trigger as None
event: {
event: 'Start',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as Intermediate and trigger as None
event: {
event: 'Intermediate',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as End and trigger as None
event: {
event: 'End',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as NonInterruptingStart and trigger as Timer
event: {
event: 'NonInterruptingStart',
trigger: 'Timer',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as NonInterruptingIntermediate and trigger as Escalation
event: {
event: 'NonInterruptingIntermediate',
trigger: 'Escalation',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as ThrowingIntermediate and trigger as Compensation
event: {
event: 'ThrowingIntermediate',
trigger: 'Compensation',
},
},
},
];
// initialize Diagram component
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Add node
nodes={node}>
<Inject services={[BpmnDiagrams]}/>
</DiagramComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent,NodeModel, Inject, BpmnDiagrams, } from "@syncfusion/ej2-react-diagrams";
// A node is created and stored in nodes array.
let node:NodeModel[] = [
{
// Position of the node
offsetX: 150,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as Start and trigger as None
event: {
event: 'Start',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as Intermediate and trigger as None
event: {
event: 'Intermediate',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as End and trigger as None
event: {
event: 'End',
trigger: 'None',
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as NonInterruptingStart and trigger as Timer
event: {
event: 'NonInterruptingStart',
trigger: 'Timer',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as NonInterruptingIntermediate and trigger as Escalation
event: {
event: 'NonInterruptingIntermediate',
trigger: 'Escalation',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Event',
// Sets event as ThrowingIntermediate and trigger as Compensation
event: {
event: 'ThrowingIntermediate',
trigger: 'Compensation',
},
},
},
];
// initialize Diagram component
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Add node
nodes={node}
>
<Inject services={[BpmnDiagrams]} />
</DiagramComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);BPMN Event Trigger
Event triggers are notated as icons inside the circle and represent the specific circumstances that cause the event to occur. The trigger property of the node allows you to set the type of trigger. By default, it is set as none. The following table illustrates the types of event triggers available for each event type.
| Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End |
|---|---|---|---|---|---|---|
| None |  |
 |
 |
 |
 |
 |
| Message |  |
 |
 |
 |
 |
 |
| Timer |  |
 |
 |
 |
 |
 |
| Conditional |  |
 |
 |
 |
 |
 |
| Link |  |
 |
 |
 |
 |
 |
| Signal |  |
 |
 |
 |
 |
 |
| Error |  |
 |
 |
 |
 |
 |
| Escalation |  |
 |
 |
 |
 |
 |
| Termination |  |
 |
 |
 |
 |
 |
| Compensation |  |
 |
 |
 |
 |
 |
| Cancel |  |
 |
 |
 |
 |
 |
| Multiple |  |
 |
 |
 |
 |
 |
| Parallel |  |
 |
 |
 |
 |
 |