Edit id attribute of element

Developers Modeler
1

Hi, I am looking to edit the id of a task, event etc in the modeller. from what I can see, it is possible to edit the name attribute. Currently, the id seems to be auto generated with a random string. where/how is the id assigned? If I know where this is done, I should be able to extend it to fit my requirements.

2

Hello @Sionnach733,

the ID generation is taken care by the BpmnFactory module found inside of ./lib/features/modeling/BpmnFactory.js. The ._ensureId method generates semantic ids for each element.

Are you looking for changing the way the IDs are generated or of a specific task/event/etc.?

Cheers,
Ricardo

3

Hi @ricardomatias,

That’s great, thanks.

Yes, I want to set id for a specific task/event. for example, I click on end event and a input box appears to change the id. very similar to how editing the name works.

Thanks,
Sionnach

4

Hello @Sionnach733,

if you want to only edit the id of some element and still have the auto id generation going on, you should look into modeling.js at the updateProperties method.

The code snippet below is how you can do it by using our modeling API.
You still need to create an input field and call this method onChange.

f.ex:

var bpmnJS = var BpmnJS({ ... });


bpmnJS.importXML(xml, function() {
  
  bpmnJS.invoke(function(elementRegistry, modeling) {

    // once user updates id in input field
    var newId = 'SERVICE_TASK__1';
    
    var serviceTaskShape = elementRegistry.get('ServiceTask_1');

    modeling.updateProperties(serviceTaskShape, {
      id: newId
    });
  });

});

Cheers,
Ricardo

1 Like
5

Hi @ricardomatias, so should I update the updateProperties method? I am using the modeler example but I dont see when this function is called. I would like when input a name for a task, that sets the id also.

Thanks,
Sionnach

6

Hi @Sionnach733, you should use the updateProperties method.

var flowConnection = elementRegistry.get('SequenceFlow_1');

modeling.updateProperties(flowConnection, { id: 'FOO_BAR' });

The function is called in the UpdatePropertiesHandler.

Cheers,
Ricardo