Roland
August 17, 2017, 12:13pm
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
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.
Roland
September 14, 2017, 8:07am
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
I still can’t open either of the files.
Roland
September 18, 2017, 12:12pm
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');
> }
> });
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');
Roland
September 19, 2017, 12:08pm
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
The CSS seems to be missing. Make sure to inlcude it.
Roland
September 20, 2017, 10:26am
9
Thanks, that solved the problem