Modify name and id of process when click a button

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.
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 (rootEl, i) => {
      if (is(rootEl, 'bpmn:Process')) {
        if ( {
          if ( {
   = this.tipoProcessoSelected.nomeProcesso;
   = 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

Thanks in advance.

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

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


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' 



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 = data.nomeProcesso; = data.processoId;
and it work for me.
Thanks a lot.

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…