How to Change BPMN Task Type Without Replacing the Element in bpmn-js?

Developers
1

Hello, I want to change the type of a task (e.g from bpmn:Task to bpmn:ScriptTask) without replacing the element.

I know that bpmnReplace.replaceElement can be used to change the type, but it replaces the element, which is not what I want. Instead, I just want to update the existing element’s type while keeping everything else intact. I guess this will help me update the task icon when I select its type from my custom menu.

Is there a way to update the existing element so that the correct icon appears?

2

Hi,
What is your use case? Why is replacement something that you want to avoid?

3

Hi,
I want to avoid replacing the task element because this causes me to lose all the properties and custom configurations that I have set in my custom menu, such as the task’s delay, sub processes, and other specific details.

However, my main goal is not just to change the task type but to make the correct icon appear inside the task box when I select its type from the custom menu I created (I removed the default BPMN.js type menu and built my own). The only solution I’ve found so far to make the icon appear is by changing the task type, but I’m wondering if there’s another way to achieve this without replacing the elemen or changing its type .

If there’s a better approach to updating the icon while keeping the element intact, I’d love to hear it

4

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:

5

When i try to change the step type in my BPMN model using a dropdown menu, as shown in the image (Configuration du step). When I select a type, my onStepTypeChange() method is triggered :

onStepTypeChange() {
        // @ts-ignore 
        const bpmnReplace = this.bpmnJS.get('bpmnReplace');
        switch (this.selectedStep.StepType) {
            case 'A':
                // @ts-ignore
                bpmnReplace.replaceElement(this.selectedElement, {
                    type: 'bpmn:ScriptTask'
            });
           .
           .
           .

However, after changing the type, my custom menu (shown in the image) disappears. Normally, when I click on the screw wrench icon (as shown in the image), my custom menu appears. But after replacing the element, it no longer shows up and the default one appears. Additionally, the configured information for the step is lost. That’s why I don’t want to replace the element.
1

2
22338×1062 69.3 KB

3

6

How do you define the additional data? How is the custom menu implemented?
Without the code (e.g. on a codesandbox as I suggested), I cannot help you.

7

By the way, at Camunda we have implemented custom extensions (e.g. zeebe-bpmn-moddle) and these properties are not lost after replacement.