How to open a BPMN diagram on Reactjs App using BPMN-JS in a readOnly mode

Developers Modeler
1

Hello,
I have a situation where I want to display a BPMN Diagram to the user interface by highlighting the current task a specific process is in a read-only mode, meaning without the left panel that comes by default with the BPMN-js library.
my code is at https://codesandbox.io/s/quizzical-lake-szfyo?file=/src/App.js
I have gotten a method setColor for highlighting the specified task but that does not work.

Any help would be appreciated.

Thank you

2

Let’s split your question up in sub-tasks:

  1. The read-only mode you’re talking about is doable by just using the Viewer, instead of the Modeler. Check out this example on how to use the Viewer.
  2. You’re using canvas.setColor which is not an API we’re offering. I think what you meant was modeling#setColor
  3. If you’re using the Viewer instead of the Modeler, the Modeling API won’t help you, since this module is not available in the Viewer.

What you could do instead is to use the underlying logic to set the color manually:

const elementRegistry = viewer.get("elementRegistry");

const graphicsFactory = viewer.get("graphicsFactory");

function setColor(element, stroke, fill) {
  const businessObject = element.businessObject;

  businessObject.di.set("stroke", stroke);
  businessObject.di.set("fill", fill);

  const gfx = elementRegistry.getGraphics(element);

  const type = element.waypoints ? "connection" : "shape";

  graphicsFactory.update(type, element, gfx);
}

const element = elementRegistry.get("CalmCustomerTask");

setColor(element, "green", "yellow");

I updated your CodeSandbox a bit to solve this problem inside the Viewer.

1 Like
3

Hello Niklas,
Thank you for the enlightenment and the sample at CodeSandbox. Are there API docs as the ones on the Camunda BPMN API for java?

4

Currently not, but we’re currently working on our documentation.

5

Okay, Thank you very much

6

Where can i find documentation related to canvas, bpmnjs library and all such things related to frontend of bpmn
Very new to this
thanks for the patience

7

Hi @TEJAPS,

the current philosophy is written here: bpmn-js: BPMN 2.0 rendering toolkit and web modeler | bpmn.io

"Download our starters and get running in no time.

Read our walkthrough or check out some examples to learn more."

Hope this helps, Ingo

1 Like