javascript - 如何在 DMN 编辑器 JavaScript 中加载 XML？

Question

我试图在 Oracle APEX 应用程序中添加 DMN 编辑器。

DMN 编辑器：https ://github.com/bpmn-io/dmn-js

当我使用下面的代码从 URL 加载图表时，它可以工作。但是如何加载具有 XML 的图表列。

来自github的代码：

const diagramUrl = 'https://cdn.staticaly.com/gh/bpmn-io/dmn-js-examples/a71e16/starter/diagram.dmn';

      const CLASS_NAMES = {
        drd: 'dmn-icon-lasso-tool',
        decisionTable: 'dmn-icon-decision-table',
        literalExpression: 'dmn-icon-literal-expression'
      };

      const $container = $('.editor-container');
      const $tabs = $('.editor-tabs');

      // modeler instance
      const dmnModeler = new DmnJS({
        container: $container,
        height: 500,
        width: '100%',
        keyboard: {
          bindTo: window
        }
      });

      $tabs.delegate('.tab', 'click', async function(e) {

        // get index of view from clicked tab
        const viewIdx = parseInt(this.getAttribute('data-id'), 10);

        // get view using index
        const view = dmnModeler.getViews()[viewIdx];

        // open view
        try {
          await dmnModeler.open(view);
        } catch (err) {
          console.error('error opening tab', err);
        }
      });

      dmnModeler.on('views.changed', function(event) {

        // get views from event
        const { views, activeView } = event;

        // clear tabs
        $tabs.empty();

        // create a new tab for each view
        views.forEach(function(v, idx) {

          const className = CLASS_NAMES[v.type];

          const tab = $(`
            <div class="tab ${ v === activeView ? 'active' : ''}" data-id="${idx}">
              <span class="${ className }"></span>
              ${v.element.name || v.element.id}
            </div>
          `);

          $tabs.append(tab);
        });
      });

      /**
       * Save diagram contents and print them to the console.
       */
      async function exportDiagram() {
        try {
          const { xml } = await dmnModeler.saveXML({ format: true });

          alert('Diagram exported. Check the developer tools!');

          console.log('DIAGRAM', xml);
        } catch (err) {
          console.error('could not save DMN 1.3 diagram', err);
        }
      }

      /**
       * Open diagram in our modeler instance.
       *
       * @param {String} dmnXML diagram to display
       */
      async function openDiagram(dmnXML) {

        // import diagram
        try {
          const { warnings } = await dmnModeler.importXML(dmnXML);

          if (warnings.length) {
            console.log('import with warnings', warnings);
          } else {
            console.log('import successful');
          }

          // access active editor components
          const activeEditor = dmnModeler.getActiveViewer();

          const canvas = activeEditor.get('canvas');

          // zoom to fit full viewport
          canvas.zoom('fit-viewport');

        } catch (err) {
          console.error('could not import DMN 1.3 diagram', err);
        }
      }


      // load external diagram file via AJAX and open it
      $.get(diagramUrl, openDiagram, 'text');

      // wire save button
      $('#save-button').click(exportDiagram);

我试过了const diagramUrl = apex.item("P2_DIAGRAM").getValue();

P2_DIAGRAM 有一个前置头处理，并且包含 XML。

来自控制台的错误：

Inferno warning: you cannot initialize inferno without "document.body". Wait on "DOMContentLoaded" event, add script to bottom of body, or use async/defer attributes on script tag.
warning ...

和

could not import DMN 1.3 diagram Error: required args <xml=string>

提前致谢！

标签： javascriptsqloracleplsqloracle-apex