🇫🇷 Créer une Tasklist entièrement personnalisée pour Camunda 7 avec Angular ou React – Guide Complet

De nombreuses entreprises ne souhaitent pas utiliser la Tasklist par défaut de Camunda 7.
Elles ont besoin d’une interface :

✔ Moderne (React, Angular, Vue)
✔ Totalement personnalisée (UI, couleurs, menus)
✔ Intégrée à leur portail interne
✔ Sécurisée (JWT, Keycloak, OAuth2)
✔ Mobile-friendly
✔ Adaptée aux rôles métier

Dans cette approche, Camunda reste le moteur de workflow, tandis que votre application front-end devient une Tasklist personnalisée.

---

⭐ Pourquoi créer une Tasklist personnalisée ?

✔ UI conforme à la charte graphique
✔ Expérience utilisateur moderne
✔ Intégration dans un portail existant
✔ Tableaux de bord, statistiques, SLA
✔ Interface par rôle : employé, manager, superviseur
✔ Compatible mobile
✔ Plus de flexibilité que Tasklist (AngularJS obsolète)

C’est la solution standard pour des portails professionnels.

---

⭐ Architecture générale

1. L’utilisateur se connecte à votre application Angular/React

2. Votre UI appelle les API REST de Camunda

3. L’interface récupère :

   • Les tâches disponibles

   • Les variables de formulaire

   • Le détail des processus

4. L’utilisateur remplit le formulaire dans VOTRE UI

5. La UI appelle l’API Camunda pour compléter la tâche

6. Le processus BPMN avance

7. La Tasklist se met à jour automatiquement

---

⭐ Les APIs REST nécessaires pour une Tasklist custom

✔ Récupérer les tâches assignées

GET /engine-rest/task?assignee=jean

✔ Récupérer les tâches par groupe

GET /engine-rest/task?candidateGroup=managers

✔ Récupérer les variables du formulaire

GET /engine-rest/task/{taskId}/form-variables

✔ Compléter une tâche

POST /engine-rest/task/{taskId}/complete

✔ Récupérer les variables du processus

GET /engine-rest/process-instance/{id}/variables

Avec ces endpoints, vous pouvez entièrement recréer la Tasklist.

---

⭐ Étape-par-Étape : Construire une Tasklist avec Angular / React

---

1️⃣ Étape 1 – Créer votre projet Angular ou React

Angular

ng new camunda-tasklist
cd camunda-tasklist
ng serve

React

npx create-react-app camunda-tasklist
cd camunda-tasklist
npm start

---

2️⃣ Étape 2 – Liste des tâches (Exemple React)

export default function TaskList() {

  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    fetch("/engine-rest/task?assignee=jean")
      .then(res => res.json())
      .then(setTasks);
  }, []);

  return (
    <div>
      <h2>Mes tâches</h2>
      <ul>
        {tasks.map(t => (
          <li key={t.id}>{t.name}</li>
        ))}
      </ul>
    </div>
  );
}

(Can also provide Angular version on request.)

---

3️⃣ Étape 3 – Charger les variables d’un formulaire

fetch(`/engine-rest/task/${taskId}/form-variables`)
  .then(res => res.json())
  .then(setFormFields);

Réponse :

{
  "customerName": {"type": "String", "value": "Shikha"},
  "loanAmount": {"type": "Long", "value": 50000}
}

Votre UI crée ensuite un formulaire dynamique.

---

4️⃣ Étape 4 – Rendu dynamique du formulaire

Exemple simple :

<input
  value={fields.customerName.value}
  onChange={(e) =>
    setFields({...fields, customerName: {value: e.target.value}})
  }
/>

---

5️⃣ Étape 5 – Compléter une tâche

fetch(`/engine-rest/task/${taskId}/complete`, {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({ variables: fields })
});

Le processus continue automatiquement.

---

6️⃣ Étape 6 – Tableau de bord personnalisé

Sur votre UI, vous pouvez afficher :

✔ Nombre de tâches ouvertes
✔ Statistiques par processus
✔ SLA / tâches en retard
✔ Graphiques (Bar, Pie, Line)
✔ Historique utilisateur

Exemple API :

GET /engine-rest/process-instance/count

---

⭐ Configurer BPMN pour les formulaires externes

Dans la tâche utilisateur :

camunda:formKey="external:loan/approval"

Cela indique :

✔ Ce formulaire est géré par une UI externe
✔ loan/approval = votre route React/Angular

---

⭐ Avantages d’une Tasklist personnalisée

✔ Interface moderne (React/Angular)
✔ UI mobile + responsive
✔ Plus belle que la Tasklist d’origine
✔ 100% personnalisable
✔ Intégrable dans un portail interne
✔ Multi-rôle et multi-fonction
✔ Formulaires puissants avec logique JS
✔ Adaptée aux grandes entreprises

---

⭐ Exemple réel – Portail de traitement des prêts

Une banque a construit :

• Un dashboard React

• Un système de tâches basé sur Camunda

• Des formulaires complexes (calcul du taux, validation financière)

• Une interface par rôle

• Des graphiques & KPI

Résultat :
✔ UX moderne
✔ Processus plus rapide
✔ Automatisation niveau entreprise

---

⭐ Bonnes pratiques

✔ Toujours utiliser external: dans formKey
✔ Ajouter un système d’authentification (OAuth2 / Keycloak / JWT)
✔ Toujours charger des variables typées
✔ Vérifier les erreurs API côté UI
✔ Mettre des loaders et valeurs par défaut
✔ Intégrer une pagination pour les tâches
✔ Utiliser un state management (NgRx / Redux)
✔ Mettre en cache les appels REST

---

⚠️ Erreurs à éviter

❌ Modifier Tasklist au lieu de créer un vrai portail externe
❌ Utiliser Embedded Forms lorsqu’on a déjà un front-end externe
❌ Ne pas sécuriser les APIs Camunda
❌ Hardcoder les IDs de tâches
❌ Ne pas gérer le timeout / retry

---

🎉 Conclusion

Créer une Tasklist personnalisée avec Angular ou React permet :

✔ Une UI moderne et professionnelle
✔ Un contrôle complet sur l’expérience utilisateur
✔ Une intégration parfaite avec votre portail existant
✔ Une meilleure sécurité et une meilleure évolutivité
✔ Un workflow Camunda puissant en arrière-plan

Camunda gère la logique du processus.
Votre application front-end gère l’interface utilisateur.

Cette combinaison donne un portail workflow complet, élégant et évolutif.

💼 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