下載https://github.com/bpmn-io/bpmn-js-examples/tree/master/properties-panel模板，將app裏的html文件和js文件修改爲如下：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>bpmn-js modeler demo</title>
<link rel="stylesheet" href="css/diagram-js.css" />
<link rel="stylesheet" href="vendor/bpmn-font/css/bpmn-embedded.css" />
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div class="content with-diagram" id="js-drop-zone">
<div class="message intro">
<div class="note">
Drop BPMN diagram from your desktop or <a id="js-create-diagram" href>create a new diagram</a> to get started.
</div>
</div>
<div class="message error">
<div class="note">
<p>Ooops, we could not display the BPMN 2.0 diagram.</p>
<div class="details">
<span>Import Error Details</span>
<pre></pre>
</div>
</div>
</div>
<div class="canvas" id="js-canvas"></div>
<div class="properties-panel-parent" id="js-properties-panel"></div>
</div>
<ul class="buttons">
<li>
download
</li>
<li>
<a id="js-download-diagram" href title="download BPMN diagram">
BPMN diagram
</a>
</li>
<li>
<a id="js-download-svg" href title="download as SVG image">
SVG image
</a>
</li>
<li>
<input type="file" id="file" οnchange="uploadfile();" />
</li>
</ul>
<script src="index.js"></script>
</html>
js:
import $ from 'jquery';
import BpmnModeler from 'bpmn-js/lib/Modeler';
import propertiesPanelModule from 'bpmn-js-properties-panel';
import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
import x2js from 'x2js'
import {
debounce
} from 'min-dash';
import diagramXML from '../resources/newDiagram.bpmn';
var container = $('#js-drop-zone');
var canvas = $('#js-canvas');
var bpmnModeler = new BpmnModeler({
container: canvas,
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
propertiesPanelModule,
propertiesProviderModule
],
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
container.removeClass('with-diagram');
function createNewDiagram() {
openDiagram(diagramXML);
}
function openDiagram(xml) {
bpmnModeler.importXML(xml, function(err) {
if (err) {
container
.removeClass('with-diagram')
.addClass('with-error');
container.find('.error pre').text(err.message);
console.error(err);
} else {
container
.removeClass('with-error')
.addClass('with-diagram');
}
});
}
function saveSVG(done) {
bpmnModeler.saveSVG(done);
}
function saveDiagram(done) {
bpmnModeler.saveXML({ format: true }, function(err, xml) {
done(err, xml);
});
}
function registerFileDrop(container, callback) {
function handleFileSelect(e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) {
var xml = e.target.result;
callback(xml);
};
reader.readAsText(file);
}
function handleDragOver(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}
container.get(0).addEventListener('dragover', handleDragOver, false);
container.get(0).addEventListener('drop', handleFileSelect, false);
}
// 下載bpmn去除formData，修改camunda爲activiti
function getFormProperty(json){
for(let e in json){
if(e=='extensionElements'&&json.extensionElements.formData&&json.extensionElements.formData.formField){
json.extensionElements._businessKey=json.extensionElements.formData._businessKey
let formProperty = JSON.parse(JSON.stringify(json.extensionElements.formData.formField))
if(isArrayFn(formProperty)){
formProperty.forEach(x=>{
x.__prefix='activiti'
})
} else {
formProperty.__prefix='activiti'
}
json.extensionElements.formProperty = formProperty
delete json.extensionElements.formData
} else if(e.includes('camunda')){
let str = e.replace('camunda','activiti')
json[str] = json[e]
delete json[e]
} else if(typeof json[e] == 'object'){
getFormProperty(json[e])
}
}
}
// 導入bpmn加上formData，修改activiti爲camunda
function returnFormProperty(json){
for(let e in json){
if(e=='extensionElements'&&json.extensionElements.formProperty){
let formField = JSON.parse(JSON.stringify(json.extensionElements.formProperty))
if(isArrayFn(formField)){
formField.forEach(x=>{
x.__prefix='camunda'
})
} else {
formField.__prefix='camunda'
}
json.extensionElements.formData = {
formField,
_businessKey:json.extensionElements._businessKey,
__prefix:"camunda"
}
delete json.extensionElements.formProperty
} else if(typeof json[e] == 'object'){
returnFormProperty(json[e])
}
}
}
//判斷是否爲數組
function isArrayFn(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
////// file drag / drop ///////////////////////
// check file api availability
if (!window.FileList || !window.FileReader) {
window.alert(
'Looks like you use an older browser that does not support drag and drop. ' +
'Try using Chrome, Firefox or the Internet Explorer > 10.');
} else {
registerFileDrop(container, openDiagram);
}
// bootstrap diagram functions
$(function() {
var $x2js = new x2js()
//導入文件，將activiti版轉爲camunda版
$('#file').change(function(e){
let reads = new FileReader();
let file = e.target.files[0];
reads.readAsText(file, 'utf-8');
reads.onload = function (e) {
console.log(e.target.result)
var jsonObj = $x2js.xml2js(e.target.result)
returnFormProperty(jsonObj)
let newXml = $x2js.js2xml(jsonObj)
console.log(newXml)
bpmnModeler.importXML(newXml, function (err) {
if (err) {
console.error(err)
}
})
};
})
$('#js-create-diagram').click(function(e) {
e.stopPropagation();
e.preventDefault();
createNewDiagram();
});
var downloadLink = $('#js-download-diagram');
var downloadSvgLink = $('#js-download-svg');
$('.buttons a').click(function(e) {
if (!$(this).is('.active')) {
e.preventDefault();
e.stopPropagation();
}
});
function setEncoded(link, name, data) {
var encodedData = encodeURIComponent(data);
if (data) {
link.addClass('active').attr({
'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
'download': name
});
} else {
link.removeClass('active');
}
}
var exportArtifacts = debounce(function() {
saveSVG(function(err, svg) {
setEncoded(downloadSvgLink, 'diagram.svg', err ? null : svg);
});
//下載爲bpmn將camunda版轉爲activiti版
saveDiagram(function(err, xml) {
var jsonObj = $x2js.xml2js(xml)
getFormProperty(jsonObj)
let newXml = $x2js.js2xml(jsonObj)
console.log(jsonObj)
setEncoded(downloadLink, 'diagram.bpmn', err ? null : newXml);
});
}, 500);
bpmnModeler.on('commandStack.changed', exportArtifacts);
});
項目表單需要name屬性：修改node_modules\bpmn-js-properties-panel\lib\provider\camunda\parts\FormProps.js文件，在module.exports 的方法內加入如下代碼：
group.entries.push(formFieldTextField({
id: 'form-field-name',
label: translate('Name'),
modelProperty: 'name'
}, getSelectedFormField));
再修改node_modules\camunda-bpmn-moddle\resources\camunda.json文件，在types裏找到FormField的properties加入
{
"name": "name",
"type": "String",
"isAttr": true
},