Opening customized pad while clicking on element

Developers Modeler
1

Hi, I’m trying to create a customized pad that opens when I click on element, and I want to know what I should study to be able to do this.
image

for now when I click on element that pad pops out, but I want to make a customized pad looking something like this
image

whatever in the pop up box is not yet decided, so its not important

I just want to know if its possible to open a window? pop up? pad? kind of thing when i click on bpmn element instead of the basic pad in pic 1

It will be so helpful to me if you could hint me about customized popup(or window… I don’t even know how to call this) Thank you !!

2

Hi @ijoo3419, welcome!

You could listen to element.click events via event bus, and then go crazy. For example with opening an alert

const eventBus = modeler.get("eventBus");
eventBus.on("element.click", function (event) {
  const { element } = event;

  alert("You have clicked the element with id " + element.id);
});

Source: element.click - CodeSandbox

Note that any popup, modals, … is not part of this library. You will have to create it on your own.

1 Like
3

Hello, thank you for the example code it helped me a lot. I was looking at your help and I have an additional question, it’s that with the current code, i get the alert whenever I click on any part of the canvas. But I want my alert to appear only when I click on the elements (meaning the ones that are already drawn) and I have been trying to modify and customize the example code to make it happen as how i want it to be but I cant :frowning: can you help me with it?

4

If you want to ignore root elements (like the canvas itself) you can simply check whether the element has a parent

// ignore root element
if (element.parent) {
  alert("You have clicked the element with id " + element.id);
}
1 Like