Need to savexml file using same function

Developers Modeler
1

Hi… I implemented bpmn diagram using react. once I saved the diagram using modeler.savexml function its working fine. but after that again I edit in that same diagram and I try savexml file using same function modeler.savexml its shows undefined modeler. can we rectify it?

2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

const handleclick = async () => {

          try {

           

          let { xml } = await modeler.saveXML({ format: true });

             var encodedData = encodeURIComponent(xml);

            var encodefulldata='data:application/bpmn20-xml;charset=UTF-8,'+`${encodedData}`;

            setref(encodefulldata);

            settoggle(true);

           }

          catch (err) {

            console.log("error", err);

          };

}

The above function is called for button.
First time if I click the button its working fine. since I created modeler like below,

modeler = new BpmnModeler({
container,

              keyboard: {

        bindTo: document

      }
     });      
   modeler.importXML(diagram)
     .then(({ warnings }) => {
         if (warnings.length) {
          console.log("Warnings", warnings);
        }
      })
      .catch((err) => {
        console.log("error", err);
     });
  }

but , if I click second time after editing the diagram using same modeler, then it shows error that “modeler is undefined”.

4

I see no problems in the Snippets you posted.

As this seems to be a problem with you setup, please create and link a CodeSandbox. This way, we can inspect the problem at hand in action and, thus, can help you in a timely and more effective manner.