Error on use bmpn-js With Primefaces

Developers General
1

Please guys,

I’m getting this error:

VM5197:73 could not import BPMN 2.0 diagram Error: invalid element specified
    at Overlays.add (<anonymous>:20845:12)
    at openDiagram (<anonymous>:61:22)
    at <anonymous>:81:9
    at p (<anonymous>:2:523)
    at Ja (<anonymous>:3:15829)
    at r.fn.init.append (<anonymous>:3:17100)
    at r.fn.init.<anonymous> (<anonymous>:3:18204)
    at T (<anonymous>:3:398)
    at r.fn.init.html (<anonymous>:3:17882)
    at Object.updateBody (core.js.xhtml?ln=primefaces&v=6.2:3)

When I try to put the modeler in my app.
Can anyone help me ?

The error in this part of code:

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

Thanks

2

Hi @Rodrigo_Borges and welcome to this forum!

When running

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

=> this will try to add an overlay to the SCAN_OK element. In the diagram that you are rendering, is there actually an element with an ID SCAN_OK?

Regards
Max

3

Hi Max,

In fact there is not an element named ‘SCAN_OK’.
It just have the div tag with “CANVAS” id, I think that all the content inside it would be created by the bpmn-js functions, but for some reason the element ‘SCAN_OK’ is not created.

Here is the full code:

<div id="canvas"></div>
			
		<script type="text/javascript">
			//<![CDATA[

				var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
				

		      // modeler instance
		      var bpmnModeler = new BpmnJS({
		        container: '#canvas',
		        keyboard: {
		          bindTo: window
		        }
		      });
		
		      /**
		       * Save diagram contents and print them to the console.
		       */
		      async function exportDiagram() {
		
		        try {
		
		          var result = await bpmnModeler.saveXML({ format: true });
		
		          alert('Diagram exported. Check the developer tools!');
		
		          console.log('DIAGRAM', result.xml);
		        } catch (err) {
		
		          console.error('could not save BPMN 2.0 diagram', err);
		        }
		      }
		
		      /**
		       * Open diagram in our modeler instance.
		       *
		       * @param {String} bpmnXML diagram to display
		       */
		      function openDiagram(bpmnXML) {
		
		        // import diagram
		        try {
		
		          console.log('XML',bpmnXML);
		          bpmnModeler.importXML(bpmnXML);
		          console.log('Importado!');
		
		          // access modeler components
		          var canvas = bpmnModeler.get('canvas');
		          var overlays = bpmnModeler.get('overlays');
		
		
		          // zoom to fit full viewport
		          canvas.zoom('fit-viewport');
		          
					
		          // attach an overlay to a node
		          overlays.add('SCAN_OK', 'note', {
		            position: {
		              bottom: 0,
		              right: 0
		            },
		            html: '<div class="diagram-note">Mixed up the labels?</div>'
		          });
		
		          // add marker
		          canvas.addMarker('SCAN_OK', 'needs-discussion');
		        } catch (err) {
		
		          console.error('could not import BPMN 2.0 diagram', err);
		        }
		      }
		
		
		      // load external diagram file via AJAX and open it
		      openDiagram(diagramUrl);
		
		      // wire save button
		      $('#save-button').click(exportDiagram);
			
			//]]>
		</script>

Thanks for the help!

4

There are some issue in the code:

  1. You need to fetch the XML from the diagram url first. (see an example here)
  2. bpmnModeler.importXML(...) returns a Promise and should be handled accordingly (ie. use await or .then
  3. As stated before, there is no element with ID=SCAN_OK, so the framework cannot add an overlay.

I fixed these issues briefly, please see here: https://codesandbox.io/s/rodrigo-example-20qcb

Regards
Max

5

Thanks for your help,

I was making like that, but the the process just didnt show, and no error or alert in the console.

E change the code again and now its getting this error:

could not import BPMN 2.0 diagram Error: unparsable content https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn detected
	line: 0
	column: 0
	nested error: missing start tag
    at error$1 (bpmn-modeler.development.js.xhtml?ln=assets:7976)
    at handleError (bpmn-modeler.development.js.xhtml?ln=assets:8618)
    at handleError (bpmn-modeler.development.js.xhtml?ln=assets:7028)
    at parse (bpmn-modeler.development.js.xhtml?ln=assets:7604)
    at Parser.parse (bpmn-modeler.development.js.xhtml?ln=assets:7133)
    at bpmn-modeler.development.js.xhtml?ln=assets:8786
    at new Promise (<anonymous>)
    at Reader.fromXML (bpmn-modeler.development.js.xhtml?ln=assets:8781)
    at BpmnModdle.fromXML (bpmn-modeler.development.js.xhtml?ln=assets:9722)
    at bpmn-modeler.development.js.xhtml?ln=assets:14142

Appears that its not reading the content of the bpmn diagram. How can it happens ?
The diagram is ok and accessible.
The project jquery version is v3.2.1, can it be the problem ?

Thanks

6

Hi,

you need to pass the actual BPMN XML as string to the import function. It appears that you are just passing it the link to it.
You need to first read the actual BPMN XML from that url. See this example: https://github.com/bpmn-io/bpmn-js-examples/blob/master/url-viewer/index.html or this snippet (without any error handling whatsoever, just to show the idea):

const response = await fetch('https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn');
const diagramXML = await response.text();
console.log(diagramXML);

=> https://codesandbox.io/s/rodrigo-example-forked-66yg6?file=/src/index.js:992-1036

Best,
Max

1 Like
7

Thanks,

It Works like a charm!