Extension:Cognitive Process Designer

The Cognitive Process Designer extension supports the creation, importing, exporting and annotating of BPMN (Business Process Model and Notation) processes by using an intuitive GUI (graphical user interface). Each element (node and edge) is represented by its own wiki page, which publishes the information according to the Linked Data Principles. Cognitive Process is based on bpmn.io, which is a JavaScript renderer that allows to model BPMN processes and checks the syntax. Semantic Forms is used to facilitate the input of information for each element.

Installation

 * Semantic MediaWiki must be installed in order to provide information for the elements in a structured way and publish the information according to the Linked Data Principles, which helps to avoid having an unbounded web.

Usage


After installation, there are two new Links on Special Pages.
 * Cognitive Process Edit
 * Cognitive Process Test Suite

The Cognitive Process Edit page is the actual Cognitive Process Designer extension, which allows to create, load, edit, import, export and annotate BPMN processes. Each element (node and edge) is represented by its own wiki page.

The Cognitive Process Test Suite offers similar functionality, however creating diagrams in the test suite does not affect your MediaWiki. Thus, it does not create wiki pages and store the information. It provides only the graphical user interface and the possibility to import and export BPMN diagrams without any affects on your MediaWiki.

Create Diagrams
The init screen shows a text input, in which the name of the diagram that should be created, has to be entered. After entering the name of the diagram click on Create BPMN. Afterwards, the window and the overlay disappears and you can start creating the diagram or exporting an existing.



Cognitive Process checks if a wiki page with the entered name already exists. If so, it will warn the user.



Load Diagrams
To load an existing BPMN diagram from wiki, enter the name of the BPMN diagram and click on Load BPMN from wiki. If there is no page with this title in the wiki, it will return an alert that the specified page doesn't exist. Otherwise, it will load the diagram from the wiki.

Import Diagrams
In order to import an existing BPMN 2.0 diagram, stored in XML format, there are two possibilities:
 * Via button
 * Via drag&drop

To import a diagram, you first have to either create a new diagram or load an existing diagram under which the diagram is stored (Important: If a diagram is loaded, the diagram is overwritten by importing the new BPMN diagram). Afterwards either
 * click on the importing button on the bottom left of the screen and select the BPMN 2.0 XML file from your local computer
 * import the BPMN 2.0 XML file via drag&drop by dropping the BPMN 2.0 XML file over the middle of the editor screen.

Afterwards, the diagram is available for editing purposes.

'''Important: After importing the diagram, the wiki pages for each element of the BPMN diagram are created. Therefore, immediate annotating of elements after importing the BPMN diagram can take some time, until the pages are created. However, editing the element is immediately possible.'''

Export Diagrams
Following formats are supported to export BPMN diagrams:
 * BPMN 2.0 XML
 * SVG format

Click on the bottom left on the appropriate button in order to export a diagram. The I/O Menu shown below has the following functionality (from left to right):
 * Import existing local BPMN diagram, stored as BPMN 2.0 XML
 * Create new BPMN diagram from scratch with the entered name (Important: There are no security checks; The old diagram will be overwritten and the BPMN diagram name from the init screen is used to store the new information)
 * Export BPMN diagram as BPMN 2.0 XML file to local system
 * Export BPMN diagram as SVG file to local system



Create Elements
Creating an element (node and edge) leads to the creation of a wiki page that represents the element.

To create an element, there are two options:
 * Either use the sidebar: Click on an element and then drop it on the appropriate position in the diagram
 * Or use the context menu: Click on an element and select a new node type. Therefore, a new edge is also automatically created that links from the node to the new created element.

Change Elements
Click on the wrench of the context menu of an element to select the type in which the element should be changed.

''Important: Changing an element leads to creating a new wiki page for the new element and transfer the content of the old page to the new wiki page. The content of the old wiki page is then deleted.''

Delete Elements
The deletion of an element in Cognitive Process leads to the deletion of content of the wiki page that represents the element. The wiki page itself is not deleted, but the content. This is because, often only admins have the permision to delete a page but not users.

To delete a element. Click on the bin icon of the context menu.

Annotate Elements
Each element (node and edge) in the BPMN process can be annotated. This can be done by
 * Manually changing the content of the wiki page that represents the wiki page or
 * Semantic Forms, which is included into the extension.

Manually Annotate Elements
Each element is represented by its own wiki page. Therefore, information for this element can be added on its page. In order to facilitate to get to the wiki page, which represents the element, we included an icon in the context menu that links to the wiki page.


 * Click on an BPMN element in order to open the context menu.
 * Click on the angular arrow below the magnifier to jump to the wiki page that represents the BPMN element.



This is an examplary wiki page that represents a BPMN element. It contains among other information like position, height, width and label of the BPMN element. Additional information can be added to the wiki page in order to annotate the element.



Using Semantic Forms
In order to faciliate annotating a BPMN element, one can also use Semantic Forms.

In order to annotate a BPMN element by using Semantic Forms, click on the element so that the contex tmenu appers. Afterwards click on the magnifier. Afterwards, all available Forms, stored in the MediaWiki, are listed. Click on the Forms with which the element should be annotated.



After clicking on a Semantic Form, a popup appears that allows to easily annotate the element with the selected form.



Future Work

 * Adding Shortcuts and latest bpmn-js

Remarks

 * 23 May 2016: Bug with Edge labels has been solved
 * 01 July 2016: BPMN Diagrams can now be displayed on the corresponding BPMN wiki pages. The diagrams can be changed, however, the information is not stored permanently. To display the diagrams, please add the following code on MediaWiki:Common.js

The following code must be included into MediaWiki:Common.js to display BPMN diagrams on the BPMN wiki page if (document.getElementById('processXml')) { var txt = '                       &times;      Diagram may not render correctly due to import warnings. Show details. You edited the diagram. Undo last change. <a href class="close" aria-hidden="true" jsaction="click:bio.hideUndoAlert">&times;</a>          <ul class="io-zoom-reset io-control io-control-list">              <button title="reset zoom" jsaction="click:bio.zoomReset">                      </li>    </ul>    <ul class="io-zoom io-control io-control-list">              <button title="zoom in" jsaction="click:bio.zoomIn">                      </li>                   </li>              <button href title="zoom out" jsaction="click:bio.zoomOut">                      </li>    </ul>  ';

loadCSS("../extensions/CognitiveProcessDesigner/Display/Display-app.css"); loadCSS("../extensions/CognitiveProcessDesigner/Display/Display-diagram-js.css");

$("#mw-content-text").append(txt); loadScript("../extensions/CognitiveProcessDesigner/Display/Display-appTestSuite.js", function {}); }

function loadScript(url, callback) {

var script = document.createElement("script") script.type = "text/javascript";

if (script.readyState) { //IE script.onreadystatechange = function { if (script.readyState == "loaded" ||               script.readyState == "complete") { script.onreadystatechange = null; callback; }       };    } else { //Others script.onload = function { callback; };   }

script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }

function loadCSS(href) {

var cssLink = $(" "); $("head").append(cssLink); //IE hack: append before setting href

cssLink.attr({       rel: "stylesheet",        type: "text/css",        href: href    });

}