contextMenu via ContextPad

Developers Modeler
1

Hello,
currently the following code is executed by right-mouse-click.

bpmnModeler.on('element.contextmenu', (event) => {
      event.originalEvent.preventDefault();
      event.originalEvent.stopPropagation();

      ({ element } = event);
    
      // ignore root element
      if (!element.parent) {
        return;
      }
      const businessObject = getBusinessObject(element);
      const { bpmnType } = businessObject;
      const { BusinessContext } = businessObject;
      const { TaskName } = businessObject;
      const { BusinessContext_Id } = businessObject;
      const { TaskId } = businessObject;
      if(bpmnType == "bpmn:SemanticTask") {
        if(BusinessContext !== undefined) {
          bc.text = BusinessContext;
          bc.value = BusinessContext_Id;
          ti.text = TaskName;
          ti.value = TaskId;
        }
        ST.classList.remove('hidden'); 
      }
    });
    
    formST.addEventListener('submit', (event) => {
      event.preventDefault();
      event.stopPropagation();

      modeling.updateProperties(element, {
        BusinessContext_Id: bc.value,
        BusinessContext: bc.options[bc.selectedIndex].text,
        TaskName: ti.options[ti.selectedIndex].text,
        TaskId: ti.value
      });

      ST.classList.add('hidden');
    });

Is it possible to run this code via the ContextPad? If possible, how can I do that?

2

Did you already see our custom controls example? It should be possible to create an action with your custom functionality. With what are you struggling with?

3

yes, but with the updateProperties function, I get an error message, that “element” is required.

the element should be the task from which I open the context menu. How could I assign it?

4

For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.

5

Here is the link for the sandbox: https://ocy2u.csb.app/

The corresponding Code is under custom/CustomContextPad.js

The problem is now, when add e.g. 2 SemanticTasks (that Item on the Palette with S),
the first TaskName I assign is displayed correctly, but when I assign the TaskName
to the other element all 2 SemanticTasks get the TaskName of the latter one.
So, the first TaskName will be overwritten, such that all SemanticTasks display the
same TaskName. (See the picture: the SemanticTasks should have different TaskNames, but both have the same)

image

Thanks very much in advance!

6

Thanks for sharing your code in the sandbox! It helped a lot to understand your problem.

It seems like once you submit the form inside the context pad action, it got executed for all elements you already executed the action once. You can verify this by setting a console.log inside the submit handler.

This is definitely related to the fact you register the handler on every single click event

action: {
  click: function (event) {
    /* ... */

    formST.addEventListener("submit", (event) => {
      event.preventDefault();
      event.stopPropagation();

      modeling.updateProperties(element, { /* ... */ });
    });
  }
}

Adding the listener any time does not make sense. It will execute on every form submit for every element, which leads to the behavior you described.

7

So the listener has to be outside from the Action Event?

8

I corrected the code a little bit: https://ocy2u.csb.app/

It actually works, but there appear a lot of warnings when assigning the TaskNames
for SemanticTasks, such that performance is very low, when adding more
SemanticTasks and assigning their TaskNames. Could you inspect why the warnings
occur at all and how I could avoid them?

9

there is one more thing, which I just noticed. When you click on a semantic task and click on the screw-wrench symbol and choose a User Task, for instance then nothing happens. Is there an easy way to fix this?

10

Let’s discuss it in the new thread that you created.