bpmn-io / bpmn-js-examples

Examples how to use bpmn-js

bpmn-js Examples

This repository contains a number of examples showing how to use and integrate bpmn-js into your applications.

Starter

• starter - Getting started with bpmn-js using our pre-packaged distribution.

Basic

• bundling - an example how to install bpmn-js via npm, use it in a node-style application and package it and the application code for the browser with Webpack.
• colors - Showcases different ways to add colors to your BPMN diagram.
• interaction - Listen to diagram events and react to them.
• overlays - Attach overlays to BPMN 2.0 diagrams to provide custom buttons or showing additional information.
• url-viewer - A simple url viewer for BPMN 2.0 process diagrams.
• types - How to use the types shipped with bpmn-js.

Intermediate

• modeler - A simple BPMN 2.0 modeler. Gains more features as time passes by.
• commenting - A simple commenting application build on top of BPMN 2.0 diagrams
• bpmn-properties - Read and write BPMN properties with bpmn-js.
• i18n - Use a custom translation module with bpmn-js.
• properties-panel - Add a properties panel and edit execution related BPMN 2.0 properties.
• theming - an example that showcases the different aspects of theming bpmn-js.
• modeling-api - How to create, connect and edit elements using the API.

Advanced

• bpmn-js-nyan - Model nyan cats instead of service tasks, resize elements and assign custom element colors.
• bpmn-js-task-priorities - persistent task colors, diagram interaction and custom extension elements demo.
• bpmn-js-in-color - Adding color support for BPMN based on the BPMN in Color proposal.
• custom-bundle - How to build a custom version of bpmn-js
• bpmn-js-example-model-extension - An example of creating a model extension for bpmn-js.
• bpmn-js-example-custom-rendering - An example of creating custom rendering for bpmn-js.
• bpmn-js-example-custom-controls - An example of creating custom controls for bpmn-js.
• custom-elements - An introduction to custom elements, their use cases and implementation approaches.
• custom-modeling-rules - Add custom rules to the bpmn-js modeler.
• deep-linking - An example of how to switch between different diagram layers.

Properties Panel

• properties-panel-extension - An example showing how to extend the properties panel with custom controls.
• properties-panel-async-extension - An example showing how to handle asynchronous data loading inside the properties panel.
• properties-panel-list-extension - An example showing how to extend the properties panel with lists.
• bpmn-js-example-react-properties-panel - An example how to build a simple properties panel for bpmn-js using React.

Featuring Libraries

• minimap - Adding a minimap to bpmn-js.
• transaction-boundaries - Visualizing transaction boundaries in bpmn-js.

Integrations

• bpmn-js-example-angular - Showing a possible integration of the toolkit into an Angular application.
• vue-bpmn - Showing a possible integration of the toolkit into a Vue.js application.
• react-bpmn - Showing a possible integration of the toolkit into a React application.
• svelte-bpmn - Showing a possible integration of the toolkit into a Svelte application.

Additional Resources

• bpmn-js Walkthrough - A full guide through the library and its underlying foundation.
• bpmn.io Awesome List - Links to great libraries and additional learning resources

License

MIT (unless noted otherwise)

bpmn-js-examples's Issues

Custom Button on the right-side of a shape already in place.

So I wanted to do a custom overlay in a shape already available, how could I add like a custom button on the right-side of the shape for an action to be taken?

Didn't find that in the examples, sorry if it's too obvious but I didn't see it.

Best Regards,

With bpmn-js-0.11 Unable to build Modeler example

I suspect some file names are changed like BpmnRenderer, Renderer util which are not changed in some files of Modeler, hence error is thrown when 'Grunt' is run.
Error message is:

Running "browserify:watch" (browserify) task

Error: Cannot find module 'diagram-js/lib/util/RenderUtil' from '/home/venkat/phd/bpmn-js/bpmn-js-examples/modeler/node_modules/bpmn-js/lib/draw'
Warning: Error running grunt-browserify. Use --force to continue.

Note that the error does not occur when I change to 0.10.0 in package.json. So I suspect Aug 10 commit to bounce bpmn-js?

How to send an API request in properties-pannel?

In my properties pannel, i have a property which want to send an API request to get some backend data。But, i don't know how to write code, is there some examples for this problem?

Properties Panel Extension: how to add entryFactory.table?

I have used

group.entries.push(entryFactory.table({
      id: 'newTable',
      labels: ['Name', 'Value'],
      addLabel: 'Add Entry',
      modelProperties: ['key', 'value']
    }));

but this is not working.

Add properties panel extension example

• Showcase adding custom property provider
• Showcase custom validation

[custom-modeler] Move not working for BPMN shapes

In the example to create custom elements, the custom modeler seems not to be applying the drag and drop event for BPMN shapes.

I've tested this with both, and the drag and drop works with the Modeler by default, but once I start to use the custom one the drag and drop events stop working for BPMN shapes.

I found that the problem comes from this file: CustomRules.js in the line 53

Seems that if you try to move a custom element the allowed variable is true, but if it's a BPMN shape is false.

I'm not looking deeply into this issue, as a workaround, now I'm returning true always, but I'm not sure what it implies.

There's an small explanation in a comment before that line, maybe I'm not understanding the right behavior of this.

How to disable the zoom in zoom out

Hi,

I have an issue when scroll up and down the diagram by scroll ball on my mouse, it's zoom in / zoom out even if i don't want to, I just want to scroll.

can you show me how to disable the zoom functionality?
thanks

Add example for custom modules

When I implemented an example project for bpmn-js that uses an additional module I was wondering about the array sytax which you are required to use in order to make it work. As a developer who doesn't know about the internal workings of bpmn-js it might be overwhelming having to use the array syntax for something as simple as providing a different translation function for i18n. At least this is what I experienced.

Instead of just saying

var customTranslate = require('./customTranslate);

//...

additionalModules: {
  translate: customTranslate
}

I had to write

var customTranslate = {
  translate: [ 'value', require('./customTranslate/customTranslate') ]
};

//...

additionalModules: {
  translate: customTranslate
}

and figuring out what 'value' means took me even longer. An example project that shows how to use additional modules the right way would be a great addition.

Create a custom element example

Add an example that shows how to handle custom elements in bpmn-js.

This should include:

• Adding custom elements to the canvas
• Rendering a custom element
• Defining rules for a custom element

i18n error: "translate is not a function"

In my index.js:

import BpmnModeler from 'bpmn-js/lib/Modeler'
import propertiesPanelModule from 'bpmn-js-properties-panel'
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json'

const customTranslate = {
  translate: ['value', require('./../customTranslate/customTranslate')]
}

const bpmnModeler = new BpmnModeler({
  container: '#bpmn-canvas',
  propertiesPanel: {
    parent: '#properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule,
    customTranslate
  ],
  moddleExtensions: {
    camunda: camundaModdleDescriptor
  }
})

The file customTranslate/customTranslate is exactly the same as the one in the i18n example. Yet it logs error "translate is not a function":

TypeError: translate is not a function
    at PaletteProvider.getPaletteEntries (eval at <anonymous> (app.js:6255), <anonymous>:80:14)
    at eval (eval at <anonymous> (app.js:8367), <anonymous>:79:22)
    at arrayEach (eval at <anonymous> (app.js:2892), <anonymous>:15:9)
    at eval (eval at <anonymous> (app.js:8859), <anonymous>:15:9)
    at Palette.getEntries (eval at <anonymous> (app.js:8367), <anonymous>:78:3)
    at Palette._update (eval at <anonymous> (app.js:8367), <anonymous>:135:38)
    at Palette.registerProvider (eval at <anonymous> (app.js:8367), <anonymous>:63:8)
    at new PaletteProvider (eval at <anonymous> (app.js:6255), <anonymous>:19:11)
    at invoke (eval at <anonymous> (app.js:9051), <anonymous>:94:15)
    at Array.instantiate (eval at <anonymous> (app.js:9051), <anonymous>:74:20)

issue adding custom elements to bpmn io xml file

custom elements are not getting added to the XML

Custom context pad doesn't recognize custom elements

Hello,
The getContextPadEntries() function of CustomContextPadProvider doesn't seem to be working correctly. It uses the isAny() function which tests if the BusinessObject of an element is a function, which isn't the case in this example.

Regards,
Stephane

Be able to export and import color settings in bpmn annotation

It would be nice if you guys added the function to import/export shapes with color attributes like border color.

How to open an old BPMN diagram for edit functionality?

i want to open my previously saved diagram
so, is it possible? if yes please guide me....

Thank You.

How to integrate BPMN -js in vue?

How to integrate BPMN -js in vue?

Custom modeler/properties panel component is missing certain features from properties panel

Hi, I have been using the custom bower option to create a custom modeler with properties panel and it has been working great except for the properties panel missing some tabs. In the properties panel normal project, the panel has multiple tabs including "Extensions", etc. From the custom component I created, I only get the "General" tab. Thanks for your help!

[Error] Custom-elements example

Hi guys, i clone the repo run

npm install
npm run dev

The code is builded and served in browser but the modeler is not shown and the js console show the current error

Diagram.js:55 Failed to instantiate component
(anonymous) @ Diagram.js:55
Diagram.js:56 TypeError: contextPad.registerProvider is not a function
    at CustomContextPadProvider.ContextPadProvider (ContextPadProvider.js:24)
    at CustomContextPadProvider (CustomContextPadProvider.js:15)
    at invoke (injector.js:94)
    at Array.instantiate (injector.js:74)
    at Injector.get (injector.js:63)
    at Diagram.js:53
    at Array.forEach (<anonymous>)
    at bootstrap (Diagram.js:49)
    at createInjector (Diagram.js:84)
    at CustomModeler.Diagram (Diagram.js:134)
(anonymous) @ Diagram.js:56
Diagram.js:58 Uncaught TypeError: contextPad.registerProvider is not a function
    at CustomContextPadProvider.ContextPadProvider (ContextPadProvider.js:24)
    at CustomContextPadProvider (CustomContextPadProvider.js:15)
    at invoke (injector.js:94)
    at Array.instantiate (injector.js:74)
    at Injector.get (injector.js:63)
    at Diagram.js:53
    at Array.forEach (<anonymous>)
    at bootstrap (Diagram.js:49)
    at createInjector (Diagram.js:84)
    at CustomModeler.Diagram (Diagram.js:134)

Fix ENOSPC Use --force to continue

Hi.

When I ran the custom-elements example, then I ran into this issue:

..../bpmn-js-examples/custom-elements: grunt auto-build
Running "browserify:watch" (browserify) task
Warning: watch ..../bpmn-js-examples/custom-elements/node_modules/lodash/internal/createHybridWrapper.js ENOSPC Use --force to continue.
Aborted due to warnings.

Then I ran this code:

..../bpmn-js-examples/custom-elements$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

After which

grunt auto-build

works like a swell.

Found the solution here http://stackoverflow.com/questions/16748737/grunt-watch-error-waiting-fatal-error-watch-enospc

Can there be an "npm module" too? :-)

Can you provide an example of webpack?

I used file-loader，but got an error like this "could not parse document".

what is this : "emumerations": [ ], "associations": [ ]

"emumerations": [ ], "associations": [ ]
use for?
and what is this

What is the difference between 'extends' and 'superClass' ?

Looking at the properties-panel-extension example:
https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel-extension

In the Moddle descriptor file, what is the difference between 'extends' vs 'superClass' ?

I see 'superClass' being used when looking at default BPMN Moddle here:
https://github.com/bpmn-io/bpmn-moddle/blob/master/resources/bpmn/json/bpmn.json

Server side Integration

Is there any integration points in your code, so that we can interact with server side .bpmn files hosted in our grails application?

Wanna load a .bpmn from server, user plays with it, post it to the server back again.

BTW, very nice work of you... :)

Error when running `grunt auto-build`

Hi,

I used grunt build successfully on the bpmn-js-properties-panel example.
However, grunt auto-build results in an error UnhandledPromiseRejectionWarning each time it is executed. When the files in app are edited and saved, the example turns back to just a normal modeler without the properties panel.

Any idea what might be causing the problem? Thank you.

Running "browserify:watch" (browserify) task
>> Bundle dist/index.js created.

Running "connect:livereload" (connect) task
Started connect web server on http://localhost:9013

Running "watch" task
Waiting...
(node:4384) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3

Create Custom Element Custom Connection Example

The bpmn-js framework seems appropriate as the base for building custom workflows of active automation. In this case elements would reflect these machine automation objects visually. The element would need to be able to connect into other tasks and other bpmn components.

The custom element example provides a great building block that shows how to make the required custom elements which might reflect a machine automation object. The next stage is connecting those custom elements into bpmn-js workflows. If the custom elements example had custom objects with the ability to connect to tasks it would speed up learning how to apply this to the automation integration use case considerably.

Angularjs integration

is there any directives or examples how to integrate the bpmn.js in an angularjs based application ?

simple-bower example: embedding modeler instead of viewer leads to graphical glitches

The README file for the simple-bower example implies that switching from viewer to modeler is as simple as modifying the name of the imported .js file. However, the modeler's connections look very glitchy (bold black lines with huge black dots) and the left-hand panel is not displayed at all without adding the following lines to index.html:

<link rel="stylesheet" href="../bower_components/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="../bower_components/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" />

not able to "compile" custom-bower-bundle

Hi,

i'm trying to get a web based bpmn page simliar to http://demo.bpmn.io but with properties panel added.
not unfamiliar with npm, nodejs, grunt etc, so just using pure javascript and html.

thus, trying to make a bunch of javascript like https://github.com/bpmn-io/bpmn-js-seed
managed to get a single bundle.js using browsify, but that is 1 big .js file, different from bpmn-js-seed, which are many .js files in a dist folder.

my steps are as follows:

1. cloned this repository using git
2. changed folder to /bpmn-js/examples/custom-bower-bundle
3. executed npm install, many errors logged in npm-debug.log
   npm-debug.log.txt

any help is greatly appreciated!

Publish properties-panel example

Migrate examples to bpmn-js@1

Examples

• bpmn-properties
• bundling
• colors
• commenting
• custom-bower-bundle
• custom-bundle
• custom-elements
• custom-meta-model
• custom-modeling-rules
• i18n
• interaction
• minimap
• modeler
• overlays
• pre-packaged
• properties-panel
• properties-panel-extension
• simple-bower
• simple-commonjs
• starter
• transaction-boundaries
• url-viewer

[email protected] dependency in custom-elements

In the custom element example npm will install the version @0.3.0 from the tiny-svg package. However the current package version is @0.1.3. As a result of that the packages cannot be installed.

https://github.com/bpmn-io/tiny-svg/releases

https://github.com/bpmn-io/bpmn-js-examples/blob/master/custom-elements/package.json

Properties-panel-extension example

Hi,

is there a way of adding several propertiesProvider and load them?

example:

index.js files for two provider

module.exports = {
  __init__: [ 'propertiesProvider' ],
  propertiesProvider: [ 'type', require('./ElitePropertiesProvider') ]
};

module.exports = {
  __init__: [ 'propertiesProvider' ],
  propertiesProvider: [ 'type', require('./MagicPropertiesProvider')]
};

now I want to load both providers in the index.js of the app file, which is obviously not working since I just overwrite the first one with the second on.

var propertiesPanelModule = require('bpmn-js-properties-panel'),
    propertiesProviderModule = require('./provider/magic'),
    eliteProviderModule = require('./provider/1337'),
    magicModdleDescriptor = require('./descriptors/magic'),
    eliteModdleDescriptor = require('./descriptors/elite');

var container = $('#js-drop-zone');

var canvas = $('#js-canvas');

var bpmnModeler = new BpmnModeler({
  container: canvas,
  propertiesPanel: {
    parent: '#js-properties-panel'
  },
  additionalModules: [
    propertiesPanelModule,
    propertiesProviderModule,
    eliteProviderModule
  ],
  moddleExtensions: {
    magic: magicModdleDescriptor,
    elite: eliteModdleDescriptor
  }
});

怎么使得bpmn-js变中文

Add example for properties panel + element templates

Showcase how to use bpmn-js + bpmn-js-properties-panel + element templates.

properties-panel-extension doc issue

In the code example Define a group in the properties-panel-extension folder, there is writte that spellProps should be invoked in the field entries of blackMagicGroup. That doesn't make any sense since this function doesn't return anything. In you code example you don't invoke the function.

This lead to much confusion for me, I think your README.md is wrong at this point.

add custom i18n example

Based on bpmn-io/bpmn-js#491

How can I add custom element?

I want to add a element name like this:

<bpmn:startEvent id="_2" name="MyStart">
    ...
</bpmn:startEvent>

How to revise the js-properties-panel and add custom element and value.

Create a custom coloring example (using CSS)

• people love colors
• people should learn how to color their BPMN diagrams using bpmn-js

Custom Elements Example

Just learning how to load custom elements and trying the demo.
Getting Error: Cannot find module 'diagram-js/lib/draw/BaseRenderer' during grunt auto-build.

I found BaseRenderer.js and dropped it in, but gets errors after grunt auto-build
app.js:20 something went wrong: TypeError: self.createBpmnElement is not a function(…)

PS.Thanks for the great work on bpmn-js / bpmn-io!

Create a custom rules example

See custom-rules-example.

How do I create a collapsed pool or process?

Is it possible to create a collapsed pool? How?

Use bpmn:SequenceFlow for custom element

I want to use bpmn:SequenceFlow for custom element by return {type: 'custom:connection'} in function canConnect in file CustomRules.js
However, the sequence flow was removed when moving element.
Detail: see attachment

Could you please help.

npm install failing: package.json expects bpmn-js ^27.2 but module is at release 26.2

I assume this was a typo in the latest package.json update?? Easy enough to change by editing the package.json file manually - setting it to 26.2.

Update properties panel example

Changes to Delegate entries under servive Task for bpmn properties panel not getting updated on UI

I'm trying to modify the Details section of General Tab under type Service Task.

What I want ?

I'm trying to achieve that when user selects Implementation type as JavaClass I show an dropdown for delegate field instead of an textbox where on any other selection other than JavaClass it shall be textbox.

Later I want to load dynamic data into the dropdown.

What I tried ?

I tried the following 2 ways

1 : Edited file camunda\parts\implementation\Delegate.js to take one more var which stores entryFactory.selectBox and on type == class return the newly created select box in module.exports else return the default textbox like this .

module.exports = function(element, bpmnFactory, options) {

  var getImplementationType = options.getImplementationType,
      getBusinessObject     = options.getBusinessObject;

  var delegateEntrySelect = entryFactory.selectBox({
    id: 'delegate',
     label: 'Value',
    selectOptions: [
      {value:"one",name:"one"},{value:"two",name:"two"}
    ],
    modelProperty: 'delegate',
    emptyParameter: false,

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });   

  var delegateEntry = entryFactory.textField({
    id: 'delegate',
    label: 'Value',
    dataValueLabel: 'delegationLabel',
    modelProperty: 'delegate',

    get: function(element, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var label = getDelegationLabel(type);
      return {
        delegate: bo.get(attr),
        delegationLabel: label
      };
    },

    set: function(element, values, node) {
      var bo = getBusinessObject(element);
      var type = getImplementationType(element);
      var attr = getAttribute(type);
      var prop = {};
      prop[attr] = values.delegate || '';
      return cmdHelper.updateBusinessObject(element, bo, prop);
    },

    validate: function(element, values, node) {
      return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
    }
  });

  var eleTOReturn = (getImplementationType(element) && getImplementationType(element) == "class") ? delegateEntrySelect : delegateEntry
  console.log("returning ele",eleTOReturn)
  return [ eleTOReturn ];
};

output :
https://i.stack.imgur.com/QexEg.png

2 : Passed both selectBox and default text box but differentiated them in disabled by condition such as
a : selectBox (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class"))

b : textBox (!isDelegate(getImplementationType(element)) || ( isDelegate(getImplementationType(element)) && type === "class"))

In both the cases the JS code executes well and the same can be seen under group.entries variable inside camunda\parts\serviceTaskDelegateProps.js line#60 but they don't get reflected on UI.

The Delegate.js code is as under

module.exports = function(element, bpmnFactory, options) {

var getImplementationType = options.getImplementationType,
  getBusinessObject     = options.getBusinessObject;

var delegateEntrySelect = entryFactory.selectBox({
id: 'delegate',
 label: 'Value',
selectOptions: [
  {value:"one",name:"one"},{value:"two",name:"two"}
],
modelProperty: 'delegate',
emptyParameter: false,

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("SELECT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type !== "class"));
}
});   

var delegateEntry = entryFactory.textField({
id: 'delegate',
label: 'Value',
dataValueLabel: 'delegationLabel',
modelProperty: 'delegate',

get: function(element, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var label = getDelegationLabel(type);
  return {
    delegate: bo.get(attr),
    delegationLabel: label
  };
},

set: function(element, values, node) {
  var bo = getBusinessObject(element);
  var type = getImplementationType(element);
  var attr = getAttribute(type);
  var prop = {};
  prop[attr] = values.delegate || '';
  return cmdHelper.updateBusinessObject(element, bo, prop);
},

validate: function(element, values, node) {
  return isDelegate(getImplementationType(element)) && !values.delegate ? { delegate: 'Must provide a value' } : {};
},

disabled: function(element, node) {
  var type = getImplementationType(element);
  console.log("TEXT DISABLE",(!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")))
  return (!isDelegate(getImplementationType(element)) || (isDelegate(getImplementationType(element)) && type === "class")); 
}  
});

 return [ delegateEntrySelect, delegateEntry ];
};

Output : https://i.stack.imgur.com/ZvPpy.png

In both the cases console.log and relevant variables get updated but UI doesn't reflect the changes

grunt auto-build ERROR

grunt auto-build
Running "copy:diagram_js" (copy) task
Copied 1 file

Running "copy:bpmn_js" (copy) task
Copied 6 files

Running "copy:app" (copy) task
Copied 2 files

Running "less:styles" (less) task

1 stylesheet created.

Running "browserify:watch" (browserify) task

Error: Cannot find module '../../../../_is-buffer@1.1.5@is-buffer/index.js' from 'D:\projects\properties-panel\node_modules_core-util-is@1.0.2@core-util-is\lib'
Warning: Error running grunt-browserify. Use --force to continue.

Aborted due to warnings.

--- [email protected]

Fast usage misupdate nodes properties

Hi!

If user clicks fast enough (less than 1 second) on the canvas (which is the process) when typing a property of a node (e.g. start event) then properties-panel updating process' property instead of the start event property.

can i implement "properties-panel-extension" with vue.js

i want to create BPMN diagram with custom property using Vue.js application.
is it possible?

Grunt tasks to re-browserfiy app.js files

I have a few problems running examples:

First and foremost when I change app.js, I want to see the changes immediately, but with current Grunt tasks I have to stop grunt auto-build, execute grunt to browserify and execute auto-build again.
To overcome this issue I've added browserify:app to list of watch tasks. First of all, do you have the same problem or not ? and if so, since I'm not a grunt expert, is my solution correct or not ?

Beside this problem I also encounter GET http://localhost:9014/livereload.js?snipver=1 net::ERR_EMPTY_RESPONSE error if I don't start livereload manually. Should I have to do it ? Or am I missing something ?

More complex extensions

Hi,

great work on providing a mechanism to extend the properties already!
Since extending the server side trough a ProcessEnginePlugin with a CustomBPMNParseListener is an easy way to extend camunda with more company specific details I think this is a perfect step forward to also include a mechanism on the frontend to edit these company details.

So I tried to adjust the example and add a more complex customization on top of camunda:extensionElements since that sounds like it should be go-to extension point. As far as I can tell from the examples in the moddle-project, I'd need a custom element that is a subclass from 'Element' in order to be part of extensionElements. My first step was to modify the moddle as such:

{
  "name": "my-company",
  "prefix": "my",
  "uri": "http://my-company",
  "xml": {
    "tagAlias": "lowerCase"
  },
  "associations": [],
  "types": [
    {
      "name": "MyCompanyDetails",
      superClass: [
        "Element"
      ],
      properties: [
      {
        "name": "myFirstAttr",
        "isAttr": true,
        "type": "String"
      },
      {
        "name": "mySecondAttr",
        "isAttr": true,
        "type": "Boolean"
      },
      {
        "name": "myListProp",
        "isMany": true,
        "type": "MyListElement"
      }
      ]
    },
    {
      "name": "MyListElement",
      "properties": [
      {
        "name": "text",
        "isAttr": true,
        "type": "String"
      },
      {
        "name": "value",
        "isBody": true,
        "type": "String"
      }
      ]
    }
  ]
}

Then i tried to link it via the modelProperty as seen in the spell example:

 group.entries.push(entryFactory.textField({
      id : 'myFistAttr',
      description : 'The first attribute.',
      label : 'First attribute',
      modelProperty : 'myFirstAttr'
    }));
    group.entries.push(entryFactory.checkbox({
        id : 'mySecondAttr',
        description : 'The second attribute.',
        label : 'Second attribute.',
        modelProperty : 'mySecondAttr'
    }));
//    no clue right now how to go forward with customListElement
//    group.entries.push(entryFactory.customListElement({ 
//        id : 'myListProp',
//        description : 'List Property with multiple entries.',
//        label : 'The list for MyListElement.',
//        modelProperty : 'myListProp'
//    }));

But that doesn't work anymore for the simple attributes. The error is: 'Error: no namespace uri given for prefix '. Is it because I didn't nest it inside of the extensionElement manually but it expects that now, since it's subclassed from Element?
I tried to use ExtensionElementsHelper to solve that but got stuck pretty since I don't have a general overview on how things should fit together yet.

So I'm wondering if you'd consider to add a more complex example on how to extend the properties panel with custom tags in general?
If a full example doesn't fit the schedule right now, can you give me some general pointers on which parts I should put my focus on to implement custom nested tags inside of extensionElement? Once I'm done, I'll make sure to provide the example!