This example shows how to use the rootElements API of bpmn-js to switch between different diagram layers.
The example loads a process diagram with nested subprocesses and changes the browser location changing drilling into. Opening the generated link will take you to the selected subprocess view directly.
Access the Canvas service via bpmnViewer.get('canvas') and set root elements by id using the Canvas#setRootElement method. For collapsed subprocesses, the root element is suffixed with _plane.
var canvas = bpmnViewer.get('canvas');
// switch to a collapsed subprocess
canvas.setRootElement('collapsedProcess_plane');Grab bpmn-js pre-packaged or via npm:
To use canvas 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:
await bpmnViewer.importXML(diagramXML);
// retrieve services and work with them
bpmnViewer.get('canvas').setRootElement('...');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