fCM-js

Modeling Tool with Design-Time Support for Fragment-Based Case Management.

🚀 Try it live! 🚀

fcm-js is a modeling tool for fragment-based case management. It aims at supporting users at design time by providing a joint, visual user interface for all artifacts and by integrating automated guideline checking based on fCM guidelines.

The catalog of fCM guidelines is also available in this repository in the wiki.

User Guide

Installation

Node needs to be installed for the modeler to run.

To install the modeler, clone this repository on your machine. To start, navigate to the installation folder and enter the following into your command line:

npm install
npm run build
npm run serve

The modeler is then served to http://localhost:9024.

When developing, the following can be run to automatically re-bundle on changes:

npm run dev

Usage

There are a demo video and a use case tutorial to showcase how to use fcm-js.

Developer Guide

Structure Overview

The repository is structured as follows:

• /app contains the actual application files.
  • For changes of the overall UI: The web page .js and .html files can be found in its root, and most general style files under /styles.
  • The actual logic is then contained in the /lib folder
    • /datamodelmodeler, /fragmentmodeler, /goalstatemodeler, and /olcmodeler include the resources of the respective modelers. These build heavily on diagram-js, bpmn-js, and object diagram modeler, please refer to the documentations of those three to understand how they work. Common modules between the modelers can be found in /common, however, duplication might still exist.
    • /mediator includes the central component that controls the communication between and access to the single modelers. For each modeler, this Mediator contains one so called "hook", which wraps and allows access to the respective modeler.
    • /guidelines includes all relevant code for guidelines. The list of guidelines is defined in Guidelines.js.
• /resources contains auxiliary example and default files.

Guideline Interface

The guidelines are integrated via a unified interface. They can be found in app/lib/guidelines. Here the actual guidelines are implemented in Guidelines.js while the checking component is located in Checker.js. Every guideline consists of the following components:

• title: The title of the guideline which shortly summarizes what the guideline is about.
• id: The id of the guideline which must be a unique identifier.
• getViolations(mediator) {}: A function which returns an array of elements. The mediator parameter allows access to the respective modelers via its hooks (see above).
• severity: Can be one of the following: Errors | Warnings | Information and indicates the color the element is highlighted in.
• link: A link to the guideline in the guideline catalog.

For every returned element in the getViolations() function the follwing must be returned:

• element: The .businessobject of the element the violation should be displayed on.
• message: The error message which is displayed in the error table and the hints.
• quickFixes[]: An array of potential quickfixes for the violation.
  • label: The message which is displayed on the quickfix button.
  • action: The actual action which is performed when the button is clicked.

A new guideline can therefore be implemented by adding the code in the described format in the export default array in the Guidelines.js file.

License

MIT

Contains parts of bpmn-io released under the bpmn.io license, and diagram-js and object diagram modeler released under the MIT license.