bpmn-io / bpmn-js-examples Goto Github PK
View Code? Open in Web Editor NEWExamples how to use bpmn-js
Home Page: https://bpmn.io/toolkit/bpmn-js
Examples how to use bpmn-js
Home Page: https://bpmn.io/toolkit/bpmn-js
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,
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?
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... :)
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!
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:
git
/bpmn-js/examples/custom-bower-bundle
npm install
, many errors logged in npm-debug.log
any help is greatly appreciated!
Add an example that shows how to handle custom elements in bpmn-js.
This should include:
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
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)
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.
is there any directives or examples how to integrate the bpmn.js in an angularjs based application ?
Based on bpmn-io/bpmn-js#491
See custom-rules-example.
It would be nice if you guys added the function to import/export shapes with color attributes like border color.
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.
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
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" />
Is it possible to create a collapsed pool? How?
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!
Examples
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
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
Showcase how to use bpmn-js
+ bpmn-js-properties-panel
+ element templates.
i want to open my previously saved diagram
so, is it possible? if yes please guide me....
Thank You.
I have used
group.entries.push(entryFactory.table({
id: 'newTable',
labels: ['Name', 'Value'],
addLabel: 'Add Entry',
modelProperties: ['key', 'value']
}));
but this is not working.
How to integrate BPMN -js in vue?
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!
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
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.
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
"emumerations": [ ], "associations": [ ]
use for?
and what is this
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.
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.
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
}
});
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 ?
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.
custom elements are not getting added to the XML
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.
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.
i want to create BPMN diagram with custom property using Vue.js application.
is it possible?
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
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)
I used file-loader,but got an error like this "could not parse document".
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.