Bpmn Events in Angular Diagram component

28 Mar 20259 minutes to read

Event

An event is a common BPMN process model element that represents something that happens during a business process and is notated with a circle. The type 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.

app.component.ts

import { DiagramModule, BpmnDiagramsService,DiagramComponent, NodeModel, BpmnShapeModel  } from '@syncfusion/ej2-angular-diagrams'
import { Component, ViewEncapsulation, ViewChild } from '@angular/core';

@Component({
imports: [
         DiagramModule
    ],

providers: [BpmnDiagramsService],
standalone: true,
    selector: "app-container",
    template: `<ejs-diagram #diagram id="diagram" width="100%" height="580px" [getNodeDefaults] ='getNodeDefaults'>
        <e-nodes>
        <e-node id='node1' [offsetX]=150 [offsetY]=150 [shape]='shape1'></e-node>
        <e-node id='node2' [offsetX]=350 [offsetY]=150 [shape]='shape2'></e-node>
        <e-node id='node3' [offsetX]=150 [offsetY]=350 [shape]='shape3'></e-node>
        <e-node id='node4' [offsetX]=350 [offsetY]=350 [shape]='shape4'></e-node>        </e-nodes>
    </ejs-diagram>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild("diagram")
    public diagram?: DiagramComponent;
    public shape1: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'Event',
        // set the event type as End
        event: {
            event: 'Start',
            trigger: 'None'
        }
    }
    public shape2: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'Event',
        // set the event type as End
        event: {
            event: 'End',
            trigger: 'None'
        }
    }
    public shape3: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingStart and trigger as Timer
        event: {
          event: 'NonInterruptingStart',
          trigger: 'Timer',
        }
    }
    public shape4: BpmnShapeModel = {
        type: 'Bpmn',
        shape: 'Event',
        // Sets event as NonInterruptingIntermediate and trigger as Escalation
        event: {
          event: 'NonInterruptingIntermediate',
          trigger: 'Escalation',
        }
    }
    public getNodeDefaults(node: NodeModel): NodeModel {
        node.height = 100;
        node.width = 100;
        return node;
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

BPMN event trigger

Event triggers are notated as icons inside the circle and they represent the specific details of the process. 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 type of event triggers.

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