{"id":9412,"date":"2021-11-04T13:37:26","date_gmt":"2021-11-04T10:37:26","guid":{"rendered":"https:\/\/dhtmlx.com\/blog\/?p=9412"},"modified":"2023-05-02T14:06:15","modified_gmt":"2023-05-02T11:06:15","slug":"work-dhtmlx-javascript-swimlanes","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/work-dhtmlx-javascript-swimlanes\/","title":{"rendered":"How to Work with DHTMLX JavaScript Swimlanes"},"content":{"rendered":"<p>We at DHTMLX always give serious consideration to the needs and desires of our customers. The appearance of swimlanes in the <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram<\/a> library is a vivid example of responding to the requests of the web development community. It became a killer-feature of the latest major update of our diagramming component. <\/p>\n<p>And now it\u2019s time to give a detailed overview of use case scenarios for this functionality. In this article, you will learn more about JavaScript swimlanes and how to utilize them in real web projects with DHTMLX. <\/p>\n<h5>What are JavaScript Swimlanes<\/h5>\n<p>JavaScript swimlanes are special visual elements used in data visualization. They make it much easier to depict complex processes or intricate system structures in a clear way. Swimlanes are commonly placed within a diagram in the form of vertically or horizontally arranged parallel lines (lanes). Such an approach allows visually grouping processes or tasks, clarifying their sequence and who or what is involved in their fulfillment i.e. showing the separation of roles or responsibilities at different stages of the process.<\/p>\n<p>The concept of swimlanes is widely used in various modeling techniques as an instrument for organizing different activities into separate categories. For instance, this visual tool is popular in Business Process Modeling Notation (BPMN) and Unified Modeling Language (UML).<\/p>\n<h5>Possibilities of using swimlanes with DHTMLX Diagram<\/h5>\n<p>JavaScript swimlanes introduced in DHTMLX Diagram v4.0 enable you to do a lot of useful things right from the UI. <\/p>\n<p>When utilizing JavaScript swimlanes in DHTMLX-based diagrams, you can do the following:<\/p>\n<ul>\n<li>Expand and collapse swimlanes.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/image1-1.gif\" alt=\"DHTMLX Diagram - Swimlanes\" width=\"712\" height=\"457\" class=\"aligncenter size-full wp-image-9413\" \/><\/p>\n<ul>\n<li>Make use of a context menu for adding, reordering, or deleting rows and columns of swimlanes.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/Screen-2.gif\" alt=\"DHTMLX Diagram - Swimlanes\" width=\"990\" height=\"584\" class=\"aligncenter size-full wp-image-9418\" \/><\/p>\n<ul>\n<li>Change text content of swimlanes on the fly via inline editing. All you have to do is just double-click on the needed part and introduce necessary changes.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/image6.gif\" alt=\"DHTMLX Diagram - Swimlane inline editing\" width=\"956\" height=\"403\" class=\"aligncenter size-full wp-image-9420\" \/><\/p>\n<p>Apart from that, swimlanes are also available in the <a href=\"https:\/\/snippet.dhtmlx.com\/z6x5m3gb?mode=wide\" rel=\"noopener\" target=\"_blank\">DHTMLX Diagram editor<\/a> by default. In the editor mode, you can take advantage of the following capabilities:<\/p>\n<ul>\n<li>Choose a predefined swimlane template in the left panel of the editor and simply drag and drop it in the grid area for building different types of diagrams faster.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/image4.gif\" alt=\"DHTMLX Diagram - swimlane template\" width=\"988\" height=\"746\" class=\"aligncenter size-full wp-image-9422\" \/><\/p>\n<ul>\n<li>Add rows and columns, copy, or remove swimlanes with the help of a toolbar.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/Toolbar.gif\" alt=\"DHTMLX Diagram - Swimlane Toolbar\" width=\"992\" height=\"666\" class=\"aligncenter size-full wp-image-9426\" \/><\/p>\n<ul>\n<li>Add any of the predefined diagram shapes or groups of shapes into a swimlane from the left panel of the editor.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/image2.gif\" alt=\"DHTMLX Diagram Editor - Adding extra shapes to swimlanes\" width=\"944\" height=\"600\" class=\"aligncenter size-full wp-image-9428\" \/><\/p>\n<ul>\n<li>Specify the look and feel of swimlanes and their elements according to your needs using multiple editing options in the right panel. For instance, it is possible to change the header\u2019s name and position, switch on\/off subheaders and play around with different style settings.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/image5.gif\" alt=\"DHTMLX Diagram Editor - customizing swimlanes\" width=\"980\" height=\"566\" class=\"aligncenter size-full wp-image-9429\" \/><\/p>\n<ul>\n<li><a href=\"https:\/\/snippet.dhtmlx.com\/2z0a18oz?mode=wide\" rel=\"noopener\" target=\"_blank\">Create your own swimlanes<\/a> and include them in the left panel of the DHTMLX Diagram editor.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/dhtmlx.com\/blog\/wp-content\/uploads\/2021\/11\/Custom-Swimlanes.gif\" alt=\"DHTMLX Diagram Editor-Custom Swimlanes\" width=\"984\" height=\"626\" class=\"aligncenter size-full wp-image-9431\" \/><\/p>\n<p>As you can see, JavaScript swimlanes have become a useful addition to our diagramming component, allowing you to create diagrams of any complexity and make them easier to analyze for end-users. <\/p>\n<h5>Final words<\/h5>\n<p>The key objective of our development team during the work on swimlanes was to ensure maximum flexibility and usability of this function. As a result, you can easily configure JavaScript swimlanes in accordance with your project requirements and provide end-users with a wide range of interaction options. If you want to test swimlanes in the DHTMLX Diagram library, make use of a <a href=\"https:\/\/dhtmlx.com\/docs\/products\/dhtmlxDiagram\/download.shtml\" rel=\"noopener\" target=\"_blank\">free 30-day trial version<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We at DHTMLX always give serious consideration to the needs and desires of our customers. The appearance of swimlanes in the DHTMLX Diagram library is a vivid example of &#8230;<\/p>\n","protected":false},"author":101014,"featured_media":9433,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[33,58],"class_list":["post-9412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-all-posts","tag-diagram"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9412","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/101014"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=9412"}],"version-history":[{"count":14,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9412\/revisions"}],"predecessor-version":[{"id":9440,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/9412\/revisions\/9440"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/9433"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=9412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=9412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=9412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}