Render element when something else happens

Developers
1

Hi, I have a problem I hope some of you can help to solve.

I created a custom render for an element, that depends on the name assigned to element’s outgoing connections. For example, the element should be green if there is an outgoing arrow named “Y”, red otherwise. I defined this condition inside the drawShape function, but it’s not called frequently enough: is there a solution to check the state of connections and re-render the element when I add or rename a connection (for example, when I edit the connection changing the name into “Y”)?

Thank you!

2

Generally speaking, elements only update their visual appearance once they are changed. The toolkit simply does not recognize the element as changed, thus does not update its visual apperance.

To resolve this: Make sure that the element is marked as changed from the libraries point of view, as you modify the outgoing elements label. How familiar are you with these advanced customization scenarios / hooking into the command stack?

1 Like
3

Hi!
Thank you very much for your quick reply!

I’m not very familiar with advanced customization or command stack, but I can try to investigate and understand how it works. Of course I’m very glad if you might help.

About the rendering trigger, do you think that calling the render for every element every time something has changed would be too much demanding? Maybe I can add something like a “validate” button to click to run renders, but how can I call a general re-render for all elements?

Thank you again for your help!

4

One thing you can do is to save the information about the connection on the shape. This is how default sequence flows work. The XML looks like this:

<bpmn:exclusiveGateway id="Gateway_1" default="Flow_2">
  <bpmn:incoming>Flow_1</bpmn:incoming>
  <bpmn:outgoing>Flow_2</bpmn:outgoing>
  <bpmn:outgoing>Flow_3</bpmn:outgoing>
</bpmn:exclusiveGateway>

What you could do is to create a behavior that intercepts setting the information on the sequence flow and then also sets it on the shape.

Example that sets a shape’s label whenever an outgoing connection’s label is changed (simply adjust this to set your custom property instead): Rerender Affected Elements Example - CodeSandbox

1 Like