so I’m new with bpmn-js and I got the task to add one new task icon to the left panel
I have read the guide at BPMN but I am constrained by the language and confused about starting it,
maybe here I can get enlightenment from adding the element reacted, like what things are done first and what is the next step
thank you…
Wether or not you’re using React should be irrelevant. As for adding an icon to the palette there’s an example: https://github.com/bpmn-io/bpmn-js-example-custom-controls
Hope that helps.
Thank you for the help,
sorry, bothering again… can we edit with the icons that we have ourselves?
Of course you can do that. As you can see you can choose a CSS class name for your custom palette entry. Using this class name you can display whatever icon you like.
sorry just being able to reply now,
it doesn’t seem to be the answer I want, which I want to add to the tool in this panel 
.
and how do you use react in sequence? I was still confused in that section, I didn’t know which part had to be changed at the beginning
thanks for in advance
Can you please elaborate on what you’re trying to do? I don’t understand your question and how it’s related to React.js.
First, I am confused about the BPMN section, in the example there is a moddle, modeler, panel. I still don’t understand, maybe it’s because I don’t understand English and use google translate
second, I’m also confused, how do I edit in sequence at bpmn? like, edit this section first then here and so on …
third, I use react and want to add bpmn to my project by adding actions to the left panel like this
I use Naruto as an example, in my case I want to add the form logo there, and in the right panel I want to add a dropdown action, like that
Sorry, I still don’t understand what’s the actual question and how any of this is related to React.js. Please elaborate on what you mean by BPMN section and edit in sequence.
so I want to make BPMN-JS on react like this.
forget about sections and sequences if it’s confusing, so back to the question:
I want to add one tool in the left panel in the form of bpmn on react-js
On the right side of the panel, I want to add a property panel in the form of a dropdown option to determine which database to use … because I see in the example bpmn it can be done. edit panel properties as we need
is this clear?
now, because I am new to programming and react-js, I don’t know where to start, and reading the instructions from bpmn makes me even more dizzy, so I asked in this forum. how to do it all by being applied on react-js. What to do? thanks in advance
Please forget about React.js for a second. Whatever framework or library you use is neglectable.
As I already said, there’ s an example for custom controls that covers your first requirement: https://github.com/bpmn-io/bpmn-js-example-custom-controls
As for the properties panel and extending it there a examples, too:
If you’re struggling with integrating the toolkit into a React application in general have a look at this example: https://github.com/bpmn-io/react-bpmn
It seems like this gives me a insight, but I’m still curious how if I want to add my own CSS or use images for the icons I want to use, on the palette or contextpad?
has the className been provided from bpmn-js itself? or we can make it according to what we need? if possible, how?
You are free to customize the palette and context pad to whatever degree is necessary. If using CSS selectors is not sufficient change the implementation and use your custom palette and context pad.
ok bang… suwun
thanks sir… i will try it
Would you mind pointing out what exact links are not working for you?
Thank you, I fixed the links.