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
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
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.
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
The following table contains various types of BPMN loops.
LoopActivity | Task | 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 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
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
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
The following table contains various types of BPMN SubProcess.
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. |