cockpit-bpmn-js-module-bundled

bpmn.js Cockpit module - bundled

This example shows how to develop, bundle and include a bpmn-js custom module into Cockpit.

For additional information, please also see the documentation.

Built and tested against Camunda Platform version 7.22.0.

Develop the custom bpmn-js module

For this example, we will implement a custom renderer, which will renderer BPMN UserTasks and Events differently.

You can find the source code in the custom-renderer directory.

Implementing a custom renderer is just one of many examples how you can customize bpmn-js to your needs. Please visit the bpmn-js Custom Rendering example to find out more about rendering and how to customize it. Please visit awesome bpmn-js for various other resources and projects around bpmn-js and other bpmn-io libraries.

Bundle the custom renderer

The Cockpit WebApplication will import the additional modules during runtime in the browser. Hence, the sources need to be bundled so that they can be interpreted by the browser. In order to do that, we will use rollup. We will also use the rollup-commonjs plugin to convert the sources to ES6 and the rollup-node-resolve plugin to include third party modules required by our custom renderer.

Our rollup.config.js file looks like this:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

export default {
  input: "custom-renderer/index.js",
  output: {
    file: "dist/custom-renderer-module-bundled.js"
  },
  plugins: [resolve(), commonjs()]
};

We can create the bundled .js file by running

$ npm run bundle

Note that the bundled custom-renderer-module-bundled.js module is included in this repository, so you don't necessarily have to locally run all of the above steps.

Include the bundled module in Cockpit

To include the bundled module in your Cockpit application, copy the custom-renderer-module-bundled.js file into the app/cockpit/scripts/ folder in your Camunda webapp distribution. For the Tomcat distribution, this would be server/apache-tomcat-X.X.XX/webapps/camunda/app/cockpit/scripts/.

Then, add the following content to the app/cockpit/scripts/config.js file:

// …
  bpmnJs: {
    additionalModules: [
      'scripts/custom-renderer-module-bundled'
    ]
  }
// …

After that, start the server, login to Cockpit and navigate to the Process instance view to check the result.

License

Use under terms of the Apache License, Version 2.0