Trying to add properties-panel to bpmn-js, according to this page:
bpmn-js Modeler + Properties Panel Example
I downloaded properties-panel/ folder and to build the example , I followed the instructions
npm install
npm run all
But when running \properties-panel\public\index.html , it asks to drop a bpmn or create a new file, which both results in:
Import Error Details
bo.get is not a function
I’ve tested many bpmn-js examples by this way, but I can’t run properties-panel example.
I tried to add related modules to my own project:
import BpmnModeler from 'bpmn-js/lib/Modeler';
import BpmnColorPickerModule from 'bpmn-js-color-picker';
var propertiesPanelModule = require('bpmn-js-properties-panel'),
providing camunda executable properties, too
propertiesProviderModule = require('bpmn-js-properties-panel/lib/provider/camunda'),
camundaModdleDescriptor = require('camunda-bpmn-moddle/resources/camunda');
var diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/bpmn-js-examples/dfceecba/starter/diagram.bpmn';
// modeler instance
var bpmnModeler = new BpmnJS({
container: '#canvas',
keyboard: {
bindTo: window
},
propertiesPanel: {
parent: '#js-properties-panel'
},
additionalModules: [
BpmnColorPickerModule,
propertiesPanelModule,
propertiesProviderModule
],
// needed if you'd like to maintain camunda:XXX properties in the properties panel
moddleExtensions: {
camunda: camundaModdleDescriptor
}
});
async function exportDiagram() {
try {
var result = await bpmnModeler.saveXML({ format: true });
alert('Diagram exported. Check the developer tools!');
console.log('DIAGRAM', result.xml);
} catch (err) {
console.error('could not save BPMN 2.0 diagram', err);
}
}
async function openDiagram(bpmnXML) {
try {
await bpmnModeler.importXML(bpmnXML);
var canvas = bpmnModeler.get('canvas');
var overlays = bpmnModeler.get('overlays');
canvas.zoom('fit-viewport');
overlays.add('SCAN_OK', 'note', {
position: {
bottom: 0,
right: 0
},
html: '<div class="diagram-note">Mixed up the labels?</div>'
});
canvas.addMarker('SCAN_OK', 'needs-discussion');
} catch (err) {
console.error('could not import BPMN 2.0 diagram', err);
}
}
$.get(diagramUrl, openDiagram, 'text');
$('#save-button').click(exportDiagram);
and then bundle using webpack, but after running my Index.html , a very bad UI appears for properties-panel:
look at the rendered button of the properties-panel, which has no inner-html :
<button type="button" class="bpp-input-output__add add action-button" data-action="createElement"></button>
May be some files are missing. I really need a working example.