Transalte and get XML

[Felipe_Sullivan]

I’m looking for a solution for 2 steps I need to get my MVP live. First, how can I translate it into Portuguese, and 2, how can I get the XML after the user makes a diagram on my website?

this is my current test code (I’m using the next 13):

'use client';

import React, { useEffect, useRef } from 'react';
import BpmnViewer from 'bpmn-js/lib/Modeler';
import camundaModdleDescriptor from 'camunda-bpmn-moddle/resources/camunda.json';
import 'bpmn-js/dist/assets/diagram-js.css';
import 'bpmn-font/dist/css/bpmn-embedded.css';
import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css';
import { useBPMN } from '~/src/app/shared/hooks/useBPMN';
import TranslateModule from 'diagram-js/lib/i18n/translate';
import SelectionModule from 'diagram-js/lib/features/selection';
import OverlaysModule from 'diagram-js/lib/features/overlays';
export function BpmnView({ children }) {
  const { xml, setXml } = useBPMN();
  const canvaRef = useRef(null);

  useEffect(() => {
    const options = {
      container: document.getElementById('js-canvas'),
      keyboard: {
        bindTo: window
      },
      _modules: [
        TranslateModule,
        SelectionModule,
        OverlaysModule,
      ],
      moddleExtensions: {
        camunda: camundaModdleDescriptor
      }
    };

    const viewer = new BpmnViewer(options);

    const importXML = async (xml, Viewer) => {
      await Viewer.importXML(xml, (err) => {
        if (err) {
          return console.error('could not import BPMN 2.0 diagram', err);
        }
      });
    };

    viewer.on('element.changed', (e) => {
      const element = e.element;

      console.log(element);
    });

    const getXML = async () => await importXML(xml, viewer);

    getXML();
  }, [xml]);

  return (
    <div className="relative h-full border-t-[1px] border-primary" id="js-canvas" ref={canvaRef}>
      {children}
    </div>
  );
}

[nikku]

You can follow along our i18n example to learn how to hook up a custom translation. I believe we already have a community provided Portugese translation, too.

[Felipe_Sullivan]

thanks, man, it really was helpful… Now I’ll see about get xml and Ill be almost done