BPMN Activity in Blazor Diagram Component
7 Jul 202224 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: Occurs within a process and it is not broken down to a finer level of detail.
- Subprocess: Occurs within a process and it is broken down to a finer level of detail.
@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",
//sets the type of shape to Bpmn and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets the activity type to task
Activity = new DiagramBpmnActivity() { Activity = BpmnActivities.Task },
}
};
NodeCollection.Add(node);
}
}
BPMN activity task
The Task property of the node allows you to define the type of task such as sending, receiving, user-based task, etc. By default, the Type
property of task is set to None. The following code explains how to create different types of BPMN tasks.
The events property of tasks allows you to represent these results as an event attached to the task.
@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",
//Sets the type to bpmn and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets activity to Task
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
//Sets the type of the task to Send
Task = new DiagramBpmnTask() { Type = BpmnTasks.Send }
}
}
};
NodeCollection.Add(node);
}
}
The various types of BPMN tasks are tabulated as follows.
Shape | Image |
---|---|
Service | |
Send | |
Receive | |
Instantiating Receive | |
Manual | |
Business Rule | |
User | |
Script |
BPMN activity sub process
A Sub-process is a group of tasks that is used to hide or reveal details of additional levels using the Collapsed
property.
@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 Activity
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
Activity = new DiagramBpmnActivity()
{
//Sets activity to subprocess
Activity = BpmnActivities.SubProcess,
// Set collapsed of subprocess to true
SubProcess = new DiagramBpmnSubProcess() { Collapsed = true }
},
}
};
NodeCollection.Add(node);
}
}
The different types of subprocess are as follows:
- Event subprocess
- Transaction
Event sub process
A SubProcess is defined as an event SubProcess when it is triggered by an event. An event SubProcess is placed within another subprocess that part of the normal flow of its parent process is not. You can set event to a subprocess with the Event
and Trigger
properties of the subprocess. The Type
property of subprocess allows you to define the type of subprocess whether it should be event subprocess or transaction subprocess.
@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",
// Sets the type to Bpmn and shape to Activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets activity to SubProcess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//Sets the collapsed to true and type to Event
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Type = BpmnSubProcessTypes.Event,
//Sets event to Start and trigger to Message
Events = new ObservableCollection<DiagramBpmnSubEvent>()
{
new DiagramBpmnSubEvent()
{
Event = BpmnEvents.Start, Trigger = BpmnTriggers.Message
}
}
}
}
}
};
NodeCollection.Add(node);
}
}
Transaction sub process
The Transaction is a set of activities that logically belong together that all contained activities must complete their parts of the transaction, otherwise the process is fail.
The execution result of a transaction is one of
- Successful Completion
- Unsuccessful Completion (Cancel)
- Hazard (Exception)
The Events
property of subprocess allows you to represent these results as an event attached to the subprocess.
-
The event object allows you to define the type of event by which the subprocess will be triggered. The name of the event can be defined to identify the event at runtime.
-
The event’s offset property is used to set the fraction or ratio (relative to parent) that defines the position of the event shape.
-
The trigger property defines the type of the event trigger.
-
You can also use define ports and labels to subprocess events by using the event’s ports and labels properties.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@* Initialize Diagram *@
<SfDiagram Height="600px" Nodes="@NodeCollection">
</SfDiagram>
@code{
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",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets the activity to subprocess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//Sets collapsed to true and type to Transaction
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Type = BpmnSubProcessTypes.Transaction,
//Sets offset and visible for cancel and offset for failure
Transaction = new DiagramBpmnTransactionSubProcess()
{
Cancel = new CancelSubEvent()
{
Visible = true,
Offset = new BpmnSubEventOffset() { X = 0.25, Y = 1 }
},
Failure = new FailureSubEvent()
{
Offset = new BpmnSubEventOffset() { X = 0.75, Y = 1 }
}
}
},
}
}
};
NodeCollection.Add(node);
}
}
Process
Processes is an array collection that defines the children values for BPMN subprocess.
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel
@* Initialize Diagram *@
<SfDiagram Height="600px" Nodes="@NodeCollection" Connectors="@ConnectorCollection">
</SfDiagram>
@code{
//Defines diagram's node collection
public ObservableCollection<DiagramNode> NodeCollection { get; set; }
//Defines diagram's connector collection
public ObservableCollection<DiagramConnector> ConnectorCollection { get; set; }
protected override void OnInitialized()
{
NodeCollection = new ObservableCollection<DiagramNode>();
DiagramNode node1 = new DiagramNode()
{
Id = "Start",
Width = 50,
Height = 50,
Margin = new NodeMargin() { Left = 10, Top = 50 },
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Event,
Event = new DiagramBpmnEvent() { Event = BpmnEvents.Start }
}
};
DiagramNode node2 = new DiagramNode()
{
Id = "End",
Width = 50,
Height = 50,
Margin = new NodeMargin() { Left = 200, Top = 50 },
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Event,
Event = new DiagramBpmnEvent() { Event = BpmnEvents.End }
}
};
DiagramNode node3 = new DiagramNode()
{
Id = "Node1",
Width = 50,
Height = 50,
Margin = new NodeMargin() { Left = 100, Top = 200 },
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = false
}
}
},
Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop
};
DiagramNode node4 = new DiagramNode()
{
Id = "ActivityProcessNode",
Width = 300,
Height = 300,
MaxHeight = 400,
MaxWidth = 400,
MinWidth = 200,
MinHeight = 200,
OffsetX = 200,
OffsetY = 200,
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = false,
Type = BpmnSubProcessTypes.Event,
Processes = new string[] { "Start", "End", "Node1" }
}
}
},
Constraints = NodeConstraints.Default | NodeConstraints.AllowDrop
};
NodeCollection.Add(node1);
NodeCollection.Add(node2);
NodeCollection.Add(node3);
NodeCollection.Add(node4);
ConnectorCollection = new ObservableCollection<DiagramConnector>();
DiagramConnector connector1 = new DiagramConnector()
{
Id = "Connector1",
SourceID = "Start",
TargetID = "Node1"
};
DiagramConnector connector2 = new DiagramConnector()
{
Id = "Connector2",
SourceID = "Node1",
TargetID = "End"
};
ConnectorCollection.Add(connector1);
ConnectorCollection.Add(connector2);
}
}
Loop
Loop is a task that is internally being looped. The loop property of task allows you to define the type of loop. The default value for Loop is None.
You can define the loop property in subprocess BPMN shape as shown in the following code.
@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",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Set the activity to subprocess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//Sets collapsed to true and loop to standard
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Loop = BpmnLoops.Standard,
},
}
}
};
NodeCollection.Add(node);
}
}
The following table contains various types of BPMN loops.
Loops | Task | Subprocess |
---|---|---|
Standard | ||
SequenceMultiInstance | ||
ParallelMultiInstance |
Compensation
Compensation is triggered when the operation is partially failed and enabled it with the compensation property of the task and the subprocess.
@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 node1 = 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",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Set the activity to task
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
//set compensation to true
Task = new DiagramBpmnTask()
{
Compensation = true,
},
}
}
};
DiagramNode node2 = new DiagramNode()
{
//Position of the node
OffsetX = 300,
OffsetY = 100,
//Size of the node
Width = 100,
Height = 100,
//Unique id of the node
Id = "node2",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Set the activity to SubProcess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//Sets collapsed and compensation to true
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Compensation = true,
},
}
}
};
NodeCollection.Add(node1);
NodeCollection.Add(node2);
}
}
Call
A Call activity is a global subprocess that is reused at various points of the business flow and set it with the call property of the task.
@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",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//sets the activity to task
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
//Sets call to true
Task = new DiagramBpmnTask()
{
Call = true,
},
}
}
};
NodeCollection.Add(node);
}
}
Ad-Hoc
An ad-hoc subprocess 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 Ad-hoc property of subprocess.
@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",
//Defines the type to BPMN and shape to activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets the activity to subprocess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//sets collapsed and ad hoc to true
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Adhoc = true
},
}
}
};
NodeCollection.Add(node);
}
}
Boundary
Boundary represents the type of task that is being processed. The Boundary property of subprocess allows you to define the type of boundary. By default, it is set to Default.
@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",
//Sets type to Bpmn and shape to Activity
Shape = new DiagramShape()
{
Type = Shapes.Bpmn,
BpmnShape = BpmnShapes.Activity,
//Sets activity to SubProcess
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
//Sets collapsed to true and boundary to Call
SubProcess = new DiagramBpmnSubProcess()
{
Collapsed = true,
Boundary = BpmnBoundary.Call
},
}
}
};
NodeCollection.Add(node);
}
}
The following table contains various types of BPMN boundaries.
Boundary | Image |
---|---|
Call | |
Event | |
Default |