BPMN Expanded Sub-Process in Blazor Diagram Component

21 Aug 202413 minutes to read

An ExpandedSubProcess is used to frame a part of the diagram, shows that elements included in it logically belong together, and has no other semantics other than organizing elements. It is represented by a rounded rectangle.

Create BPMN ExpandedSubProcess

To create a ExpandedSubProcess, define the Shape property of the node as BpmnExpandedSubProcess and enable allow drop property of the node.

The following code example explains how to create a BPMN Expanded Sub-Process.

@using Syncfusion.Blazor.Diagram

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

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

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

You can download a complete working sample from GitHub

BPMN Expanded Sub-Process

Add BPMN Nodes into BPMN ExpandedSubProcess

To add a BpmnNode into BpmnExpandedSubProcess, define the BpmnNodeViewModel object and add that to the Children collection of the BpmnExpandedSubProcess.

The following code example explains how to add BPMN node to a BPMN Expanded Sub-Process using Children property.

@using Syncfusion.Blazor.Diagram

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

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

    protected override void OnInitialized()
    {
        nodes = new DiagramObjectCollection<Node>();
        Node node1 = new Node()
            {
                ID = "node1",
                OffsetX = 300,
                OffsetY = 300,
                Width = 70,
                Height = 70,
                Shape = new BpmnActivity() { ActivityType = BpmnActivityType.Task }
            };
        nodes.Add(node1);
        Node node2 = new Node()
            {
                ID = "node2",
                Width = 300,
                OffsetX = 500,
                OffsetY = 300,
                Height = 300,
                Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop,
                Shape = new BpmnExpandedSubProcess()
                {
                    Children = new DiagramObjectCollection<string>() { "node1" }
                }
            };
        nodes.Add(node2);
    }
}

You can download a complete working sample from GitHub

ExpandedSubProcess BPMN Shape

Add BPMN Nodes into BPMN ExpandedSubProcess at runtime

  • Drag and drop the BPMN nodes to the BPMN ExpandedSubProcess.

While resizing or dragging the child element, if the child element bounds are within the ExpandedSubProcess bounds, the ExpandedSubProcess size will be updated along with that.

The following image shows how to add BPMN node into the BPMN ExpandedSubProcess at runtime.

BPMN Expanded Sub-Process

Loop

Loop is a task that is internally being looped. The Loop property of BpmnExpandedSubProcess allows you to define the type of loop. The default value for Loop is None. You can define the Loop property in BpmnExpandedSubProcess, 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 Bpmn ExpandedSubProcess.
            Shape = new BpmnExpandedSubProcess()
            {
                Loop = BpmnLoopCharacteristic.Standard,
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

Standard ExpandedSubProcess BPMN Shape

The following table contains various types of BPMN loops.

LoopActivity Task Description
None None Task BPMN Shape None of the shape shows in the sub-process.
Standard Standard Task BPMN Shape Loop marker indicates that the sub-process repeats itself in the sequence.
SequenceMultiInstance Sequence MultiInstance Task BPMN Shape 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 ParallelMultiInstance Task BPMNShape 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 BpmnExpandedSubProcess. By default, the IsCompensation 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 Bpmn ExpandedSubProcess.
            Shape = new BpmnExpandedSubProcess()
            {
                IsCompensation = true,
            }
        };
        nodes.Add(node1);
    }
}

You can download a complete working sample from GitHub

IsCompensationActivity ExpandedSub-Process BPMN Shape

Ad-Hoc

An ad-hoc ExpandedSubProcess 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 BpmnExpandedSubProcess.

@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 Bpmn ExpandedSubProcess
            Shape = new BpmnExpandedSubProcess()
            {
                IsAdhoc = true,
            }
        };
        nodes.Add(node);
    }
}

You can download a complete working sample from GitHub

IsAdHocActivity ExpandedSub-Process BPMN Shape

SubProcessType

SubProcessType represents the type of task that is being processed. The SubProcessType property of BpmnExpandedSubProcess 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 Bpmn ExpandedSubProcess.
            Shape = new BpmnExpandedSubProcess()
            {
                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 SubProcess.

SubProcessType Image Description
Call Call Boundary BPMN Shape It is a global sub-process that is reused at various points in the business flow.
Event Event Boundary BPMN Shape 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 Default Boundary BPMN Shape It is a specialized sub-process that involves payment.
Default Default Boundary BPMN Shape The task that is performed in a business process. It is represented by a rounded rectangle.