Having trouble getting help?
Contact Support
Contact Support
BPMN Gateway in EJ2 TypeScript Diagram control
4 Dec 202410 minutes to read
Gateway
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 as gateway
and the gateway property can be set with any of the appropriate gateways. The following code example illustrates how to create a BPMN Gateway.
import { Diagram, NodeModel, BpmnShape, BpmnSubProcessModel, BpmnDiagrams, BpmnActivityModel, BpmnFlowModel, BpmnGatewayModel } from '@syncfusion/ej2-diagrams';
Diagram.Inject(BpmnDiagrams);
// A node is created and stored in nodes array.
let nodes: NodeModel[] = [
{
// Position of the node
offsetX: 150,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as Gateway
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as None
gateway: {
type: 'None',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as Inclusive
gateway: {
type: 'Inclusive',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 150,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as Exclusive
gateway: {
type: 'Exclusive',
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as Parallel
gateway: {
type: 'Parallel',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as ParallelEventBased
gateway: {
type: 'ParallelEventBased',
},
},
},
{
// Position of the node
offsetX: 550,
offsetY: 350,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as EventBased
gateway: {
type: 'EventBased',
},
},
},
{
// Position of the node
offsetX: 150,
offsetY: 550,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as ExclusiveEventBased
gateway: {
type: 'ExclusiveEventBased',
},
},
},
{
// Position of the node
offsetX: 350,
offsetY: 550,
// Size of the node
width: 100,
height: 100,
//Sets type as Bpmn and shape as event
shape: {
type: 'Bpmn',
shape: 'Gateway',
//Sets type of the gateway as Complex
gateway: {
type: 'Complex',
},
},
},
];
// initialize diagram component
let diagram: Diagram = new Diagram({
width: '100%',
height: '600px',
// Add node
nodes: nodes
});
// render initialized diagram
diagram.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Diagram</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-diagrams/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet" />
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>
NOTE
By default, the
gateway
will be set as none.
There are several types of gateways as tabulated:
Shape | Image |
---|---|
Exclusive | ![]() |
Parallel | ![]() |
Inclusive | ![]() |
Complex | ![]() |
EventBased | ![]() |
ExclusiveEventBased | ![]() |
ParallelEventBased | ![]() |