Skip navigation



Image Diagram button in the jbpm-console is an amazing functionality providing an image of the process with the current activity node highlighted. Following is an example of how such a functionality can be added into a custom workflow application.


Firstly the process is deployed and is started.

The process looks something like this :



There are a couple of tasks. So it moves to the Node First Task immediately as its instance is started.


Now. To get the current activity node Name->


// Listing all the active tasks for Process Instance ID : procId.

// Name of the current activity is obtained.


List<?> list;

list = taskService.createTaskQuery().processInstanceId(procId).list(); 

String taskName = ((Task)list.get(0)).getName();


Now that we have the current active node name, we can find out the coordinates of this activity by ->


int H = repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getHeight();

int W =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getWidth();

int X =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getX();

int Y =  repositoryService.getActivityCoordinates(((ProcessDefinition)list.get(0)).getId(), "First Task").getY();


Now I take an html file.


and use the image pixels to create a div with the original size of the image ->


<div style="width:1024px; height:768px; background-color:#ffffff;">

  <div style="position:relative;top:-1;left:-1;" />

  <img src="ImageDemo.png" style="position:absolute;top:0;left:0" />"

And a relative-positioned div with the coordinates I obtained from the java class.


<div style="position:absolute;top: 88px;left: 76px;width:50px;height:50px; z-index:1000;background-image: url(Untitled.png);background-repeat:no-repeat;\"></div>


Note that the 2nd div should be relative to the first one.


After I run this html file I get the UI something like this ->



Hope this is helful in some way.