How to render / draw the current process instance data / flow

Developers Modeler
1

Hi, I would like to know if someone has experience in how to render / draw the current process instance data / flow.

I found the bpmn-js-token-simulation-plugin that has similiar behavior for what I am looking for:

However, I expect to draw the actual state of the process instance. The perfect case would render the flow from start until the actual state, like in the simulation. See images below:

and

Thx!

2

What exactly are you struggling with? What have you already done to achieve this? Having a look at the source code of the token simulation plugin should give a lot of hints.

3

Hi Philipp,

I am just at the beginning of a project where we use Camunda as Engine to execute a process. We are searching for the best approach to show the process diagram on our portal and Mobile App according to the current process instance state and data. For example, suppose that in the first diagram (Token Simulation), the user finished the task “Insert Card”, the JS Render shall show the diagram with a red thick border on the task “Select Interaction”. This is the current Human Task where this process instance is stopped and waiting for user input.

Another objective would be to show what were the steps executed in the selected Processs Instance from the Start Event until now, based on its historical data. The implementation and presentation shall be very similar to the GIF image of the Token Simulation. It starts at the “Start Event”, the user press any key or a Play button, and the JS Render goes to the next step took by the Process Engine and so on.

Thanks!

Regards,
Joao

4

My question is still: What are you struggling with? If you have the historic data and you just want to replay it you only need a small fraction of the functionality of the token simulation plugin.

5

Good to read that, Philipp. I will try to understand your code and to make some tests in order to see the difficulties about it.

Thanks for your help.

6

Maybe this example may help you: https://github.com/camunda-consulting/code/tree/master/snippets/jsf-simple-tasklist

Cheers, Ingo