BPMN Event in React Diagram Component

21 Oct 202523 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
  • Intermediate
  • NonInterruptingStart
  • NonInterruptingIntermediate
  • ThrowingIntermediate
  • End

The eventproperty of the node allows you to define the type of the event. The default value of the event 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 and 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 None Trigger Start event BPMN Shape None Trigger Interupting event BPMN Shape None Trigger Intermediate event BPMN Shape None Trigger NonInteruptingIntermediate BPMNShape None Trigger Throwing Intermediate None Trigger End event event BPMNShape
Message Message Trigger Start Event BPMN Shape Message Trigger NonInterupting Event BPMN Shape Message Trigger Intermediate Event BPMN Shape Message Trigger NonInteruptingIntermediate Event BPMN Shape Message Trigger ThrowingIntermediate Event BPMNShape Message Trigger End Event BPMN EndShape
Timer Timer Trigger Start Event BPMNShape Timer Trigger NonInterupting Event BPMN Shape Timer Trigger Intermediate Event BPMN Shape Timer Trigger NonInteruptingIntermediate Event BPMN Shape Timer Trigger Throwing intermediate Timer Trigger End Event BPMN EndShape
Conditional Conditional Trigger Start BPMN Shape Conditional Trigger NonInterupting BPMN Shape Conditional Trigger Intermediate BPMN Shape Conditional Trigger NonInteruptingIntermediateBPMNShape Conditional Trigger Throwing intermediate BPMNShape Conditional Trigger End BPMN shape
Link Link Trigger Start BPMN Shape Link Trigger NonInterruptingStart BPMN Shape Link Trigger Intermediate Event BPMNShape Link Trigger NonInterrupting intermediate BPMN Shape Link Trigger ThrowingIntermediate Event BPMN Shape Link Trigger End BPMN Shape
Signal Signal Trigger Start Event BPMN Shape Signal Trigger NonInterrupting Event BPMN Shape Signal Trigger Intermediate Event BPMN Shape Signal Trigger NonInterrupting Event BPMN Shape SignalThrowing Trigger Intermediate Event BPMN Shape Signal Trigger End Event BPMN Shape
Error Error Trigger Start Event BPMN Shape Error Trigger Start Event BPMN Shape Error Trigger Intermediate Event BPMN Shape Error Trigger NonInterrupting intermediate BPMN Shape Error Trigger Throwing intermediate BPMN Shape Error Trigger End Event BPMN Shape
Escalation Escalation Trigger Start Event BPMN Shape Escalation Trigger Non-Interrupting Event BPMN Shape Escalation Trigger Intermediate Event BPMN Shape Escalation Trigger Non-Interrupting Event BPMN Shape Escalation Trigger Throwing Intermediate Event BPMN Shape Escalation Trigger End Event BPMN Shape
Termination Termination Trigger Start Event BPMN Shape Termination Trigger NonInterruptingStart Event BPMN Shape Termination Trigger Intermediate Event BPMN Shape Termination Trigger NonInteruptingIntermediate Event BPMN Shape Termination Trigger Throwing intermediate Event BPMN Shape Termination Trigger End Event BPMN Shape
Compensation Compensation Trigger Start Event BPMN Shape Compensation Trigger NonInterruptingStart Event BPMN Shape Compensation Trigger Intermediate Event BPMN Shape Compensation Trigger NonInteruptingIntermediate Event BPMN Shape Compensation Trigger Throwing Intermediate Event BPMN Shape Compensation Trigger End BPMN Event Shape
Cancel Cancel Trigger Start Event BPMN Shape Cancel Trigger NonInterruptingStart Event BPMN Shape Cancel Trigger Intermediate Event BPMN Shape Cancel Trigger NonInteruptingIntermediate Event BPMN Shape Cancel Trigger ThrowingIntermediate Event BPMN Shape Cancel Trigger End Event BPMN Shape
Multiple Multiple Trigger Start Event BPMN Shape Multiple Trigger Non-Interrupting Event BPMN Shape Multiple Trigger Intermediate BPMN Shape Multiple Trigger Non-Interrupting Event BPMN Shape Multiple Trigger Throwing Intermediate Event BPMN Shape Multiple Trigger End Event BPMN Shape
Parallel Parallel Trigger Start Event BPMN Shape Parallel Trigger Non-Interrupting Event BPMN Shape Parallel Trigger Intermediate Event BPMN Shape Parallel Trigger End Event BPMN Shape Parallel Trigger ThrowingIntermediate Event BPMN Shape Parallel Trigger End Event BPMN Shape