This example shows how to integrate bpmn into an Angular application. It uses bpmn-js and bpmn-js-properties-panel.
This example is an angular web application that builds a user interface around the bpmn-js BPMN 2.0 modeler.
We need template reference variables. One for the model and one for the properties module.
// retrieve DOM element reference
@ViewChild('diagramRef', { static: true }) private diagramRef: ElementRef | undefined;
@ViewChild('propertiesRef', { static: true }) private propertiesRef: ElementRef | undefined;
Reference variables has to be used during initialization.
this.bpmnJS = new Modeler({
container: this.diagramRef,
propertiesPanel: {
parent: this.propertiesRef
},
additionalModules: [
BpmnPropertiesPanelModule,
BpmnPropertiesProviderModule,
customPropertiesProvider
],
moddleExtensions: {
custom: custom
}
})
Both model and properties has to be attached after content initialization.
// attach BpmnJS instance to DOM element
this.bpmnJS.attachTo(this.diagramRef!.nativeElement);
const propertiesPanel =this.bpmnJS.get('propertiesPanel');
propertiesPanel.attachTo(this.propertiesRef!.nativeElement);
this.importDiagram(this.xml);
In this example we add a custom property on all start events. The process is similar to the javascript example.
The difference is that we have to initiate the text field entry:
const title = translate('Custom property');
const description = translate('Custom property description')
return new TextFieldEntry({
id,
element,
getValue,
setValue,
debounce,
title,
description
});
Instead of index.js we export our provider in the javascript file where it is defined.
export default {
__init__: [ 'customPropertiesProvider' ],
customPropertiesProvider: [ 'type', CustomPropertiesProvider ]
};
Install all required dependecies.
npm install
Build and run the project
npm start
MIT