View camunda diagram XML in REACT

[Rajasuryakumar]

Hi Team,
Can you please provide example for React XML Camunda Diagram Viewer. There is no example for React XML Viewer. I have attached my code below, its getting blank page. In below code getting blank page. XML Code here: #2184

import React from "react";
import BpmnViewer from "bpmn-js";
import BpmnNavigatedViewer from "bpmn-js/dist/bpmn-navigated-viewer.development.js";
import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
// css
import "./BPMN.scss";

class BpmnDiagram extends React.Component {
currentXmlVersion = 0;

constructor(props) {
super(props);
this.state = {};
}

componentDidMount() {
console.log("BpmnDiagram mounted");
this.bpmnViewer = new BpmnViewer({
container: "#canvas",
});
}
componentDidUpdate(prevProps, prevState) {
console.log("BpmnDiagram updated", this.props.xmlData);
if (this.props.xmlData !== prevProps.xmlData) {
console.log("xmlData has changed");
if (this.bpmnViewer) {
this.bpmnViewer.destroy();
}
this.bpmnViewer = new BpmnViewer({
container: "#canvas",
});
setTimeout(() => {
this.initializeXML();
if (this.props.updated) {
this.props.updated();
}
});
}
}
initializeXML = async () => {
const { xmlData } = this.props;
console.log("initializeXML called with XML DATA", xmlData);
if (this.bpmnViewer && xmlData) {
try {
const res = await this.bpmnViewer.importXML(xmlData);
console.log("BPMN Viewer Definitions:", this.bpmnViewer?.getDefinitions());
const { warnings } = res;
if (warnings.length) {
console.error("could not import BPMN 2.0 diagram", warnings);
}
var container = document.getElementById("custom-bpmn-container");
const viewport1 = container.children[0].children[0].children[1].children[1].children[0];
if (viewport1) {
container.setAttribute(
"style",
height: ${viewport1.getBoundingClientRect().height}px; width: ${viewport1.getBoundingClientRect().width}px
);
}
if (!this.props.isWorkflow) {
const { setBPMNworkflowId, workflowResource, ticketId, setBPMNactivityId, setMonitorScreenVisibility } = this.props;
setBPMNworkflowId(workflowResource?.workflowId, ticketId);
const eventBus = this.bpmnViewer.get("eventBus");
const events = ["element.click"];
events.forEach((event) => {
eventBus.on(event, (e) => {
if (event === "element.click") {
setBPMNactivityId(e.element.id);
setMonitorScreenVisibility(true);
}
});
});
}
} catch (error) {
console.error("could not import BPMN 2.0 diagram", error);
}
}
};
render() {
const { overlay } = this.props;
return (

{overlay ? (
<div
style={{
zIndex: 100,
backgroundColor: "#aaa",
border: "1px solid black",
position: "absolute",
left: overlay.x,
top: overlay.y - 55,
}}
>
{overlay.firstName}
{overlay.lastName}


{overlay.email}

) : null}

);
}
}
export default BpmnDiagram;

[Nico Rehwaldt]

@rajasuryakumar This is not a Q&A platform / personal help. You created a bunch of issues in quick succession and non of them are actionable for us (missing steps to reproduce). Please stop to spam us with issues.

A quick search could help you out, our forum could be a valuable help resource, too.