Get elements from 'elementRegistry' to set colors to any of them

Users
1

Hi there!

I’m trying to set Color via Viewer.setColor(element: element, option: {});

but i don’t understand how to get that element.
i write something like this image
i have something like this image

how I should use elementRegistry.get(What should I write here?)?

2

Use the ID of the element:

elementRegistry('myElementId');
3

should I use this id?
image

still get undefined

4

That’s the ID, yes. Can you share the code you’re using?

5

problem that i’m trying to get the object, while it’s not there. Is there any API to get the element, after canvas was rendered with elements?

like eventbus.ready? or smth?

6

Hi @ratelChief

var element = modeler.get('elementRegistry').get(ELEMENTID);

element now is object not array;

const modeling = modeler.get('modeling');

In modeling set color you can pass array of elements or element object

modeling.setColor(element, {
    stroke: ANY_COLOR, 
    fill: ANY_COLOR 
});

I used this solution and I’ve not any problem

7

yes, i’m trying to do the same. And it’s a correct and easiest way to do. My problem, that I’m trying to get the element while it’s still not on the canvas. I need to use code that you write after model is on the canvas.

8

If I understand your requirement, you want set color when put a element on canvas, if this, I suggest use bpmn events like shape.create or commandStack.elements.create.postExecuted, in canvas when a shape created, this event fired and you can get element in creation and set color.

sorry for bad english

9

i’ve got elements with ID’s from server. And using ref’s for using Modeler. Main problem is from event loop, because my function for getting elements from ‘elementRegistry’ has been called and executed before elements rendered on canvas and they assigned to ‘elementRegistry’.

10

to set function for make colorfull element set it to the setTimeout to push it to the end of Callback Quenue

image

1 Like
11

You can only get the elements after the import has finished:

viewer.importXML(diagramXML, () => {
  const elementRegistry = viewer.get('elementRegistry');

  const element = elementRegistry.get('foo');
});
1 Like
12 
bpmnModeler.get('eventBus').on('shape.added'
bpmnModeler.get('eventBus').on('shape.changed' ...

Other events can be found there, and I expect to know all of them