how to read and parse a BPMN file in JavaScript
this is my BPMN file:
irm.bpmn (9.8 KB)
Check out the examples: GitHub - bpmn-io/bpmn-js-examples: Some examples how to use bpmn-js
1 Like
i tried this code that takes a BPMN file and age input from the user, and displays a list of processes based on the age.
// Fonction qui affiche les tâches suivantes dans le processus BPMN basé sur l'âge saisi function showNextTasks() { // Récupérer le fichier BPMN choisi par l'utilisateur var file = document.getElementById("file-input").files[0]; // Récupérer l'âge saisi par l'utilisateur
var age = document.getElementById("age-input").value;
// Créer un objet FileReader pour lire le contenu du fichier BPMN
var reader = new FileReader();
// Définir une fonction à exécuter lorsque le fichier est lu
reader.onload = function(e) {
// Récupérer le contenu du fichier sous forme de texte
var text = e.target.result;
// Parser le texte en un objet DOM
var xmlDoc = $.parseXML(text);
// Sélectionner les éléments task et exclusiveGateway du document xml
var tasks = xmlDoc.getElementsByTagName("bpmn:userTask");
var gateways = xmlDoc.getElementsByTagName("bpmn:exclusiveGateway");
// Créer une variable pour stocker les noms des tâches suivantes
var nextTasks = "";
// Parcourir les éléments exclusiveGateway
for (var j = 0; j < gateways.length; j++) {
// Récupérer l'expression de la gateway courante
var gatewayExpression = gateways[j].getAttribute("name");
console.log(gatewayExpression);
// Vérifier si l'âge de l'utilisateur est inférieur à 3 ans
if (age < 3 && gatewayExpression == "age <3?") {
// Récupérer l'identifiant de la gateway courante
var gatewayId = gateways[j].getAttribute("id");
console.log(gatewayId);
// Parcourir les éléments sequenceFlow
for (var k = 0; k < xmlDoc.getElementsByTagName("bpmn:sequenceFlow").length; k++) {
// Récupérer l'élément sequenceFlow courant
var sequenceFlow = xmlDoc.getElementsByTagName("bpmn:sequenceFlow")[k];
console.log(sequenceFlow);
// Vérifier si le flow va de la gateway courante vers une tâche
if (sequenceFlow.getAttribute("sourceRef") == gatewayId && sequenceFlow.getAttribute("targetRef").includes("userTask_")) {
// Récupérer l'identifiant de la tâche suivante
var nextTaskId = sequenceFlow.getAttribute("targetRef");
// Récupérer le nom de la tâche suivante
var nextTaskName = xmlDoc.querySelector("#" + nextTaskId).getAttribute("name");
// Ajouter le nom de la tâche suivante à la liste
nextTasks += "<li>" + nextTaskName + "</li>";
}
console.log(nextTasks)
}
}
}
// Afficher la liste des tâches suivantes dans le HTML
document.getElementById("result").innerHTML = nextTasks;
console.log(nextTasks)
};
// Lire le fichier comme du texte
reader.readAsText(file);
}
</script>