Integrate BpmnIO with Custom Web Application

Developers
1

Hello,

I know bpmn-js is used for bpmn modeller. I need to integrate this web modeller with my custom web application.
How to do it ? What are all the files i need to include to my web application (js,html, etc…)

Please provide me the steps to integrate. Sorry if it is very basic question.

Answer

There exist numerous options how to integrate bpmn-js into a custom web-application. The most simple one is by integrating it prepackaged.

You may checkout our starter example, too.

2

Hey @chandanmb,

please take a look at our examples first, where some use cases are already covered: https://github.com/bpmn-io/bpmn-js-examples. There are examples how to use bpmn-js in a CommonJS application or as bower dependency.

3

Hello,

I checked the basic examples. i ran these examples as is using node.js. Examples are running fine.
I have a dynamic web project. i need to add these files and i need to bring up the web page same as demo bpmnio is providing. I am stuck with how to start of with to integrate with my web app. Please recommend the examples/steps

4

Also the example what they have Simple Bower is just opening the bpmn file located in the resources folder.

I am looking for a window BPMN Demo to be opened in my custom application.
Is there any some sample project ?

5

Hi chandanmb,

I have taken Property-Panel example from bpmn-js-examples and implemented as a sample web application using Node.js.I am unable to attach war file here .Please provide your mail id so that i will send sample project to your mail.

Thanks
-Prameela

6

Thanks prameela.
Here is my email id : chandanmb7@gmail.com

7

Hi, I’m having the same problem integrating bpmn-js with bower into my webapp. I would appreciate if you send me a copy of the .war as well.

Here is my email gcalvo@isyc.com

8

Thanks Prameela.

Amazing work and appreciated!!! You have reduced half my work.
Question from my side when i was going through your code

  1. minifiedfile.js is the only file required. (In future if i need to add some tab in properties panel i need to modfify only in this file. Am i right ?

  2. What is the use of bundle.js (dependency to minifiedfile.js)

  3. Suppose i need to introduce some custom elements where i should add ?

  4. How to make property panel to come at the bottom as Alfresco Activiti

Once again thanks for your support :slight_smile:

Regards,
Chandan

9

Hi Chandan,

As per my understanding for your first question

You can’t change or you can’t include your custom code in already existing minifiled.js(bundle.js) file to develop the functionality.You need to include one more JS file and extend the minified.js properties and functionalities in new JS file.

for second question minifiedfile.js file is nothing but bundle.js in my application,whatever the code i have shared with you.

For fourth question, If you want property panel at the bottom then you need to change in CSS.

If i am wrong with this answers anybody please suggest me.

Thanks
-Prameela

10

In which file i can add contents of properties panel ?
Is it handled through Javascript (minifiedfile.js)

11

Thanks a lot for your code Prameela, it helped me to understand some concepts.

I just managed to integrate a bpmn viewer into my webapp using this project http://www.wi-bw.tfh-wildau.de/~drmue/bpmn-io/ (I think I found the link somewhere else in the forum).

Maybe is helpful to you too chandanmb, or to someone else with this problem.

12

Hello Prameela,

One more question

  1. Can we remove the logo ? I heard bpmn-io-nyan project Nyan JS
    Logo can be removed ? Am i correct ?

  2. If yes, have you used the library of Nyan JS Project so that i can remove the logo.

Regards,
Chandan

13

Hi Chandanm

As per my my understanding we can’t remove bpmn.io logo because it is pre-defined given by bpmn.io.

Thanks
-Prameela

14

Hi,

our logo must not be removed or changed in bpmn-js. Please see our license: https://github.com/bpmn-io/bpmn-js/blob/master/LICENSE. We also have a little FAQ regarding this topic: License questions

1 Like
15

Hello,

I am talking about this Nyan JS

I saw it is under MIT license. So, i thought i can remove the logo. Please confirm.

16

Hello,

You are NOT allowed to remove the logo. This would not comply with the bpmn-js license.

Only the code of the Nyan-Cat example itself is MIT.

bpmn-js as a dependency keeps its license.

Cheers
Robert

1 Like
17

Hi
I have same problem can you send me project please
tmweeratunga31@gmail.com

Thanks

18

Hello, I’m having the same problem with Nodejs into my webapp. I would appreciate if you send me a copy of the .war.

My email darw.ahmad@gmail.com

19

Hi,

Can you send me your project please?
xaory15@gmail.com

20

Hi,

Can you please send me your project? I am Struggling with node JS and it seems I need a bit of a guidance.
valizbant@gmail.com