bpmn-js/lib/Modeler

BPMN & Modeling Discussion & Questions
1

Hello,

I am using camunda modeller at my react page with this versions.
“bpmn-js”: “^3.4.3”,
“bpmn-js-properties-panel”: “^0.31.0”,
“camunda-bpmn-moddle”: “^3.2.0”,
“camunda-dmn-moddle”: “^1.0.0”,

My question is when I click a task, properties panel changing for that event.
If I want to click task how can I catch that onlick event in my react page? There is any override method for the onclick event for catch it in where I use modeller at my page?

Actually I want to open a react dialog when I click on task event for this reason I have to catch onclick event when click on task at in my where I add this modeller.

Thank you!

image
image2027×972 59.1 KB

2

Hi,

There are actually two ways to do this.

The easiest one that I’d recommend you is to simply set up a listener on the Modeler instance, i.e.

var modeler = new Modeler({ ... });

modeler.on('element.click', function(event) {
  // do stuff
});

Alternatively, you could create a custom module in which you set eventBus listener for element.click events. So the module would look like this:

export default function ClickHandler(eventBus) {
  eventBus.on('element.click', function(event) {
    // do stuff
  });
}

ClickHandler.$inject = [ 'eventBus' ];

For modules usage you can use one of the examples: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-modeling-rules

Best,

Maciej

2 Likes
3

Thank you so much.

4