Search code examples
c#node.jsbpmn.io

How to create a BPMN.io Example

Can someone guide me the correct way to actually start such an example..? I am used to develop ASP.NET projects and need to create a bpmn modeler with custom properties. So I found BPMN.IO, https://bpmn.io/, which (I think) can provide me with such a modeler and the opportunity to use custom properties.

There are many examples to be found on the site but somehow I am not able to start one of these correctly. For example: https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel

What steps do I need to take to get this working in VS2017? I am not familiar with the structure I see in this example.

Any help is appreciated.

Solution

    1. You'll have to begin using node.js in your project -- once that's installed you'll get the node_modules folder in your project

    2. Download the properties panel sample from bpmn.io. You'll have 4 additional folders in node_modules -- bpmn-font, bpmn-js, bpmn-js-properties-panel, bpmn-moddle.

    3. Now as part of your project you should have the other folders from the example -- bundling, css, modeler, properties-panel and properties-panel-extension. I called my folder "BPMN" (used in step 4)

    4. Write your browersify command to take the files in part 3 and combine them into the BPMN_PropertiesPanel.js file. This script needs to be included on your page. Mine is:

    browserify BPMN/properties-panel-extension/app/index.js -t [ stringify --extensions [ .bpmn ] ] -g [ babelify --presets [ "env" ] ] -o ToolLibraries/BPMN/BPMN_PropertiesPanel.js

    1. For changing the app.less to app.css file, you'll need a command line for doing that too. Mine is:

    lessc BPMN/properties-panel-extension/css/app.less BPMN/properties-panel-extension/css/app.css

    1. To add custom properties, modify "MagicPropertiesProvider.js"

    2. To add custom tabs on the properties panel, modify "SpellProps.js". Your browserify command will collect these changes and output them into your script.

    3. If you need to store your diagrams in SQL Server, I recommend varchar. I used XML at first but I couldn't get it to work. Perhaps you'll have more luck than I.

    PS -- there are still browser-dependent issues with the modeler and it can throw js errors in IE (Chrome, FF, seem OK). Still it's the best diagram I could find and the output XML is spot on.