Customizing the bpmn io pallete

Developers Modeler
1

Hello,

I am newbie in bpmnio. My requirement is to add custom elements in the pallete and for each element there should be properties tab which allows the user to enter some input data.
How to achieve it ? how to start ? Please let me know

2

This is quite a list of requirements. Are you familiar with JavaScript?

I suggest you to have a look at our examples to get a basic overview over the library. bpmn-js-nyan may be especially interesting for you (shows how to add custom elements to the palette). A properties panel example exists, too.

3

Thanks for the reply.
One more question. I am newbie in Node.js as well.
So, Should i learn first Node.js and then about customizing the bpmn.io
How much impact happens if i straight away start learning customizing the bpmn.io ?

4

You do not need to know NodeJS to customize our libraries.

Our libraries are built in a particular style, using the CommonJS / NodeJS module system. That is as much as you need to know about NodeJS to get started. Everything else is pure JavaScript.

I suggest you to start with a simple example and see how far you get with our technology stack.

If you’d like to perform heavy customizations you have to dive deeper eventually :wink:.

5

Hello,

Yes according to our requirement. We have lot of customization in the future.
So, May i know what are all the technologies should i familiar with.
Is JavaScript is more than enough ? NodeJs in depth knowledge is required ?

6

Also,
Sorry for asking very basic questions.
Examples which you have provided, how to run it after downloading ?
Is there any video tutorials for it ? Please let me know

7

In order to perform larger customizations to our libraries you should

  • be familiar with JavaScript to understand the examples and internal structure of our libraries
  • be familiar with the NodeJS eco-system including npm, the NodeJS package manager and Browserify, a NodeJS modules bundler

NodeJS is just JavaScript with some library components built on top. You do not need knowledge about these APIs. You need to have a recent version of NodeJS installed on your machine to be able to use npm for dependency fetching and usage though.

8
  • Install NodeJS
  • Follow the instructions in the Building the Project section for each example
9

I can frame my question like this.

I executed the command
npm install bpmn-js

It executed successfully.
I want to bring the web modeller something like this
http://demo.bpmn.io/

How to run the web modeller locally. Please provide me the steps

10

Yay!!!. It worked !!!
Thanks

11

You could also read following article Discover Top JavaScript Libraries to Keep an Eye on in 2017 and find useful info

12

Thanks Julia
A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. This article explains the basics and rudimentary differences between the most popular JavaScript libraries. Whether they become “best” for you is another question. But still all of them worth trying!