DMNViewer: XML rendering does not work


#1

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


#2

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.


#3

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


#4

I still can’t open either of the files.


#5

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');
>      }
>    });

#6

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');

#7

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


#8

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


#9

Thanks, that solved the problem