2

In my AngularApp i will show the User the current Workflow, by using the REST API. No Problem so far, usnig:

GET /process-definition/{id}/xml

and the

bpmn.io Viewer.

But it's possible to highlight the current Task or get the special Instance of the Workflow, with highlight the current Task?

Thank you for your help.

MartinZyk
  • 192
  • 1
  • 12

2 Answers2

3

1. Get actual the task

The call http://localhost:8080/engine-rest/task/?processInstanceId=<processInstanceId> return a json with the taskDefinitionKey.

https://docs.camunda.org/manual/latest/reference/rest/task/get-query/

2. Style the task

You can add a style class and so highlight a task.

viewer.importXML(diagramXML, function() {
    var canvas = viewer.get('canvas');
    canvas.addMarker('<<TaskId>>', 'highlight');
});

CSS for the color:

.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
    fill: green !important; /* color elements as green */
}

The example is from https://github.com/bpmn-io/bpmn-js-examples/tree/master/colors#adding-colors

jklee
  • 2,198
  • 2
  • 15
  • 25
  • I think its the "taskDefinitionKey" not the "TaskId" right? – MartinZyk Dec 07 '17 at 14:39
  • up vote -1 down vote accept Thanks a lot for the support, my CSS doesn't work properly yet. The task will be highlighted, but unfortunately it is not colored. Maybe you can help me again. – MartinZyk Feb 07 '18 at 06:57
0

thanks for helping me out. To make it work as you described, you have to change the ViewEncapsulation to ViewEncapsulation.None in the Angular.ts file.

MartinZyk
  • 192
  • 1
  • 12