DMNViewer: XML rendering does not work

Hi
unfortunately I’m not familiar with JavaScript that’s why I cannot solve the following problem:

I have a (Thymeleaf based) UI selecting data from a (SpringBoot based) client.
In one of the views I want to display decision tables.

So I created the following html file image.html.xml (1.7 KB)

The xml source is selected via Thymeleaf/Spring using Spring EL

var xml = /[[${imageXml}]]/

For example, during runtime I get the following XML String (selected from an Decison that was deployed on Camunda 7.7.0 workflow engine) data.txt.xml (7.5 KB)

So far so good. But when the xml is rendered I can see an error in the browser console

error rendering Error: No provider for “diagramCanvas”! (Resolving: rules → diagramCanvas)(…)

The data is displayed, but the table doesn’t look very nice

Can you please tell me, where I made the mistake?

Thanks and best regards
Roland

I cannot open image.html.xml, can you upload it again? Regarding the error you get there seems to be a problem with the injector missing some dependency.

Hi Philipp
sorry for the delay - I was on onside and than on vacation.
I updated the message and links above, please have a look
Thanks and best regards
Roland

I still can’t open either of the files.

This is weird… Let me put the code right here
This is image.html

> <!DOCTYPE html>
> <html lang="en">

> <head>
>   <div th:include="header :: header"> </div>
>   <script src="https://cdn.rawgit.com/bpmn-io/bower-bpmn-js/v0.20.0/dist/bpmn-navigated-viewer.js"></script>
>     <style>
>     html, body, #diagram {
>       height: 100%
>     }
>     .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
>       fill: green !important; /* color elements as green */
>     }
>     .highlight-overlay {
>       background-color: green; /* color elements as green */
>       opacity: 0.4;
>       pointer-events: none; /* no pointer events, allows clicking through onto the element */
>     }
>   </style>
> </head>

> <body>

>   <!-- Navbar: Using thymeleaf fragment -->
>   <div th:insert="f_navbar :: f_navbar"> </div>

> 	<div class="container">
> 	  <div class="jumbotron">
>    		<p th:text="${header}"/>
>    		<br th:text="${details}"/>
>   	</div>
>   </div>
>   
>   <div class="container">
>     <div class="container-fluid" style="border:1px solid #cecece;" id="bpmn-drop-zone">
>        <div id="diagramCanvas" style="height: 600px"></div>
>     </div>
>  </div>
>  
>  <script th:inline="javascript">
>    var BpmnNavigatedViewer = window.BpmnJS;
>    var viewer = new BpmnNavigatedViewer({ container: '#diagramCanvas' });
>    var container = $('#bpmn-drop-zone');
>    
>    var xml = /*[[${imageXml}]]*/; 
>   
>    viewer.importXML(xml, function(err) {
>   
>      if (err) {
>        console.log('error rendering', err);
>      } else {
>        console.log('rendered');
>        var canvas = viewer.get('diagramCanvas');
>        canvas.zoom('fit-viewport');
>        canvas.addMarker('Task_1', 'highlight');
>        container.removeClass('with-error').addClass('with-diagram');
>      }
>    }); 
>  </script>

> </body>
> </html>

Here is data.xml

   >     // require is part of bundle file
>    var DmnViewer = window.DmnJS;

>    var viewer = new DmnViewer({ container: '#diagramCanvas' });
>    
>    var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><definitions xmlns=\"http:\/\/www.omg.org\/spec\/DMN\/20151101\/dmn.xsd\" expressionLanguage=\"http:\/\/www.omg.org\/spec\/FEEL\/20140401\" id=\"definitions\" name=\"definitions\" namespace=\"http:\/\/camunda.org\/schema\/1.0\/dmn\" typeLanguage=\"http:\/\/www.omg.org\/spec\/FEEL\/20140401\">\n  <decision id=\"DTarif01\" name=\"Tarifberechnung01\">\n    <decisionTable hitPolicy=\"UNIQUE\" id=\"decisionTable\" preferredOrientation=\"Rule-as-Row\">\n      <input id=\"Sparte\">\n        <inputExpression id=\"InputExpression475748845\">\n          <text>Sparte<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Tarif\">\n        <inputExpression id=\"InputExpression481225739\">\n          <text>Tarif<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Jahresverbrauch\">\n        <inputExpression id=\"InputExpression1843991012\">\n          <text>Jahresverbrauch<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Laufzeit\">\n        <inputExpression id=\"InputExpression728732937\">\n          <text>Laufzeit<\/text>\n        <\/inputExpression>\n      <\/input>\n      <output id=\"Provision\" name=\"Provision\"\/>\n      <rule id=\"excelRow2\">\n        <inputEntry id=\"A2\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B2\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C2\">\n          <text>\u0026lt;8000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D2\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E2\">\n          <text>10<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow3\">\n        <inputEntry id=\"A3\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B3\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C3\">\n          <text>[8000..10000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D3\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E3\">\n          <text>11<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow4\">\n        <inputEntry id=\"A4\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B4\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C4\">\n          <text>[10001..15000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D4\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E4\">\n          <text>12<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow5\">\n        <inputEntry id=\"A5\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B5\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C5\">\n          <text>\u0026lt;8000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D5\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E5\">\n          <text>20<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow6\">\n        <inputEntry id=\"A6\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B6\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C6\">\n          <text>[8000..10000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D6\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E6\">\n          <text>21<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow7\">\n        <inputEntry id=\"A7\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B7\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C7\">\n          <text>[10001..15000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D7\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E7\">\n          <text>22<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow8\">\n        <inputEntry id=\"A8\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B8\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C8\">\n          <text>\u0026lt;10000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D8\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E8\">\n          <text>30<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow9\">\n        <inputEntry id=\"A9\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B9\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C9\">\n          <text>[10000..20000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D9\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E9\">\n          <text>31<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow10\">\n        <inputEntry id=\"A10\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B10\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C10\">\n          <text>[21000..25000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D10\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E10\">\n          <text>32<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow11\">\n        <inputEntry id=\"A11\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B11\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C11\">\n          <text>\u0026lt;10000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D11\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E11\">\n          <text>41<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow12\">\n        <inputEntry id=\"A12\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B12\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C12\">\n          <text>[10000..20000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D12\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E12\">\n          <text>42<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow13\">\n        <inputEntry id=\"A13\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B13\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C13\">\n          <text>[21000..25000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D13\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E13\">\n          <text>43<\/text>\n        <\/outputEntry>\n      <\/rule>\n    <\/decisionTable>\n  <\/decision>\n<\/definitions>\n"; // get the process xml via REST
>    
>    viewer.importXML(xml, function(err) {
>   
>      if (err) {
>        console.log('error rendering', err);
>      } else {
>        console.log('rendered');
>        var canvas = viewer.get('diagramCanvas');
>        canvas.zoom('fit-viewport');
>      }
>    });

This doesn’t work. viewer.get will try to get a dependency from the injector (bpmn-js uses dependency injection). diagramCanvas is not a dependency, it’s just the ID of your DOM element that you want to use the parent element.
Change your code to

var canvas = viewer.get('canvas');

Hi Philipp
I changed the code as you suggested to

> 	<div class="container">
> 	  <div class="jumbotron">
>    		<p>Prozess Übersicht (Decisionname:Tarifberechnung01 DecisionKey:DTarif01v2 )</p>
>    		<br></br>
>   	</div>
>   </div>
>   
>   <div class="container">
>     <div class="container-fluid" style="border:1px solid #cecece;" id="dmn-drop-zone">
>        <div id="diagramCanvas" style="height: 600px"></div>
>     </div>
>  </div>
>  
>  <script>
>    var DmnViewer = window.DmnJS;
>    var viewer = new DmnViewer({ container: '#diagramCanvas' });
>    var xml = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><definitions xmlns=\"http:\/\/www.omg.org\/spec\/DMN\/20151101\/dmn.xsd\" expressionLanguage=\"http:\/\/www.omg.org\/spec\/FEEL\/20140401\" id=\"definitions\" name=\"definitions\" namespace=\"http:\/\/camunda.org\/schema\/1.0\/dmn\" typeLanguage=\"http:\/\/www.omg.org\/spec\/FEEL\/20140401\">\n  <decision id=\"DTarif01v2\" name=\"Tarifberechnung01\">\n    <decisionTable hitPolicy=\"UNIQUE\" id=\"decisionTable\" preferredOrientation=\"Rule-as-Row\">\n      <input id=\"Sparte\">\n        <inputExpression id=\"InputExpression513073273\">\n          <text>Sparte<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Tarif\">\n        <inputExpression id=\"InputExpression756781893\">\n          <text>Tarif<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Jahresverbrauch\">\n        <inputExpression id=\"InputExpression1933642704\">\n          <text>Jahresverbrauch<\/text>\n        <\/inputExpression>\n      <\/input>\n      <input id=\"Laufzeit\">\n        <inputExpression id=\"InputExpression1287983556\">\n          <text>Laufzeit<\/text>\n        <\/inputExpression>\n      <\/input>\n      <output id=\"Provision\" name=\"Provision\"\/>\n      <rule id=\"excelRow2\">\n        <inputEntry id=\"A2\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B2\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C2\">\n          <text>\u0026lt;8000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D2\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E2\">\n          <text>100<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow3\">\n        <inputEntry id=\"A3\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B3\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C3\">\n          <text>[8000..10000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D3\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E3\">\n          <text>110<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow4\">\n        <inputEntry id=\"A4\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B4\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C4\">\n          <text>[10001..15000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D4\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E4\">\n          <text>120<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow5\">\n        <inputEntry id=\"A5\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B5\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C5\">\n          <text>\u0026lt;8000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D5\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E5\">\n          <text>200<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow6\">\n        <inputEntry id=\"A6\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B6\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C6\">\n          <text>[8000..10000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D6\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E6\">\n          <text>210<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow7\">\n        <inputEntry id=\"A7\">\n          <text>\"Strom\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B7\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C7\">\n          <text>[10001..15000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D7\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E7\">\n          <text>220<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow8\">\n        <inputEntry id=\"A8\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B8\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C8\">\n          <text>\u0026lt;10000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D8\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E8\">\n          <text>300<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow9\">\n        <inputEntry id=\"A9\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B9\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C9\">\n          <text>[10000..20000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D9\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E9\">\n          <text>310<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow10\">\n        <inputEntry id=\"A10\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B10\">\n          <text>\"*\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C10\">\n          <text>[21000..25000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D10\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E10\">\n          <text>320<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow11\">\n        <inputEntry id=\"A11\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B11\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C11\">\n          <text>\u0026lt;10000<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D11\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E11\">\n          <text>410<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow12\">\n        <inputEntry id=\"A12\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B12\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C12\">\n          <text>[10000..20000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D12\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E12\">\n          <text>420<\/text>\n        <\/outputEntry>\n      <\/rule>\n      <rule id=\"excelRow13\">\n        <inputEntry id=\"A13\">\n          <text>\"Gas\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"B13\">\n          <text>\"\u00D6ko\"<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"C13\">\n          <text>[21000..25000]<\/text>\n        <\/inputEntry>\n        <inputEntry id=\"D13\">\n          <text>24<\/text>\n        <\/inputEntry>\n        <outputEntry id=\"E13\">\n          <text>430<\/text>\n        <\/outputEntry>\n      <\/rule>\n    <\/decisionTable>\n  <\/decision>\n<\/definitions>\n"; // get the process xml via REST
>    
>    viewer.importXML(xml, function(err) {
>   
>      if (err) {
>        console.log('error rendering', err);
>      } else {
>        console.log('rendered');
>        var canvas = viewer.get('canvas');
>        canvas.zoom('fit-viewport');
>      }
>    }); 
>    
>  </script>
> </body>

The error in the console disappeared but the image that is displayed still looks not very nice

The CSS seems to be missing. Make sure to inlcude it.

Thanks, that solved the problem