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.
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);
},
},
},
});
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 :
assign
is not defined: did you import it?
import { assign } from 'min-dash';
Yes i added it, i don’t get error but it doesn’t work. The page is not coming.
For further assistance, please share a CodeSandbox that reproduces your issue in a way that we can inspect it.
Here is , I’m sorry I’m bothering you.
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.
No worries, we are here to help
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?