- Create a swimlane
- Lanes
- Create an empty lane
- Create lane header
- Customizing lane header
- Dynamic customization of lane header
- Add lane at runtime
- Add children to lane
- Dynamically add children to lane
- Lane interaction
- Resizing lane
- Lane swapping
- Disable Swimlane Lane swapping
- Resize helper
- Children interaction in lanes
- Lane Header editing
- Phase
- Add swimlane to palette
- Limitations
Contact Support
Swimlane
4 Dec 202424 minutes to read
Swimlane is a type of diagram nodes, which is typically used to visualize the relationship between a business process and the department responsible for it by focusing on the logical relationships between activities.
Create a swimlane
To create a swimlane, the type of shape should be set as swimlane
. By Default swimlane’s are arranged vertically.
Headers
Header was the primary element for swimlanes. The header
property of swimlane allows to define its textual description and to customize its appearance.
NOTE
By using this header, the swimlane interaction will be performed, like selection, dragging, etc.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
List<Phase> Phases = new List<Phase>();
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 }
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Customization of headers
The height and width of swimlane header can be customized with weight
and height
properties of swimlane header. Set fill color of header by using the style
property. The orientation of swimlane can be customized with the orientation
property of the header.
NOTE
By default the swimlane orientation has Horizontal.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
List<Phase> Phases = new List<Phase>();
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Dynamic customization of swimlane header
You can customize the swimlane header style and text properties dynamically.
let lane : nodeModel = diagram.nodes[0];
lane.shape.lanes[0].header.style.fill ='red';
diagram.dataBind();
Header editing
Diagram provides the support to edit swimlane headers at runtime. The header editing is achieved by double click event. Double clicking the header label will enable the editing.
Lanes
Lane is a functional unit or a responsible department of a business process that helps to map a process within the functional unit or in between other functional units.
The number of lanes
can be added to swimlane. The lanes are automatically stacked inside swimlane based on the order they are added.
Create an empty lane
-
The lanes
id
is used to define the name of the lane and its further used to find the lane at runtime and do any customization. -
The additional information to the lane is provided by using the
addInfo
property of the lane.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
List<Phase> Phases = new List<Phase>();
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Create lane header
- The
header
property of lane allows to textually describe the lane and to customize the appearance of the description.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
Lanes.Add(new Lane()
{
Id = "stackCanvas1",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Consumer" },
Width = 50,
},
});
List<Phase> Phases = new List<Phase>();
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Customizing lane header
- The size of lane can be controlled by using the
width
andheight
properties of the lane. - The appearance of the lane can be set by using the
style
properties.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
Lanes.Add(new Lane()
{
Id = "stackCanvas1",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Consumer" },
Width = 50,Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
});
List<Phase> Phases = new List<Phase>();
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Dynamic customization of lane header
You can customize the lane header style and text properties dynamically.
let lane : nodeModel = diagram.nodes[0];
lane.shape.lanes[0].header.style.fill ='red';
diagram.dataBind();
Add lane at runtime
You can add the lane at runtime by using the client side API method called addLanes
.
Add children to lane
To add nodes to lane, you should add children
collection of the lane.
<div class="col-lg-12 control-section">
<div class="content-wrapper">
@(Html.EJS().Diagram("container")
.Width("100%")
.Height("500px")
.Nodes(ViewBag.nodes).Render())
</div>
</div>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List<DiagramNode> Nodes = new List<DiagramNode>();
//Create lanes
List<Lane> Lanes = new List<Lane>();
Lanes.Add(new Lane()
{
Id = "stackCanvas1",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Consumer" },
Width = 50,
},
Children = firstLaneChildren
});
Lanes.Add(new Lane()
{
Id = "stackCanvas2",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Marketing" },
Width = 50,
},
Children = secondLaneChildren
});
Lanes.Add(new Lane()
{
Id = "stackCanvas3",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Sales" },
Width = 50,
},
Children = thirdLaneChildren
});
Lanes.Add(new Lane()
{
Id = "stackCanvas4",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Success" },
Width = 50,
},
Children = fourthLaneChildren
});
//Create phases
List<Phase> Phases = new List<Phase>();
Phases.Add(new Phase()
{
Id = "phase1",
Offset = 170,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Phase" },
},
});
swimlane.Shape = new SwimLane()
{
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "SALES PROCESS FLOW CHART" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 }
},
Lanes = Lanes,
Phases = Phases
};
Nodes.Add(swimlane);
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Dynamically add children to lane
The diagram provides support to add children dynamically.
let node ={
id: 'Order',
shape: { type: 'Path', data: pathData },
annotations: [
{
content: 'ORDER',
style: { fontSize: 11 }
} ],
margin: { left: 60, top: 20 },
height: 40, width: 100
}
let lane : nodeModel = diagram.nodes[0];
swimlane.shape.lanes[0].childern[0]=node;
diagram.dataBind();
Lane interaction
Resizing lane
- Lane can be resized in the bottom and left direction.
- Lane can be resized by using resize selector of the lane.
- Once you can resize the lane, the swimlane will be resized automatically.
- The lane can be resized by either resizing the selector or the tight bounds of the child object. If the child node moves to the edge of the lane, it can be automatically resized.
Lane swapping
- Lanes can be swapped using drag the lanes over another lane.
- Helper should intimate the insertion point while lane swapping.
Disable Swimlane Lane swapping
You can disable swimlane lane swapping by using the property called canMove
.
let node ={
id: 'Order',
shape: { type: 'Path', data: pathData },
annotations: [
{
content: 'ORDER',
style: { fontSize: 11 }
} ],
margin: { left: 60, top: 20 },
height: 40, width: 100,canMove: false
}
let lane : nodeModel = diagram.nodes[0];
swimlane.shape.lanes[0].childern[0]=node;
diagram.dataBind();
Resize helper
- The special resize helper will be used to resize the lanes.
- The resize cursor will be available on the left and bottom direction alone.
- Once the lane is resized, the swimlane will be resized automatically.
Children interaction in lanes
- You can resize the child node within swimlanes.
- You can drag the child nodes within lane.
- Interchange the child nodes from one lane to another lane.
- Drag and drop the child nodes from lane to diagram.
- Drag and drop the child nodes from diagram to lane.
- Based on the child node interactions, the lane size should be updated.
Lane Header editing
Diagram provides the support to edit Lane headers at runtime. The header editing can be achieved by double click event. Double clicking the header label will enable its editing.
Phase
Phase are the subprocess which will split each lane as horizontally or vertically based on the swimlane orientation. The multiple number of Phase
can be added to swimlane.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
Lanes.Add(new Lane()
{
Id = "stackCanvas1",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Consumer" },
Width = 50,Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
});
List<Phase> Phases = new List<Phase>();
Phases.Add(new Phase()
{
Id= "phase1",
Offset=170,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Phase" },
},
});
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Dynamically add phase to lane
You can add the phase at runtime by using client side API method called addPhases
.
let phase = [{
id: 'phase1', offset: 170,
header: { content: { content: 'Phase' } }
}]
diagram.addPhase(swimlane,phase)
Customizing phase
- The length of region can be set by using the
offset
property of the phase. - Every phase region can be textually described with the
header
property of the phase. - You can increase the width of phase by using
phaseSize
property of swimlane. - The additional information can be provided to the phase by using the
addInfo
property of the phase.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
List<Lane> Lanes = new List<Lane>();
Lanes.Add(new Lane()
{
Id = "stackCanvas1",
Height = 100,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Consumer" },
Width = 50,Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
});
List<Phase> Phases = new List<Phase>();
Phases.Add(new Phase()
{
Id= "phase1",
Offset=170,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "Phase" },
},
});
swimlane.Shape = new SwimLane(){
Type = "SwimLane",
PhaseSize = 20,
Header = new Header()
{
Annotation = new DiagramNodeAnnotation() { Content = "ONLINE PURCHASE STATUS" },
Height = 50,
Orientation = "Horizontal",
Style = new DiagramTextStyle() { FontSize = 11 ,fill ="red"}
},
Lanes = Lanes,
Phases = Phases
};
nodes.Add(swimlane);
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Phase interaction
Resizing
- The phase can be resized by using its selector.
- You must select the phase header to enable the phase selection.
- Once the phase can be resized, the lane size will be updated automatically.
Resizing helper
- The special resize selector will be used to resize the phase.
- The resize cursor will be available on the left and bottom direction for horizontal, and the top and bottom direction for vertical swimlane.
Phase header editing
Diagram provides the support to edit phase headers at runtime. The header editing is achieved by double click event. Double clicking the header label will enable the editing of that.
Add swimlane to palette
Diagram provides support to add swimlane and phases to symbol palette.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Diagrams;
using System.Drawing;
namespace EJ2MVCSampleBrowser.Controllers.Diagram {
public partial class DiagramController: Controller {
// GET: Nodes
public ActionResult Nodes() {
List < DiagramNode > nodes = new List < DiagramNode > ();
List < DiagramNodeAnnotation > Node1 = new List < DiagramNodeAnnotation > ();
Node1.Add(new DiagramNodeAnnotation() {
Content = "node1", Style = new DiagramTextStyle() {
Color = "White", StrokeColor = "None"
}
});
nodes.Add(new Node() {
Id = "node1",
Width = 100,
Height = 100,
BorderWidth=2,
Style = new NodeStyleNodes() {
Fill = "darkcyan"
},
text = "node1",
OffsetX = 100,
OffsetY = 100,
Annotations = Node1
});
ViewBag.nodes = nodes;
return View();
}
}
public class Node: DiagramNode {
public string text;
}
}
Drag and drop swimlane to palette
- The drag and drop support for swimlane shapes has been provided.
- When you drag and drop the lane shape, if the diagram already contains swimlane with the same orientation, the lane will be added and stacked inside a swimlane based on the order. Otherwise, it will be added a new swimlane.
- The phase will only drop on swimlane shape with same orientation.
Limitations
- Connectors cannot be canceled when added directly to swimlane. You must initialize the connector through connector collection.
- The phase line style cannot be edited.