How to set a property to an element by elementID?

Developers
1

How to set a property to an element by elementID?
Like this:
I new a fucntion, and transmit an elementID to it,and the function can set an propperty to this elemet.
Just like:
function setCusProToEle(id){
//first,find and var element by id
element.cusPro = “cus”;
}

2

How would you like to set the property?

  • Temporarily inside the diagram
  • Persistent in the underlying BPMN 2.0 XML export
3

First you need the reference to your diagram.

function setCusProToEle(id, bpmnDiagram) {
    // get the registry to look for the element there
    var elementRegistry = bpmnDiagram.get('elementRegistry');
    // get the element from the element registry
    var element = elementRegistry.get(id);

    // now you need another object from the diagram
    var modeling = bpmnDiagram.get('modeling');
    // this object provides you with the function you need to change properties
    modeling.updateProperties(element, {
        someProperty = 'myValue',
        anotherProperty = 'anotherValue
    });
}

So far I’ve been able to change all properties but the type using this method. You can change the properties directly into the element like “element.something = 4” but using the function will trigger the events related to changes in elements. For example, if you change the name using the function, the graphics representation of the diagram will show the new name, while changing it directly on the element won’t update the graphics.

Cheers,
Gonzalo

3 Likes
4

I want to change it on diagram, and save the change to xml too.
And thanks a lot for your answer.

I know how to finish it. thank!

5

It works, thanks a lot.

6

Wow, great solution. This also works fine for me. It is updating the properties for the current element.

I have a concern related to it,

How can I update the inner properties of the object

let’s say I want to update timer definition for start with timer shape,

as it is inside the object like

element.businessObject.eventDefinitions["0"].timeDate.body

so how to update such properties.

7

If you look at the xml you will see something like this:

<bpmn:timerEventDefinition>
        <bpmn:timeDate xsi:type="bpmn:tFormalExpression">expression</bpmn:timeDate>
</bpmn:timerEventDefinition>

You can have bpmn:timeDate, bpmn:timeDuration or bpmn:timeCycle, depends on your timer event. Those are the elements you have to update. Something like this:

var eventDefinition = element.businessObject.eventDefinitions[0].timeDate;
modeling.updateProperties(eventDefinition, {
    body : ...
});

I haven’t tried the solution myself, hope it works!
Cheers