Modify name and id of process when click a button

Developers Modeler
#1

Hello,
I want to change the name and id of a process when i click a button that have the specific name and id that i want for the process.
process
this is the code that i use to change the name and id.

  async setNameIdToProcess() {
    const bpmnFactory = this.modeler.get('moddle');
    const rootElements = this.modeler.getDefinitions().rootElements;
    const bpmnDefinition = this.modeler.getDefinitions();
    return rootElements.map(async (rootEl, i) => {
      if (is(rootEl, 'bpmn:Process')) {
        if (rootEl.name) {
          if (rootEl.id) {
            rootEl.name = this.tipoProcessoSelected.nomeProcesso;
            rootEl.id = this.tipoProcessoSelected.processoId;
          }
        }
        rootEl.$parent = bpmnDefinition;
        return rootEl;
      }
    });
  }

when i use this code the name and id they have not been changed and i have this error on console
error

Thanks in advance.

#2

Hi,
Could you provide a CodeSandbox that reproduces your issue so we can look into it?

#3

this is the issue CodeSandbox
when i click to ‘change Data’ and after that click to the canvas, i want to see the process name changed. but it doesn’t work
Thanks

#4

Hi,

you just updated the process id (and name) without updating the other elements, which reference that id. Therefore the reference was broken.

There is a handy utility function in place (modeling.updateProperties) that ensures that also references are being updated:

function changeNameID() {
  const elementRegistry = bpmnJS.get('elementRegistry'),
        modeling = bpmnJS.get('modeling');

  const process = elementRegistry.get('Process_0sckl64');

  modeling.updateProperties(process, { 
    id: 'myProcessId',
    name: 'whatAGreatProcess' 
  });

}

Best
Max

#5

Thanks a lot,
My problem was that I did not use ‘elementRegistry’ to get the elements, so and the updateProperties doesn’t work.
But when i have a Participat i use directly
rootEl.name = data.nomeProcesso; rootEl.id = data.processoId;
and it work for me.
Thanks a lot.

#6

Is it possible to get a document with some basic API documentation? It’s impossible to understand what we can do or customize just using a bunch of example projects…