Adding a button for open to Popup Menu

Developers
1

I want to add a button in the context pad and open a popup menu when this button is clicked. However, I couldn’t make it.

2

Hi @codnomer, welcome to the forum!

Did you check out how the bpmn-js context pad provider is opening the replace menu? That could be exactly what you need.

assign(actions, {
  replace: {
    group: "edit",
    className: "bpmn-icon-screw-wrench",
    title: translate("Change type"),
    action: {
      click: function (event, element) {
        var position = assign(getReplaceMenuPosition(element), {
          cursor: { x: event.x, y: event.y },
        });

        popupMenu.open(element, "bpmn-replace", position);
      },
    },
  },
});
3

Thank you for your answer. I tried something similar to this but I get an “assign not define” error. I tried the one with the popupMenu provider and it says “popupMenu not defined”.
My import part :

 loadjscssfile("https://unpkg.com/bpmn-js/dist/assets/bpmn-js.css", "css");
    loadjscssfile("https://unpkg.com/bpmn-js/dist/assets/diagram-js.css", "css");
    loadjscssfile("https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn.css", "css");
    loadjscssfile("https://unpkg.com/bpmn-js/dist/bpmn-modeler.development.js", "js");

my code :

bpmnModeler = new BpmnJS({
            container: "#global_popup_div",
            keyboard: {
                bindTo: window,
            },
        });
        
        async function openDiagram(bpmnXML) {
            // import diagram
            try {
                await bpmnModeler.importXML(bpmnXML);
                // access modeler components
                var canvas = bpmnModeler.get("canvas");
                var overlays = bpmnModeler.get("overlays");

                overlays.add("Activity_1ewhb7a", "note", {
                    position: {
                        bottom: 0,
                        right: 0,
                    },
                    html: '<div class="diagram-note">Mixed up the labels?</div>',
                });
                canvas.addMarker("Activity_1ewhb7a", "needs-discussion");

               
                assign(actions, {
                    replace: {
                        group: "edit",
                        className: "bpmn-icon-screw-wrench",
                        title: translate("Change type"),
                        action: {
                            click: function (event, element) {
                                var position = assign(getReplaceMenuPosition(element), {
                                    cursor: { x: event.x, y: event.y },
                                });

                                popupMenu.open(element, "bpmn-replace", position);
                            },
                        },
                    },
                });

                // zoom to fit full viewport
                canvas.zoom("fit-viewport");
            } catch (err) {
                console.error("could not import BPMN 2.0 diagram", err);
            }
        }

Error :
error

4

assign is not defined: did you import it?

import { assign } from 'min-dash';
5

Yes i added it, i don’t get error but it doesn’t work. The page is not coming.

6

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

7

Here is , I’m sorry I’m bothering you.

8

Thanks for sharing. Your Sandbox looks a bit chaotic as it seems to include a lot of unrelated stuff. I’d suggest you to start with a clean copy of the basic bpmn-js Sandbox and then clarify what you want to achieve, step by step:

  • Add a custom popup menu module, find some explanations in this forum thread
  • Add a custom context pad provider module, find an example of how to do that in this example
  • Add an action to your context pad provider to open the defined pop-up menu, cf. to the bpmn-replace example of how to do that

It’s important to understand how the module architecture of bpmn-js works to gather the connection between the context pad and the popup menu. I can recommend the walkthrough to get more information on that.

9

No worries, we are here to help :slightly_smiling_face:

10

Honestly, I’m trying but I can’t. Can you design an example similar to the photo above in the link you sent me as an example?

Link : Creating a new popup menu - #2 by oguzeroglu