HTML Presentation Object: BPMN Diagram - Revision history

TeeHiet: 307624

2019-05-06T07:58:59Z

307624

Ollvihe at 08:57, 9 June 2018

2018-06-09T08:57:50Z

Ollvihe at 08:57, 9 June 2018

2018-06-09T08:57:18Z

TeeHiet at 07:49, 6 June 2018

2018-06-06T07:49:50Z

TeeHiet: 307303

2018-05-29T05:53:35Z

307303

New page

This is an example on how to use the available [http://bpmn.io/ BPMN.io] library in an HTML presentation object:

To use the library, do as follows:
# Create a view and a panel.
# Add an HTML presentation object to the panel. Use the below defined code for the HTML presentation object.

<pre>
<style>
#canvas {
height: 100%;
}
</style>

<div id="canvas"></div>
<script>
// modeler instance
debugger;
var exampleModeler = new bpmnModeler({
container: '#canvas',
keyboard: {
bindTo: window
}
});

// Definition of empty model canvas
var bpmnModel =`<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
<process id="Process_1n1ursk" />
<bpmndi:BPMNDiagram id="sid-74620812-92c4-44e5-949c-aa47393d3830">
<bpmndi:BPMNPlane id="sid-cdcae759-2af7-4a6d-bd02-53f3352a731d" bpmnElement="Process_1n1ursk" />
<bpmndi:BPMNLabelStyle id="sid-e0502d32-f8d1-41cf-9c4a-cbb49fecf581">
<omgdc:Font name="Arial" size="11" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
</bpmndi:BPMNLabelStyle>
<bpmndi:BPMNLabelStyle id="sid-84cb49fd-2f7c-44fb-8950-83c3fa153d3b">
<omgdc:Font name="Arial" size="12" isBold="false" isItalic="false" isUnderline="false" isStrikeThrough="false" />
</bpmndi:BPMNLabelStyle>
</bpmndi:BPMNDiagram>
</definitions>`;

// Import model
exampleModeler.importXML(bpmnModel, function(err) {
if (err != null) { alert("Error in importing BPMN XML. The file doesn't seem to be valid. More information: " + err.message); return; }
});
</script>
</pre>

@@ Line 43: / Line 43: @@
 </script>
 </pre>
 [[Category: QPR UI]]

← Older revision		Revision as of 07:49, 6 June 2018
Line 44:		Line 44:
	</script>		</script>
	</pre>		</pre>
		+
		+	[[Category: QPR UI]]

@@ Line 15: / Line 15: @@
 <script>
-  var exampleModeler = new bpmnModeler({
+var exampleModeler = new bpmnModeler({
-    container: '#canvas<#uniqueId>',
+  container: '#canvas<#uniqueId>',
-      keyboard: {
+    keyboard: {
-        bindTo: window
+      bindTo: window
-−
+    }
-    });
+});
 // Definition of empty model canvas
@@ Line 39: / Line 39: @@
 // Import model
 exampleModeler.importXML(bpmnModel, function(err) {
-      if (err != null) { alert("Error in importing BPMN XML. The file doesn't seem to be valid. More information: " + err.message); return; }
+  if (err != null) { alert("Error in importing BPMN XML. The file doesn't seem to be valid. More information: " + err.message); return; }
 });
 </script>

@@ Line 6: / Line 6: @@
 <pre>
 <style>
-   #canvas {
+   #canvas<#uniqueId> {
      height: 100%;
+   }
 </style>
 <script>
    var exampleModeler = new bpmnModeler({
-     container: '#canvas',
+     container: '#canvas<#uniqueId>',
        keyboard: {
          bindTo: window
@@ Line 24: / Line 23: @@
 // Definition of empty model canvas
-var bpmnModel =`<?xml version="1.0" encoding="UTF-8"?>
+var bpmnModel ='<?xml version="1.0" encoding="UTF-8"?>
 <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd">
    <process id="Process_1n1ursk" />
@@ Line 36: / Line 35: @@
      </bpmndi:BPMNLabelStyle>
    </bpmndi:BPMNDiagram>
-</definitions>`;
+</definitions>';
 // Import model