Click event on modeler


I want to make click event on modeler as soon as diagram is loaded in the canvas.
How we can make custom click event on a process.


One thing you can do is to add a Click Listener to the .djs-container element, which is the underlying container for full diagram.

If you want to listen for a click event for specific element, the eventBus is a good thing to use.

var eventBus = modeler.get("eventBus");

eventBus.on("", function(event) {
    alert( + " was clicked");

Small example on this:

Hint: with

var canvas = modeler.get('canvas');


you can also check whether the clicked element was the root element (the process) to only do stuff for this element.

1 Like

Mind explaining what you’re trying to achieve?


I want to bypass the process click event made on modeler.

Can you explain what behavior you’re trying to achieve in high level terms?


On click event on an element of a diagram we do not want to open the property pane and we want to call the event to get the detail of the element with that click event. Currently behavior is on the click event on an element, it opens the property pane and only after the property pane is opened the click get the detail of the clicked element. We do not want to open the property tabs to get the detail of an element.

Do you want to use the properties panel at all?

Yes, we want to open the property panel when we click on an element

So you want the properties panel to be closed by default and open when you click an element? What happens when I deleselect the element?

We are not going to deselect anything. We are just going to select another element or select the canvas.
When we select another element we want to get property for that element and for the canvas we want to get the property for the process.

But that’s the default behavior of the properties panel. What exactly do you want to change?