Regarding customize popup in react using contextPad

Developers Modeler
1

I am using contextPad to customize the bpmn js popup in react `import React, { useRef, useEffect, useState } from ‘react’;
import BpmnModeler from ‘bpmn-js/lib/Modeler’;
import ‘bpmn-js/dist/assets/bpmn-font/css/bpmn.css’;
import ‘bpmn-js/dist/assets/diagram-js.css’;

const BpmnEditor = () => {
const [bpmnXml, setBpmnXml] = useState(null);
const containerRef = useRef(null);
const modelerRef = useRef(null);

const createDiagram = async () => {
    try {
        const newDiagram = await modelerRef.current.createDiagram();
        if (newDiagram) {
            console.log('BPMN diagram created successfully!');
        } else {
            console.error('Error creating BPMN diagram.');
        }
    } catch (err) {
        console.error('Error creating BPMN diagram:', err);
    }
};

const openDiagram = (xml) => {
    modelerRef.current.importXML(xml, (err, warnings) => {
        if (err) {
            console.error('Error rendering BPMN diagram:', err);
        } else {
            console.log('BPMN diagram rendered successfully!');
            if (warnings && warnings.length) {
                console.warn('Warnings:', warnings);
            }
        }
    });
};

const registerCustomMenu = () => {
    const contextPad = modelerRef.current.get('contextPad');

    contextPad.registerProvider('bpmn.Task', {
        getEntries: function (element) {
            const entries = [];

            entries.push({
                id: 'partCreation',
                label: 'Part Creation',
                action: function (event, element) {
                    console.log('Part Creation triggered');
                },
                priority: 1
            });
            entries.push({
                id: 'documentCreation',
                label: 'Document Creation',
                action: function (event, element) {
                    console.log('Document Creation triggered');
                },
                priority: 2
            });

            return entries;
        },
    });
};

useEffect(() => {
    modelerRef.current = new BpmnModeler({
        container: containerRef.current,
    });

    if (bpmnXml) {
        openDiagram(bpmnXml);
    } else {
        createDiagram();
    }

    registerCustomMenu();

    return () => {
        modelerRef.current.destroy();
    };
}, [bpmnXml]);

return (
    <div>
        <div ref={containerRef} style={{ height: '800px' }} />
    </div>
);

};

export default BpmnEditor;`
this is my code but it gives Uncaught Error: priority must be a number

on EventBus.js:135

registerProvider ContextPad.js:135

registerCustomMenu CustomTypeBPMNEditor.js:1705

BpmnEditor CustomTypeBPMNEditor.js:1742

React 8

workLoop scheduler.development.js:266

flushWork scheduler.development.js:239

performWorkUntilDeadline scheduler.development.js:533

js scheduler.development.js:571

js scheduler.development.js:633

factory react refresh:6

Webpack 24

EventBus.js:135

on EventBus.js:135

registerProvider ContextPad.js:135

registerCustomMenu CustomTypeBPMNEditor.js:1705

BpmnEditor CustomTypeBPMNEditor.js:1742

React 8

workLoop scheduler.development.js:266

flushWork scheduler.development.js:239

performWorkUntilDeadline scheduler.development.js:533

(Async: EventHandlerNonNull)
js scheduler.development.js:571

js scheduler.development.js:633

factory react refresh:6

Webpack 24

Uncaught Error: priority must be a number

on EventBus.js:135

registerProvider ContextPad.js:135

registerCustomMenu CustomTypeBPMNEditor.js:1705

BpmnEditor CustomTypeBPMNEditor.js:1742

React 7

workLoop scheduler.development.js:266

flushWork scheduler.development.js:239

performWorkUntilDeadline scheduler.development.js:533

js scheduler.development.js:571

js scheduler.development.js:633

factory react refresh:6

Webpack 24
this error as you see include priority number inside the code. can anybody please help me with this

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not. Currently, I don’t see the context pad code in what you shared.

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:

3

okay !! sorry for messy question. this is code bpmnCode

priority must be a number error

4

ContextPad#registerProvider does not accept a string argument, cf. https://github.com/bpmn-io/diagram-js/blob/develop/lib/features/context-pad/ContextPad.js#L159

Try out this fix:

-   contextPad.registerProvider("bpmn.Task", {
+   contextPad.registerProvider({
      getEntries: function (element) {
5

Screenshot from 2023-07-11 14-13-46
well that error is gone but my main task is to customize this above popup. it didn’t achieve by my given code. what should i do ?

6

See my answer in your other topic: Customise the popup in reactJs