Search results

BPMN Gateway in Blazor Diagram component

03 Aug 2021 / 2 minutes to read

Gateway is used to control the flow of a process and it is represented as a diamond shape. To create a gateway, the shape property of the node should be set to “Gateway” and the Gateway property can be set with any of the appropriate gateways. The following code example explains how to create a BPMN Gateway.

Copied to clipboard
@using Syncfusion.Blazor.Diagrams
@using System.Collections.ObjectModel

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

@code{

    //Initialize the node collection with node
    ObservableCollection<DiagramNode> NodeCollection = new ObservableCollection<DiagramNode>()
    {
        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 Gateway
                Type = Shapes.Bpmn, BpmnShape = BpmnShapes.Gateway,
                //Sets type of the gateway to None
                Gateway = new DiagramBpmnGateway(){Type = BpmnGateways.None}
            }
        }
    };
}

Note: By default, the Gateway will be set to None.

There are several types of gateways as follows:

Shape Image
None GateWay BPMN Shape
Exclusive Exclusive GateWay BPMN Shape
Parallel Parallel GateWay BPMN Shape
Inclusive Inclusive GateWay BPMN Shape
Complex Complex GateWay BPMN Shape
EventBased EventBased GateWay BPMNShape
ExclusiveEventBased Exclusive EventBased GateWay BPMN Shape
ParallelEventBased Parallel EventBased GateWay BPMN Shape