I want to integrate decision table so that I can add input and output in ReactJs

Developers Modeler
1

Please help me in integrating the modeler in reactjs.

import React, { useEffect } from “react”;
import { Segment } from “semantic-ui-react”;
import DmnJs from “dmn-js”;
import “./Modeler.css”;
import “./css/diagram-js.css”;
import “./css/dmn-js-shared.css”;
import “./css/dmn-js-drd.css”;
import “./css/dmn-js-decision-table.css”;
import “./css/dmn-js-decision-table-control.css”;
import “./css/dmn-js-literal-expression.css”;
import “./css/dmn2.css”;

// import “./js/dmn-modeler-development”;
// import “./js/jquery”;
const DMN = props => {
useEffect(() => {
var xml = <?xml version="1.0" encoding="UTF-8"?> <definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" id="definitions_0p3wjz2" name="definitions" namespace="http://camunda.org/schema/1.0/dmn" exporter="dmn-js (https://demo.bpmn.io/dmn)" exporterVersion="10.1.0-alpha.2"> <decision id="decision_1bghjis" name=""> <decisionTable id="decisionTable_0gjzi5o"> <input id="input1" label=""> <inputExpression id="inputExpression1" typeRef="string"> <text></text> </inputExpression> </input> <output id="output1" label="" name="" typeRef="string" /> </decisionTable> </decision> </definitions>; // my DMN 1.1 xml
var viewer = new DmnJs({
container: “#canvas”,
keyboard: {
bindTo: window
}
});

viewer.importXML(xml, function(err) {
  if (err) {
    console.log("error rendering", err);
  } else {
    console.log("rendered");
    var activeViewer = viewer.getActiveViewer();
    console.log(activeViewer);

    activeViewer.get("canvas").zoom("fit-viewport");
  }
});

}, []);

return (



);
};

export default DMN;

with the above code I can only view the table not able to edit it . PLEASE HELP!
decision

2

In order to use the Modeler instead of the Viewer please import

import DmnModeler from 'dmn-js/lib/Modeler';