This example shows how to use the overlays API of bpmn-js to attach HTML overlays to a BPMN 2.0 diagram.
The example loads a process diagram on how to process QR codes and attaches a note on it using the overlays service.
Access the overlays service via bpmnViewer.get('overlays') and add overlays to elements by id using the Overlays#add method.
var overlays = bpmnViewer.get('overlays');
// attach an overlay to a node
overlays.add('SCAN_OK', {
position: {
bottom: 0,
right: 0
},
html: '<div>Mixed up the labels?</div>'
});The method Overlays#add receives two important parameters:
- a element or elementId
- a overlay descriptor
The overlay descriptor must contain a html element you want to attach as the overlay as well as a position that indicates where you want the overlay to be added on the element. Use top, left, bottom, right to control the attachment.
Checkout the example for additional configuration options such as conditional scaling and showing of overlays.
Instead of adding an HTML string, you can pass a JQuery object or plain DOM element via the overlay descriptor, too. This way you can register events with it, thus making it interactive.
var overlayHtml = $('<div>Mixed up the labels?</div>');
overlayHtml.click(function(e) {
alert('someone clicked me');
});
// attach the overlayHtml to a node
overlays.add('SCAN_OK', {
position: {
bottom: 0,
right: 0
},
html: overlayHtml
});Overlays may be removed via Overlays#remove, passing the overlay id or a complex element/type selector:
// remove by id
var overlayId = overlays.add(...);
overlays.remove(overlayId);
// remove by element and/or type
overlays.remove({ element: 'SCAN_OK' });Grab bpmn-js pre-packaged or via npm:
To use overlays and other services provided by bpmn-js instantiate bpmn-js (this time the viewer) via
var bpmnViewer = new BpmnViewer({
container: '#canvas',
width: '100%',
height: '100%'
});Import a BPMN 2.0 diagram and add the overlays in the done callback:
bpmnViewer.importXML(diagramXML, function(err) {
if (err) {
return console.error('could not import BPMN 2.0 diagram', err);
}
// retrieve services and work with them
bpmnViewer.get('overlays').add(...);
});Initialize the project dependencies via
npm install
To create the sample distribution in the dist folder run
npm run all
To bootstrap a development setup that spawns a small webserver and rebuilds your app on changes run
npm run dev
MIT