BPMN activity in Blazor Diagram Component

12 Nov 202419 minutes to read

The Activity is the task that is performed in a business process. It is represented by a rounded rectangle.

There are two types of activities. They are listed as follows:

Task: It occurs within a process and is not broken down to a finer level of detail.
Collapsed Sub-Process: It occurs within a process and is broken down to a finer level of detail.

You can specify the any one of the above activity type using the ActivityType property of Bpmn Activity.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize the diagram's nodes collection.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets the shape to activity.
            Shape = new BpmnActivity() 
            { 
                ActivityType = BpmnActivityType.Task 
            },
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Send Task BPMN Shape

BPMN activity task

The TaskType property of the Bpmn Activity allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the value of TaskType property is set to None. This is shown by a small event symbol in the top of the corner. The following code explains how to create different types of BPMN tasks.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets the shape to activity.
            Shape = new BpmnActivity()
            {
                ActivityType = BpmnActivityType.Task,
                // Sets the type of the task to Send.
                TaskType = BpmnTaskType.Send
            },
        };
        nodes.Add(node);
    }   
}

You can download a complete working sample from GitHub

Send Task BPMN Shape

The various types of BPMN tasks are tabulated as follows.

Shape	Image	Description
Service		A Service task is a task that uses a web service, an automated application, or other kinds of service in completing the task.
Send		A Send task represents a task that sends a message from one to another. The task is completed once the message has been sent.
Receive		A Receive task indicates the wait for the arrival of a certain message. The task is completed once the message has been received.
Instantiating Receive		A receive task is used to instantiate a process that is the receive task replace the message start event.
Manual		A Manual task is a task that is performed without the aid of any business process execution engine or any application.
Business Rule		A Business Rule task is used to synchronously execute one or more rules.
User		A User task represents that a human performer performs the task with the use of a software application.
Script		A Script task is an automated activity when a process execution arrives at the Script task, the corresponding script is executed.

BPMN activity collapsed sub-process

A Collapsed Sub-Process is a group of tasks that is used to hide or reveal details of additional levels. The following code explains how to create a Collapsed Sub-Process.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets the shape to activity.
            Shape = new BpmnActivity()
            {
                // Sets activity type to CollapsedSubProcess.
                ActivityType = BpmnActivityType.CollapsedSubProcess
            },
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Collapsed Subprocess BPMN Shape

Loop

Loop is a task that is internally being looped. The Loop property of Bpmn Activity allows you to define the type of loop. The default value for Loop is None.

You can define the Loop property in BPMN Activity, as shown in the following code.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{       
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Defines the shape to activity.
            Shape = new BpmnActivity()
            {
                ActivityType = BpmnActivityType.Task,
                Loop = BpmnLoopCharacteristic.Standard,
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Standard Task BPMN Shape

The following table contains various types of BPMN loops.

LoopActivity	Task	Subprocess	Description
None			None of the shape shows in the sub-process.
Standard			Loop marker indicates that the sub-process repeats itself in the sequence.
SequenceMultiInstance			Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three horizontal lines indicate the sequential execution.
ParallelMultiInstance			Multi-Instance marker indicates that the sub-process can run with other identical sub-processes simultaneously. The three vertical lines indicate that the instances will be executed in parallel.

Compensation

IsCompensation is triggered when the operation is partially failed and enabled it with the IsCompensation property of the Bpmn Activity. By default, the IsCompensation property is set to false.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Defines the shape to activity.
            Shape = new BpmnActivity()
            {
                ActivityType = BpmnActivityType.Task,
                // Set compensation to true.
                IsCompensation = true,
            }
        };
        nodes.Add(node1);
    }
}

You can download a complete working sample from GitHub

IsCompensationActivity Task BPMN Shape

Call

A Call activity is a global sub-process that is reused at various points of the business flow. To create a Call activity, enable the IsCall property of the Bpmn Activity.

NOTE

By default, the IsCall property is false.

* This Property is only applicable for Task Type Activity.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes"/>

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",         
            // Defines the shape to activity.
            Shape = new BpmnActivity()
            {
                ActivityType = BpmnActivityType.Task,
                // Sets call to true.
                IsCall = true,
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

IsAdHocActivity CollapsedSub-Process BPMN Shape

Ad-Hoc

An ad-hoc sub-process is a group of tasks that are executed in any order or skipped in order to fulfill the end condition and set it with the IsAdhoc property of Bpmn Activity.

NOTE

By default, the IsAdhoc property is false.

* This Property is only applicable for Collapsed Sub-Process Type Activity.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique id of the node.
            ID = "node1",
            // Defines shape to activity
            Shape = new BpmnActivity()
            { 
                ActivityType = BpmnActivityType.CollapsedSubProcess, 
                IsAdhoc = true
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

IsAdHocActivity CollapsedSub-Process BPMN Shape

SubProcessType

SubProcessType represents the type of task that is being processed. The SubProcessType property of subprocess allows you to define the type of SubProcessType. By default, it is set to Default.

@using Syncfusion.Blazor.Diagram

@* Initialize Diagram *@
<SfDiagramComponent Height="600px" Nodes="@nodes" />

@code
{
    // Initialize the node collection with node.
    DiagramObjectCollection<Node> nodes;

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node = new Node()
        {
            // Position of the node.
            OffsetX = 100,
            OffsetY = 100,
            // Size of the node.
            Width = 100,
            Height = 100,
            // Unique Id of the node.
            ID = "node1",
            // Sets shape to Activity.
            Shape = new BpmnActivity() 
            { 
                ActivityType = BpmnActivityType.CollapsedSubProcess, 
                SubProcessType = BpmnSubProcessType.Event,
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Event Boundary BPMN Shape

The following table contains various types of BPMN boundaries.

SubProcessType	Image	Description
Call		It is a global sub-process that is reused at various points in the business flow.
Event		The event sub-process is a sub-process that is triggered by an event. An event sub-process can be added at the process level or at any sub-process level.
Transaction		It is a specialized sub-process that involves payment.
Default		The task that is performed in a business process. It is represented by a rounded rectangle.