BPMN Event in Blazor Diagram Component

7 Jul 202210 minutes to read

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 - indicates the beginning of the process and every business process start with an event.
  • Intermediate - indicates the middle of the process.
  • End - indicates the beginning of the process and every business process end with an event.

The event property of the node allows you to define the type of the event. The default value of the event is start. The following code example explains how to create a BPMN event.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@* Initialize Diagram *@
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            //Size of the node
            Width = 100,
            Height = 100,
            //Unique Id of the node
            Id = "node1",
            Shape = new DiagramShape()
            {
                //Sets type to Bpmn and shape to Event
                Type = Shapes.Bpmn,
                BpmnShape = BpmnShapes.Event,
                // Set the event type to End
                Event = new DiagramBpmnEvent() { Event = BpmnEvents.End }
            }
        };
        NodeCollection.Add(node);
    }
}

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 to None. The following code example explains how to create a BPMN trigger.

@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

@* Initialize Diagram *@
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>

@code{
    //Defines diagram's node collection
    public ObservableCollection<DiagramNode> NodeCollection { get; set; }

    protected override void OnInitialized()
    {
        NodeCollection = new ObservableCollection<DiagramNode>();
        DiagramNode node = new DiagramNode()
        {
            //Position of the node
            OffsetX = 100,
            OffsetY = 100,
            //Size of the node
            Width = 100,
            Height = 100,
            //Unique Id of the node
            Id = "node1",
            Shape = new DiagramShape()
            {
                //Sets type to Bpmn and shape to Event
                Type = Shapes.Bpmn,
                BpmnShape = BpmnShapes.Event,
                // Set the event type to NonInterruptingIntermediate and set the trigger as message
                Event = new DiagramBpmnEvent()
                {
                    Event = BpmnEvents.NonInterruptingIntermediate,
                    Trigger = BpmnTriggers.Message
                }
            }
        };
        NodeCollection.Add(node);
    }
}

The following table illustrates the type of event triggers.

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 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    
Conditional Conditional Trigger Start BPMN Shape Conditional Trigger NonInterupting BPMN Shape Conditional Trigger Intermediate BPMN Shape Conditional Trigger NonInteruptingIntermediateBPMNShape    
Link     Link Trigger Intermediate Event BPMNShape   Link Trigger ThrowingIntermediate  Event 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 Intermediate Event 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 End  Event BPMN Shape
Compensation Compensation  Trigger Start Event  BPMN Shape   Compensation Trigger Intermediate  Event BPMN Shape   Compensation  Trigger  Throwing Intermediate Event  BPMN Shape Compensation  Trigger End BPMN  Event Shape
Cancel     Cancel Trigger Intermediate  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