Rendering BPMN and highlight current task using bpmn.io

By
  • Blog
  • >
  • Rendering BPMN and highlight current task using bpmn.io
TOPICS

30 Day Free Trial

Bring together legacy systems, RPA bots, microservices and more with Camunda

Sign Up for Camunda Content

Get the latest on Camunda features, events, top trends, and more.

TRENDING CONTENT
With bpmn.io and the Camunda REST API it is really simple to develop a small HTML page that displays a process instance graphically and highlights some activities. In our “JSF Simple Tasklist” snippet we used this to highlight the current Task (like it is done in the Camunda BPM Tasklist):

 

Current task highlighted in sample process

The cool thing – you do not need a lot of code to do this! This is what we do:

  • Handed over the taskId via URL parameter (see Screenshot).
  • Load the Task details and BPMN XML via REST API.
  • Instantiate the BPMN viewer and hand over the XML for rendering
  • Add a CSS class for the activity to be highlighted
  • Load JavaScript/CSS dependencies, we used WebJars, so they are added to our Maven build in a versioned way
This is the required JavaScript Code:

 


$(document).ready(function() {
    var restAccess = '/engine-rest';
    var BpmnViewer = window.BpmnJS;
    var viewer = new BpmnViewer({container: '#diagramCanvas', width: '100%', height: '100%'});
    var container = $('#js-drop-zone');
    // get the diagram
    $.get(restAccess + '/task/#{taskBean.id}', function(marker) {
      $.get(restAccess + '/process-definition/' + marker.processDefinitionId + '/xml', function(data) {
        // show it in bpmn.io
        viewer.importXML(data.bpmn20Xml, function(err) {
          if (err) {
            console.log('error rendering', err);
          } else {
            var canvas = viewer.get('canvas');
            // zoom to fit full viewport
            canvas.zoom('fit-viewport');
            container.removeClass('with-error')
                 .addClass('with-diagram');
            // add marker
            canvas.addMarker(marker.taskDefinitionKey, 'highlight');                  
          }
        });
      });
    });
});

You can see the full JSF page here: taskDetail.xhtml. There you can also see the JavaScript libraries we loaded – all available via WebJars by the way.

Note that it does not have to be JSF – a simple HTML page does the trick as well, as you can see in taskDetail.html. Or you can embed all this in the tooling of your choice 🙂

Great stuff – thanks to the bpmn.io Team for the good work!

Camunda Developer Community

Join Camunda’s global community of developers sharing code, advice, and meaningful experiences

Try All Features of Camunda

Related Content

We're streamlining Camunda product APIs, working towards a single REST API for many components, simplifying the learning curve and making installation easier.
Learn about our approach to migration from Camunda 7 to Camunda 8, and how we can help you achieve it as quickly and effectively as possible.
We've been working hard to reduce the job activation latency in Zeebe. Read on to take a peek under the hood at how we went about it and then verified success.