🇫🇷 Créer des formulaires dans Camunda 7 – Camunda Forms, Embedded Forms et Generated Forms (Guide Complet avec Exemples)

Dans Camunda 7, les formulaires jouent un rôle essentiel pour les User Tasks (tâches humaines).
Camunda propose trois méthodes pour créer des formulaires, chacune adaptée à différents besoins :

1. Camunda Forms (méthode moderne et recommandée)

2. Embedded Forms (formulaires HTML/JS personnalisés)

3. Generated Forms (formulaires générés automatiquement par Camunda)

Ce guide couvre les trois options avec explications, exemples, XML et bonnes pratiques.

---

⭐ 1️⃣ Camunda Forms (Moderne & Recommandé)

Les Camunda Forms sont des formulaires créés directement dans Camunda Modeler via une interface visuelle "drag-and-drop".

✔ Idéal pour :

• Formulaires simples à moyens

• Ne pas écrire de HTML

• Validation intégrée

• Développement rapide

---

Créer un Camunda Form

Étape 1 – Ouvrir Camunda Modeler

Créer un fichier .form.

Étape 2 – Ajouter des composants :

• Champ texte

• Numérique

• Checkbox

• Select

• Textarea

• Upload de fichier

• Bouton Submit

Étape 3 – Enregistrer le formulaire

Exemple :

forms/userForm.form

Étape 4 – Référencer dans un User Task

<bpmn:userTask id="UserTask_Form" name="Saisir les informations">
  <bpmn:extensionElements>
    <camunda:formRef>userForm</camunda:formRef>
  </bpmn:extensionElements>
</bpmn:userTask>

---

Variables dans Camunda Forms

Les variables sont automatiquement lues/écrites :

{
  "nom": { "value": "Shikha" },
  "montant": { "value": 5000 }
}

---

⭐ 2️⃣ Embedded Forms (Formulaires HTML/JS Personnalisés)

Les Embedded Forms permettent d’utiliser votre propre HTML/JS dans la Tasklist Camunda.
C'est la méthode la plus flexible, adaptée aux formulaires très personnalisés.

✔ Idéal pour :

• UI totalement personnalisée

• Intégration CSS (Bootstrap, Tailwind…)

• Logique dynamique avancée

• Validation JavaScript complexe

---

Créer un Embedded Form

Étape 1 – Créer un fichier HTML

/src/main/resources/static/forms/loanForm.html

<form role="form">
  <div class="form-group">
    <label>Nom du client</label>
    <input cam-variable-name="nom"
           cam-variable-type="String"
           class="form-control"/>
  </div>

  <div class="form-group">
    <label>Montant du prêt</label>
    <input cam-variable-name="montant"
           cam-variable-type="Integer"
           class="form-control"/>
  </div>
</form>

---

Étape 2 – Référencer dans BPMN

<userTask id="UserTask_Embedded" 
  camunda:formKey="embedded:app:forms/loanForm.html"/>

Signification :

• embedded:app: → Formulaire chargé depuis l'application

• forms/loanForm.html → Chemin du fichier

---

Étape 3 (optionnelle) – Ajouter du JavaScript

<script cam-script type="text/form-script">
  $scope.calculer = function() {
    $scope.frais = $scope.montant * 0.05;
  }
</script>

---

⭐ 3️⃣ Generated Forms (Formulaires Automatiques)

Les Generated Forms sont créés automatiquement par Camunda selon les formFields définis dans le BPMN.

✔ Idéal pour :

• Prototypage rapide

• Formulaires très simples

• Environnements internes/tests

---

Créer un Generated Form

Ajouter des champs directement dans le BPMN :

<bpmn:userTask id="UserTask_Generated">
  <bpmn:extensionElements>
    <camunda:formData>
      <camunda:formField id="nom" label="Nom" type="string"/>
      <camunda:formField id="montant" label="Montant" type="long"/>
    </camunda:formData>
  </bpmn:extensionElements>
</bpmn:userTask>

Camunda crée automatiquement :
✔ Champ texte
✔ Label
✔ Validation

---

⭐ Tableau Comparatif

Type de Formulaire	Flexibilité UI	Code nécessaire	Meilleur usage
Camunda Forms	Moyenne	Non	Standard, formulaires simples
Embedded Forms	Très haute	Oui (HTML/JS)	UI riche, logique complexe
Generated Forms	Faible	Non	Prototypes, saisies simples

---

⭐ Quel type utiliser ?

✔ Camunda Forms → Recommandé pour toutes les nouvelles applications
✔ Embedded Forms → Pour UI complexes + JavaScript
✔ Generated Forms → Pour tests / prototypes uniquement

---

⭐ Cas réel : Formulaire de demande de prêt

• Camunda Form → Saisie des données

• Embedded Form → Calculs dynamiques (taux, intérêts…)

• Generated Form → Validation finale simple

---

⭐ Bonnes pratiques

✔ Séparer les formulaires dans un dossier dédié
✔ Utiliser Camunda Forms pour la simplicité
✔ Limiter les scripts dans Embedded Forms
✔ Tester tous les formulaires dans Tasklist
✔ Utiliser des variables typées (Integer, Boolean, Double)
✔ Valider les champs avec FEEL ou contraintes intégrées
✔ Pré-remplir les formulaires avec des variables du processus

---

🎉 Conclusion

Camunda 7 propose trois moyens puissants pour créer des formulaires adaptés aux tâches humaines :

✔ Camunda Forms – simple, moderne et standardisé
✔ Embedded Forms – totalement personnalisables
✔ Generated Forms – automatiques et rapides

Avec une bonne sélection du type de formulaire, vos processus BPMN deviendront plus fluides, plus professionnels et parfaitement adaptés à votre UI métier.

💼 Support professionnel disponible

Si vous rencontrez des problèmes sur des projets réels liés au développement backend d’entreprise ou à l’automatisation des workflows, je propose des services de conseil payants, de débogage en production, de support projet et de formations ciblées.

Les technologies couvertes incluent Java, Spring Boot, PL/SQL, Azure, ainsi que l’automatisation des workflows (jBPM, Camunda BPM, RHPAM).

📧 Contact: ishikhanirankari@gmail.com | info@realtechnologiesindia.com

🌐 Website: IT Trainings | Digital lectern | Digital rostrum | Digital metal podium