Using DOMElement in Overlay on React (Failed to execute 'appendChild' on 'Node')

Developers
1

First: sorry for my english, i’m not a native speaker. Second: sorry if this question is dumb, i’m kind of noob… Third: This is my first post here :grin:

What im trying to do is use a DOMElement on the HTML tag of the Overlay (I don’t know if this have some difference but i’m using React JS for this app):

const overlayObject = {
html: (< div >Test< / div >),
position: {left: 0, bottom: 0}
}

Here i’m trying to call the .add function:

elementRegistry.filter(function(element) {
if (!elementList.includes(element.id) && element.type === “bpmn:Task”){
elementList.push(element.id);
overlays.add(element.id, overlayObject);
}
});

But i’m just getting this error:

Overlays.js:381 Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.
at Overlays.push…/node_modules/diagram-js/lib/features/overlays/Overlays.js.Overlays._addOverlay (Overlays.js:381)
at Overlays.push…/node_modules/diagram-js/lib/features/overlays/Overlays.js.Overlays.add (Overlays.js:214)
at bpmn.modeler.component.jsx:189
at ElementRegistry.js:128
at ElementRegistry.js:159
at Array.forEach ()
at ElementRegistry.push…/node_modules/diagram-js/lib/core/ElementRegistry.js.ElementRegistry.forEach (ElementRegistry.js:155)
at ElementRegistry.push…/node_modules/diagram-js/lib/core/ElementRegistry.js.ElementRegistry.filter (ElementRegistry.js:127)
at BpmnModelerComponent._this.setOverlays (bpmn.modeler.component.jsx:186)
at bpmn.modeler.component.jsx:115
at Viewer.js:192
at importBpmnDiagram (Importer.js:69)
at Modeler.push…/node_modules/bpmn-js/lib/Viewer.js.Viewer.open (Viewer.js:282)
at Modeler.push…/node_modules/bpmn-js/lib/Viewer.js.Viewer.importDefinitions (Viewer.js:228)
at Viewer.js:184
at read.js:774

I tried to use React.createElement too but without success.

I hope that someone can help me with this. Thanks

2

Hi @gpigatto, welcome to the forum!

First, forget about any JS Frontends specific details when using bpmn-js, it is completely independent of it. The best way to use Overlays module is to give the html via a string, so

const overlayObject = {
     html: '<div>Test</div>',
     position: { left: 0, bottom: 0 }
}

What you tried to do is to use a React DOMElement, which is not supported. Don’t mix this up with HTML Nodes. These elements would also be supported.

3

Thanks for the reply.
I have a question, how can i call a react function using this method?

4

What do you mean by a ‘react function’? Can you explain a little bit more about what do you want to achieve?

Generally, you can use the overlays module everywhere you would like to, no matter what framework you use.

overlays.add(element.id, {
   html: '<div>Test</div>',
   position: { left: 0, bottom: 0 }
});
5

what i’m trying to do is call a function… Example:

< div OnClick={this.example()} > Teste < / div >

and this.example() is inside my Component.jsx, using the html as string i can do that?

6

Please learn more about how React works. You can’t just add a React component as an overlay. That’s simply doesn’t work since it’s not going to be part of a React application.

What you are trying to do is React App → bpmn-js → React Component which doesn’t work. Use plain DOM elements for overlays and you’ll be fine.

7

You are right, i was reading about this these days and i found out a way to make it work:

I set the html tag with a id using string:

overlays.add(element.id, {
html: ‘< div id = " Example " >Example< / div >’,
position: { left: 0, bottom: 0 }
});

Get this DOM after created:

var x = document.getElementById(“Example”);

Set the onClick function by eventListener:

x.addEventListener(‘click’, function(){
alert(‘test’);
}, false);

With this problem i find out that React DOM != HTML DOM

Thanks everyone for the support.

One more question, should i put ‘Solved’ in the title?

1 Like