AutoForm Extension: BPMN

announce
1

Hi there,

I am at a point where I’d like to announce you a stable version of my AutoForm BPMN extension.

With this extension you can easily create and edit BPMN processes and save them into a document field using AutoForm.

Package: The trusted source for JavaScript packages, Meteor.js resources and tools | Atmosphere
Source: GitHub - jankapunkt/meteor-autoform-bpmn: Include bpmn-js modeler as autoform template.
Example Project: GitHub - jankapunkt/meteor-autoform-bpmn-example: Demo for the AutoForm extension jkuester:autoform-bpmn

It includes the bpmn-js modeler (http://bpmn.io/), the bpmn-js-properties-panel and the camunda moddle, so that you can even save camunda compliant BPMN definitions to your documents.

Benefits

  • brings you a powerful bpmn modeler and saves the result right into your documents
  • no hassle with integrating bpmn-js anymore (it can be frustating)
  • camunda compliant BPMN models using the properties panel

Screenshot

Taken from the example project

screenshot
screenshot1219×831 41.6 KB

It is very easy to install and run

1. Add the package to your project

meteor add jkuester:autoform-bpmn

2. Define a field as type ‘bpmn’ (example uses SimpleSchema)

import SimpleSchema from 'simpl-schema';

const bpmnSchema = new SimpleSchema({
    data: {
        autoform: {
            type:'bpmn',
        }
    }
})

3. Define your form, using the previously created schema

{{> quickForm id="bpmnForm" schema=schema type="normal" }}

That’s it. Open the page that uses the form and you will see the modeler. Create some model and click on submit. The output will be shown on the bottom, as it appears in the insertDoc field that is defined as ‘bpmn’.

You can clone out the example repo to try and play with the extension.

Please help to improve

The extension is in use in my own projects, as well as some client projects. I also wrote a lot of tests (coverage is currently between 70% and 75%, thanks a lot to @serutan ) recently.

I appreciate any aim to improvement (issues, critique, PR) and popularity (installation, star, fork, share). I am also very open for feature requests and new ideas.

Please let me know what you think about this.

7 Likes
2

@jkuester: This is great. Quick question. Is there an easy way to simply view the BPMN flow vs. editing it, i.e. looking at the flow w/o the sidebars etc. Ideally it wouldn’t be an image, but something you can interact with (e…g. hover over and see description or being able to navigate to sub-processes etc.). Thanks!

3

Hi, this could be added soon as the viewer is also part of bpmn-js and it could be made configurable using the form schema.

Would you mind to open an issue on the GitHub repo as a kind reminder? I am currently on vacation and with a gh issue I won’t forget this.

Best

1 Like
4

Some follow-up for those who are still interested in this package.

The feature requested by @okoernig has been implemented in 0.1.5 and a new “fullscreen” feature has also been implemented in 0.1.6. You can now toggle the modeler to enlarge to fit the whole viewport of the browser to increase modeling comfort.

Despite these there are still some unresolved issues that don’t affect the current functionality but prevent more “nice-to-have” features to be included.

Any contribution to the package is welcomed and highly regarded! Future updates will be posted as follow-ups in this thread, too.

1 Like