Rendered the BPMN flow diagram on react s UI using bpmn modeler
The flow is rendered from xml on the UI.
XML is rendered already and on the rendered xml we want to add sub process,
I am having piece of subProcessCode already just only want to append the xml as string and then insert the code and re render again.
I tried the following code
Explanation of the code is below :-
- DiagramService.getCurrentDiagramXml() is called to retrieve the XML representation of the current BPMN diagram. It returns a promise that resolves to the XML string.
- The retrieved XML string is then parsed using DOMParser() to create an XML document object (xmlDoc).
- The parent node where the custom subprocess will be appended is identified using querySelector() based on its ID (Process_1).
- The XML representing the custom subprocess (childSubProcess) is defined as a string. This subprocess contains various BPMN elements such as tasks, events, and sequence flows.
- Another DOMParser() is used to create a document fragment (fragment) from the XML string representing the custom subprocess.
- Append each child node of the document fragment to the parent node. After appending the custom subprocess, the modified XML document (xmlDoc) is serialized back to a string using XMLSerializer().
- The resulting XML string (newXml).
- Finally, DiagramService.renderDiagramCanvas(newXml) is called to render the modified BPMN diagram.
Note : We have attributes of the task node as in the format
voice:voiceTaskType , voice:voiceFileInfo
Code :-
const insertCustomSubProcess = async () => {
try {
const diagramXML = await DiagramService.getCurrentDiagramXml();
// Parsing diagramXML
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(diagramXML, "text/xml" );
// Find the parent node
let parentNode = xmlDoc.querySelector(process[id= “Process_1” ]);
// subProcess that we nees to append
const childSubProcess = <subProcess id= “Activity_0009n6k” name= “Greetings” >`
<incoming>Flow_1s78vky</incoming>
<outgoing>Flow_16nzjzj</outgoing>
<task id= "Activity_08gzhgi" name= "Greetings" voice:taskType= "playVoiceFile" voice:voiceFileInfo= "{" en ":
{" filePath ":" welcome "," ttsText ":" "," gender ":" "," playSpeed ":" "," voiceFileType ":" libraryFile "," fileUrl ":" "," fileSize ":" "}," es ":{" filePath ":" es/welcome "," ttsText ":" "," gender ":" "," playSpeed ":" ",
" voiceFileType ":" libraryFile "," fileUrl ":" "," fileSize ":" "," id ":" "," option ":" "}}" session:stepName= "PlayGreeting" >
<incoming>Flow_1we1xkv</incoming>
<outgoing>Flow_0ordxhx</outgoing>
</task>
<startEvent id= "Event_0fwsfrr" name= "Greetings_Start_1" >
<outgoing>Flow_1we1xkv</outgoing>
</startEvent>
<sequenceFlow id= "Flow_1we1xkv" sourceRef= "Event_0fwsfrr" targetRef= "Activity_08gzhgi" />
<intermediateThrowEvent id= "Event_12tlhn0" name= "Greetings_Intermediate_1" >
<incoming>Flow_0ordxhx</incoming>
</intermediateThrowEvent>
<sequenceFlow id= "Flow_0ordxhx" sourceRef= "Activity_08gzhgi" targetRef= "Event_12tlhn0" />
</subProcess>;`
// Create a document fragment for the new child XML
let fragment = parser.parseFromString(childSubProcess, "text/xml" );
// Append the new child XML to the parent node
while (fragment.firstChild) {
parentNode.appendChild(fragment.firstChild);
}
// Serialize the modified XML back to a string
let serializer = new XMLSerializer();
let newXml = serializer.serializeToString(xmlDoc);
console.log( "newXml" , newXml);
DiagramService.renderDiagramCanvas(newXml);
} catch (error) {
// log the error here
}
}
I got the following error :
This page contains the following errors:
Below is a rendering of the page up to the first error.
Flow_1s78vky Flow_16nzjzjvoice:voiceTaskType and voice:voiceFileInfo are the attributes of the node name task
Facing this error ?