Add customized React component to an BPMN element

Users
1

Hi
since I am new in BPMN and my official task is combining react components with BPMN elements, I would be appreciate, if any one help me in this scenario:
actually, I have created some certain react components to get some data and make a result. how it would be possible to add this components to script task by right click, getting data from my component and finally put these data into the script property?

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

Hi barmac
Thanks for your response
actually, I have implemented lots of examples that have been mentioned in “bpmn-js-examples”. so I was confused which one could handle my issue. Therefor, all implementation were removed and nothing to present. But all I need:

  1. A certain way to connect a ScriptTask to my implemented react component that is responsible for getting data in Persian and convert it into standard JS Code as script field of Script Task.
  2. A certain way to connect a ManualTask to my implemented react component that is responsible for showing different probable bpmn path in order to be selected by user and show this path in another bpmn screen to be modified by desire.

The first component:
JsCodeGen

The second component:
Eval

4

I am still not sure what you are trying to achieve. Can you please elaborate on what “certain way to connect” means for your project? Please tell more what should happen in the project, how bpmn-js is used in it, and perhaps then I can help you.

5

Sorry for confusing
All is needed, my custom components should be opend by right click on script task, getting some value as script, set them as script value of the script task and consider this value in the finall xml.

6

What have you achieved so far? You can use the React example to present your work.

7

According to your suggestion, react-bpmn is used in my project. But an error is appeared when the project is loaded:
unparsable content detected; this may indicate an invalid BPMN 2.0 diagram file
line: 22
column: 2
nested error: closing tag mismatch

8

Check if your BPMN file is a correct one.

1 Like
9

Hi again
I think nyan project is close to what I want.
Now just I want show (my react component or any html code), when the red-icon in context-pad is clicked to get script value.
what is your suggestion?