Shapes in Diagram Control
19 Mar 202424 minutes to read
BPMN shapes are used to represent the internal business procedure in a graphical notation and enable you to communicate the procedures in a standard manner. To create a BPMN shape, in the node property shape, type should be set as “bpmn” and its shape should be set as any one of the built-in shapes.
NOTE
If you want to use BPMN shapes in diagram, you need to inject BpmnDiagrams in the diagram.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers {
public class NodeController: Controller {
// GET: Node
public ActionResult Node() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes() {
Type = "Bpmn",
Shape = "Event",
Event = new DiagramBpmnEvent() {
Event = BpmnEvents.End
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("event")]
[JsonProperty("event")]
public DiagramBpmnEvent Event {
get;
set;
}
}
}
}NOTE
The default value for the property
shapeis “event”.
The list of BPMN shapes are as follows:
| Shape | Image |
|---|---|
| Event |  |
| Gateway |  |
| Task |  |
| Message |  |
| DataSource |  |
| DataObject |  |
| Group |  |
The BPMN shapes and its types are explained as follows.
Event
An event is notated with a circle and it represents an event in a business process. The type of events are as follows:
- Start
- End
- Intermediate
The event property of the node allows to define the type of the event. The default value of the event is start.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers {
public class NodeController: Controller {
// GET: Node
public ActionResult Node() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes() {
Type = "Bpmn",
Shape = "Event",
Event = new DiagramBpmnEvent() {
Event = BpmnEvents.End, Trigger = BpmnTriggers.None
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("event")]
[JsonProperty("event")]
public DiagramBpmnEvent Event {
get;
set;
}
}
}
}Event triggers are notated as icons inside the circle and they represent the specific details of the process. The trigger property of the node allows you to set the type of trigger and by default, it is set as none. The following table illustrates the type of event triggers.
| Triggers | Start | Non-Interrupting Start | Intermediate | Non-Interrupting Intermediate | Throwing Intermediate | End |
|---|---|---|---|---|---|---|
| None |  |
 |
 |
 |
 |
|
| Message |  |
 |
 |
 |
 |
 |
| Timer |  |
 |
 |
 |
||
| Conditional |  |
 |
 |
 |
||
| Link |  |
 |
||||
| Signal |  |
 |
 |
 |
 |
 |
| Error |  |
 |
 |
|||
| Escalation |  |
 |
 |
 |
 |
 |
| Termination |  |
|||||
| Compensation |  |
 |
 |
 |
||
| Cancel |  |
 |
||||
| Multiple |  |
 |
 |
 |
 |
 |
| Parallel |  |
 |
 |
 |
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.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers {
public class NodeController: Controller {
// GET: Node
public ActionResult Node() {
List < DiagramNode > nodes = new List < DiagramNode > ();
nodes.Add(new DiagramNode() {
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes() {
Type = "Bpmn",
Shape = "Gateway",
Gateway = new DiagramBpmnGateway() {
Type = BpmnGateways.None
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes {
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape {
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("gateway")]
[JsonProperty("gateway")]
public DiagramBpmnGateway Gateway {
get;
set;
}
}
}
}NOTE
By default, the
gatewaywill be set as none.
There are several types of gateways as tabulated:
| Shape | Image |
|---|---|
| Exclusive |  |
| Parallel |  |
| Inclusive |  |
| Complex |  |
| EventBased |  |
| ExclusiveEventBased |  |
| ParallelEventBased |  |
Activity
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.
To create a BPMN activity, set the shape as activity. You also need to set the type of the BPMN activity by using the activity property of the node. By default, the type of the activity is set as task.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[DefaultValue(null)]
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[DefaultValue(null)]
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The different activities of BPMN process are listed as follows.
Tasks
The task property of the node allows to define the type of task such as sending, receiving, user based task, etc. By default, the type property of task is set as none. The following code illustrates how to create different types of BPMN tasks. The events property of tasks allow to represent these results as an event attached to the task.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnTask task = new DiagramBpmnTask();
task.Type = BpmnTasks.Receive;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
Task = task
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The various types of BPMN tasks are tabulated as follows.
| Shape | Image |
|---|---|
| Service |  |
| Send |  |
| Receive |  |
| Instantiating Receive |  |
| Manual |  |
| Business Rule |  |
| User |  |
| Script |  |
Subprocess
A sub-process is a group of tasks, which is used to hide or reveal details of additional levels using the collapsed property.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnSubProcess SubProcess = new DiagramBpmnSubProcess();
SubProcess.Collapsed = true;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = SubProcess
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The different types of subprocess are as follows:
- Event subprocess
- Transaction
Event subprocess
A subprocess is defined as an event subprocess, when it is triggered by an event. An event subprocess is placed within another subprocess which is not part of the normal flow of its parent process. You can set event to a subprocess with the event and trigger property 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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnSubProcess SubProcess = new DiagramBpmnSubProcess();
SubProcess.Collapsed = true;
SubProcess.Type = BpmnSubProcessTypes.Event;
SubProcess.Events = new List<DiagramBpmnSubEvent>();
DiagramBpmnSubEvent events = new DiagramBpmnSubEvent();
events.Event = BpmnEvents.Start;
events.Trigger = BpmnTriggers.Message;
SubProcess.Events.Add(events);
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = SubProcess
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}Transaction subprocess
-
transactionis a set of activities that logically belong together, in which all contained activities must complete their parts of the transaction; otherwise the process is undone. The execution result of a transaction is one of Successful Completion, Unsuccessful Completion (Cancel), and Hazard (Exception). Theeventsproperty of subprocess allows to represent these results as an event attached to the subprocess. -
The event object allows 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/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 event’s ports and labels properties.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnSubProcess SubProcess = new DiagramBpmnSubProcess();
SubProcess.Collapsed = true;
SubProcess.Type = BpmnSubProcessTypes.Transaction;
SubProcess.Events = new List<DiagramBpmnSubEvent>();
DiagramBpmnSubEvent events = new DiagramBpmnSubEvent();
events.Event = BpmnEvents.Intermediate;
events.Trigger = BpmnTriggers.Cancel;
events.Offset = new DiagramPoint() { X = 0, Y = 0 };
SubProcess.Events.Add(events);
DiagramBpmnSubEvent events1 = new DiagramBpmnSubEvent();
events1.Event = BpmnEvents.Intermediate;
events1.Trigger = BpmnTriggers.Cancel;
events1.Offset = new DiagramPoint() { X = 1, Y = 1 };
SubProcess.Events.Add(events);
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = SubProcess
}
}
}); ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}Process
Processes is an array collection that defines the children values for BPMN subprocess.
Loop
Loop is a task that is internally being looped. The loop property of task allows 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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnTask task = new DiagramBpmnTask();
task.Loop = BpmnLoops.Standard;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
Task = task
}
}
}); ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The following table contains various types of BPMN loops.
| Loops | Task | Subprocess |
|---|---|---|
| Standard |  |
 |
| SequenceMultiInstance |  |
 |
| ParallelMultiInstance |  |
 |
Compensation
Compensation is triggered, when operation is partially failed and enabled it with the compensation property of the task and the subprocess.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnTask task = new DiagramBpmnTask();
task.Compensation = true;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
Task = task
}
}
}); ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}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 System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnTask task = new DiagramBpmnTask();
task.Call = true;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
Task = task
}
}
}); ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}Adhoc
An adhoc 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 adhoc property of subprocess.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnSubProcess SubProcess = new DiagramBpmnSubProcess();
SubProcess.Adhoc = true;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = SubProcess
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}Boundary
Boundary represents the type of task that is being processed. The boundary property of subprocess allows to define the type of boundary. By default, it is set as default.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnSubProcess SubProcess = new DiagramBpmnSubProcess();
SubProcess.Boundary = BpmnBoundary.Call;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.SubProcess,
SubProcess = SubProcess
}
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The following table contains various types of BPMN boundaries.
| Boundary | Image |
|---|---|
| Call |  |
| Event |  |
| Default |  |
Data
A data object represents information flowing through the process, such as data placed into the process, data resulting from the process, data that needs to be collected, or data that must be stored. To define a data object, set the shape as DataObject and the type property defines whether data is an input or an output. You can create multiple instances of data object with the collection property of data.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnTask task = new DiagramBpmnTask();
task.Compensation = true;
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Activity",
Activity = new DiagramBpmnActivity()
{
Activity = BpmnActivities.Task,
Task = task
}
}
}); ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("activity")]
[JsonProperty("activity")]
public DiagramBpmnActivity Activity
{
get;
set;
}
}
}
}The following table contains various representation of BPMN data object.
| Boundary | Image |
|---|---|
| Collection Data Object | |
| Data Input |  |
| Data Output |  |
Datasource
Datasource is used to store or access data associated with a business process. To create a datasource, set the shape as datasource.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "DataSource",
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("dataObject")]
[JsonProperty("dataObject")]
public DiagramBpmnDataObject DataObject
{
get;
set;
}
}
}
}Artifact
Artifact is used to show additional information about a process in order to make it easier to understand. There are two types of artifacts in BPMN.
- Text annotation
- Group
Text annotation
-
A BPMN object can be associated with a text annotation which does not affect the flow but gives details about objects within a flow.
-
A TextAnnotation points to or references another BPMN shape, which we call the
textAnnotationTargetof the textAnnotation. When a target shape is moved or deleted, any TextAnnotations attached to the shape will be moved or deleted too. Thus, the TextAnnotations remain with their target shapes though you can reposition the TextAnnotation to any offset from its target. ThetextAnnotationTargetproperty of the BpmnTextAnnotation is used to connect an annotation element to the BPMN Node. -
The annotation element can be switched from a BPMN node to another BPMN node simply by dragging the source end of the annotation connector into the other BPMN node.
-
By default, the TextAnnotation shape has a connection.
-
The
textAnnotationDirectionproperty is used to set the shape direction of the text annotation. -
By default, the
textAnnotationDirectionis set to a Auto. -
To set the size for text annotation, use the
widthandheightproperties of the node. -
The
offsetXandoffsetYproperties are used to set the distance between the BPMN node and the TextAnnotation.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
DiagramBpmnDataObject dataObject = new DiagramBpmnDataObject();
dataObject.Collection = true;
dataObject.Type = BpmnDataObjects.Input;
List<DiagramBpmnAnnotation> annotation = new List<DiagramBpmnAnnotation>();
DiagramBpmnAnnotation label = new DiagramBpmnAnnotation();
label.Angle = 45;
label.Length = 150;
label.Text = "Left";
label.Id = "left";
annotation.Add(label);
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "DataObject",
DataObject = dataObject,
Annotations = annotation
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("annotations")]
[JsonProperty("annotations")]
public List<DiagramBpmnAnnotation> Annotations
{
get;
set;
}
[HtmlAttributeName("dataObject")]
[JsonProperty("dataObject")]
public DiagramBpmnDataObject DataObject
{
get;
set;
}
}
}
}Group
A group is used to frame a part of the diagram, shows that elements included in it logically belong together and does not have any other semantics other than organizing elements. To create a group, the shape property of the node should be set as group.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramNode> nodes = new List<DiagramNode>();
nodes.Add(new DiagramNode()
{
Id = "node1",
Width = 100,
Height = 100,
OffsetX = 100,
OffsetY = 100,
Shape = new BpmnShapes()
{
Type = "Bpmn",
Shape = "Group",
}
});
ViewBag.nodes = nodes;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
}
}
}BPMN flows
BPMN Flows are lines that connects BPMN flow objects.
Association
BPMN Association flow is used to link flow objects with its corresponding text or artifact. An association is represented as a dotted graphical line with opened arrow. The types of association are as follows:
- Directional
- BiDirectional
- Default
The association property allows you to define the type of association.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector()
{
Id = "connector1",
SourcePoint = new DiagramPoint() { X=100,Y=100},
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
Type= Segments.Orthogonal,
Shape=new BpmnShapes()
{
Type="Bpmn",
Flow= "Association",
Association= "BiDirectional"
}
});
ViewBag.connectors = Connectors;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("flow")]
[JsonProperty("flow")]
public string Flow
{
get;
set;
}
[HtmlAttributeName("association")]
[JsonProperty("association")]
public string Association
{
get;
set;
}
}
}
}The following table demonstrates the visual representation of association flows.
| Association | Image |
|---|---|
| Default |  |
| Directional |  |
| BiDirectional |  |
NOTE
The default value for the property
associationis default.
Sequence
A Sequence flow shows the order in which the activities are performed in a BPMN process and is represented by a solid graphical line. The types of sequence are as follows:
- Normal
- Conditional
- Default
The sequence property allows to define the type of sequence.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector()
{
Id = "connector1",
SourcePoint = new DiagramPoint() { X=100,Y=100},
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
Type= Segments.Orthogonal,
Shape=new BpmnShapes()
{
Type="Bpmn",
Flow= "Sequence",
Sequence = "Conditional"
}
});
ViewBag.connectors = Connectors;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("flow")]
[JsonProperty("flow")]
public string Flow
{
get;
set;
}
[HtmlAttributeName("sequence")]
[JsonProperty("sequence")]
public string Sequence
{
get;
set;
}
}
}
}The following table contains various representation of sequence flows.
| Sequence | Image |
|---|---|
| Default |  |
| Conditional |  |
| Normal |  |
NOTE
The default value for the property
sequenceis normal.
Message
A Message flow shows the flow of messages between two participants and is represented by dashed line. The types of message are as follows:
- InitiatingMessage
- NonInitiatingMessage
- Default
The message property allows to define the type of message.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.ComponentModel;
using Syncfusion.EJ2;
using Newtonsoft.Json;
namespace sample1.Controllers
{
public class NodeController : Controller
{
// GET: Node
public ActionResult Node()
{
List<DiagramConnector> Connectors = new List<DiagramConnector>();
Connectors.Add(new DiagramConnector()
{
Id = "connector1",
SourcePoint = new DiagramPoint() { X=100,Y=100},
TargetPoint = new DiagramPoint() { X = 200, Y = 200 },
Type= Segments.Orthogonal,
Shape=new BpmnShapes()
{
Type="Bpmn",
Flow= "Message",
Message = "InitiatingMessage"
}
});
ViewBag.connectors = Connectors;
return View();
}
public class BpmnShapes
{
[HtmlAttributeName("type")]
[JsonProperty("type")]
public string Type
{
get;
set;
}
[HtmlAttributeName("shape")]
[JsonProperty("shape")]
public string Shape
{
get;
set;
}
[HtmlAttributeName("message")]
[JsonProperty("message")]
public string Message
{
get;
set;
}
[HtmlAttributeName("flow")]
[JsonProperty("flow")]
public string Flow
{
get;
set;
}
}
}
}The following table contains various representation of message flows.
| Message | Image |
|---|---|
| Default | |
| InitiatingMessage |  |
| NonInitiatingMessage |  |
NOTE
The default value for the property
messageis default.