Difference between revisions of "HTML Presentation Object: BPMN Diagram"
Jump to navigation
Jump to search
(307303) |
(307624) |
||
| (3 intermediate revisions by 2 users not shown) | |||
| Line 6: | Line 6: | ||
<pre> | <pre> | ||
| + | <div id="canvas<#uniqueId>"></div> | ||
| + | |||
<style> | <style> | ||
| − | #canvas { | + | #canvas<#uniqueId> { |
height: 100%; | height: 100%; | ||
} | } | ||
</style> | </style> | ||
| − | |||
<script> | <script> | ||
| − | + | var exampleModeler = new bpmnModeler({ | |
| − | + | container: '#canvas<#uniqueId>', | |
| − | + | keyboard: { | |
| − | + | bindTo: window | |
| − | + | } | |
| − | + | }); | |
| − | |||
| − | |||
// Definition of empty model canvas | // Definition of empty model canvas | ||
| − | var bpmnModel = | + | 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"> | <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" /> | <process id="Process_1n1ursk" /> | ||
| Line 36: | Line 35: | ||
</bpmndi:BPMNLabelStyle> | </bpmndi:BPMNLabelStyle> | ||
</bpmndi:BPMNDiagram> | </bpmndi:BPMNDiagram> | ||
| − | </definitions> | + | </definitions>'; |
// Import model | // Import model | ||
exampleModeler.importXML(bpmnModel, function(err) { | 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> | </script> | ||
</pre> | </pre> | ||
| + | |||
| + | == Additional Libraries == | ||
| + | There are also the following libraries available to be used with the BPMN.io library: | ||
| + | * https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays | ||
| + | * https://github.com/bpmn-io/bpmn-js-examples/tree/master/interaction | ||
| + | * https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel | ||
| + | |||
| + | [[Category: QPR UI]] | ||
Latest revision as of 07:58, 6 May 2019
This is an example on how to use the available 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.
<div id="canvas<#uniqueId>"></div>
<style>
#canvas<#uniqueId> {
height: 100%;
}
</style>
<script>
var exampleModeler = new bpmnModeler({
container: '#canvas<#uniqueId>',
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>
Additional Libraries
There are also the following libraries available to be used with the BPMN.io library: