🇫🇷 Personnalisation de la Tasklist Camunda 7 – Guide Complet avec Exemples

La Tasklist Camunda 7 est l’application web intégrée permettant aux utilisateurs de gérer les tâches humaines (User Tasks).

Par défaut, elle offre une interface simple. Mais dans les contextes réels, les entreprises ont besoin de :

✔ Branding (logos, couleurs, thèmes)
✔ Formulaires personnalisés
✔ Scripts personnalisés
✔ Actions supplémentaires
✔ Filtres métiers
✔ Navigation modifiée
✔ Intégration avec un portail interne

Ce guide complet explique toutes les façons de personnaliser la Tasklist Camunda 7, avec exemples et bonnes pratiques.

⭐ Ce que vous pouvez personnaliser dans la Tasklist

La personnalisation se divise en trois niveaux :

1️⃣ Apparence (Look & Feel / Branding)

  • Couleurs

  • Logos

  • CSS personnalisé

  • En-tête / footer

  • Mise en page

2️⃣ Comportement (JS + actions)

  • Scripts personnalisés

  • Boutons supplémentaires

  • Appels REST personnalisés

  • Redirections

3️⃣ Formulaires utilisateurs

  • Camunda Forms

  • Embedded Forms

  • External Forms

⭐ 1. Personnaliser le thème / CSS de la Tasklist

La Tasklist utilise AngularJS + LESS/CSS.
Vous pouvez surcharger le style en ajoutant un fichier :

src/main/resources/META-INF/resources/webjars/camunda/app/tasklist/styles/custom.css

Exemple : changer le header + logo

.app-header {
  background-color: #002b5c !important;
}

.app-logo {
  background-image: url("images/mon-logo.png") !important;
  background-size: contain !important;
}

Ajouter le logo :

src/main/resources/META-INF/resources/webjars/camunda/app/tasklist/images/mon-logo.png

⭐ 2. Personnaliser la page de connexion

Vous pouvez remplacer la page de login par la vôtre :

src/main/resources/META-INF/resources/webjars/camunda/app/tasklist/login.html

Ajouter votre branding :

<div class="custom-login">
  <img src="images/mon-logo.png" />
  <h2>Portail Workflow RealTech</h2>
</div>

⭐ 3. Ajouter du JavaScript personnalisé

Fichier à ajouter :

src/main/resources/META-INF/resources/webjars/camunda/app/tasklist/scripts/custom.js

Exemple : log lors du chargement du formulaire :

camForm.on('form-loaded', function() {
  console.log("Formulaire chargé :", camForm.formElement.key);
});

Ajouter un bouton personnalisé :

var btn = document.createElement('button');
btn.innerText = "Aide";
btn.onclick = () => alert("Contact support: support@company.com");
document.body.appendChild(btn);

⭐ 4. Créer des filtres de tâches personnalisés

Les filtres permettent d’afficher des tâches spécifiques :

  • Tâches urgentes

  • Tâches d’un département

  • Tâches d’un processus particulier

  • Tâches avec SLA

Ajouter dans :

src/main/resources/META-INF/processes.xml

Exemple :

<filter>
  <id>urgentTasks</id>
  <resource>task</resource>
  <properties>
    <property name="name" value="Tâches urgentes"/>
    <property name="color" value="red"/>
  </properties>
  <query>
    <property name="priority" value="50"/>
  </query>
</filter>

⭐ 5. Ajouter des actions personnalisées (boutons)

Exemple : bouton “Escalader la tâche”

<button class="btn btn-warning" ng-click="escalader(task.id)">
  Escalader
</button>

Action (JS) :

$scope.escalader = function(taskId) {
  $http.post('/workflow/escalade/' + taskId)
       .then(() => alert("Tâche escaladée !"));
};

⭐ 6. Personnaliser les formulaires utilisateurs

Vous pouvez utiliser :

✔ Camunda Forms

Pour formulaires modernes, simples

✔ Embedded Forms (HTML/JS)

Pour formulaires 100% personnalisés (Bootstrap, Tailwind, AngularJS…)

✔ External Forms (recommandé pour applications modernes)

Pour les UIs React/Angular/Vue

Exemple (BPMN):

camunda:formKey="embedded:app:forms/validation.html"

ou

camunda:formKey="external:loan/approve"

⭐ 7. Utiliser des External Task Forms (méthode moderne)

Idéal si vous avez votre propre application front-end.

API :

  • /task?assignee=...

  • /task/{id}/form-variables

  • /task/{id}/complete

C’est l’approche recommandée pour les entreprises.

⭐ 8. Personnaliser navigation + layout

Fichiers modifiables :

navigation.html
header.html
footer.html
tasklist.html

Vous pouvez ajouter :

✔ Numéro d’assistance
✔ Lien vers portail interne
✔ Message de sécurité
✔ Menu par département

⭐ 9. Développer des plugins Tasklist (avancé)

Plugins possibles :

  • Panneaux d’information additionnels

  • Actions personnalisées

  • Tableaux de bord

  • Boutons supplémentaires sur la page de tâche

Structure :

tasklist-plugin/
 ├── plugin.js
 ├── plugin.html
 └── plugin.css

⭐ Exemple réel : portail bancaire personnalisé

Une banque a personnalisé :

✔ Thème bleu/blanc
✔ Dashboard SLA
✔ Bouton “Escalader au superviseur”
✔ UI utilisateur moderne
✔ Intégration avec CRM interne

Résultat :
➡ Plus professionnel,
➡ Plus rapide,
➡ Plus sécurisé.

⭐ Bonnes pratiques

✔ Mettre tout le CSS dans un fichier dédié
✔ Utiliser External Forms pour UIs modernes
✔ Ajouter une authentification (Keycloak / JWT)
✔ Éviter de modifier le code source Camunda
✔ Documenter chaque personnalisation
✔ Versionner dans Git
✔ Tester dans plusieurs navigateurs
✔ Utiliser des variables typées

⚠️ Erreurs à éviter

❌ Modifier directement les fichiers internes Camunda
❌ Utiliser Embedded Forms pour une UI externe moderne
❌ Ne pas sécuriser l'API REST
❌ Tâches affichées pour tous les utilisateurs
❌ Ne pas utiliser META-INF/resources

🎉 Conclusion

Avec la personnalisation de la Tasklist Camunda 7, vous pouvez créer :

✔ Un portail workflow totalement adapté à votre entreprise
✔ Une UI moderne et professionnelle
✔ Des formulaires riches
✔ Des actions personnalisées
✔ Une navigation intuitive
✔ Un thème entièrement personnalisé

Camunda gère les processus.
Vous gérez l’expérience utilisateur.

Ensemble, cela crée une solution workflow complète, fluide et professionnelle.

💼 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 


Comments

Post a Comment

Popular posts from this blog

jBPM Installation Guide: Step by Step Setup

  jBPM Installation Guide – Step by Step for Beginners If you are starting with jBPM (Java Business Process Management) , the first step is to set up your environment. In this guide, we’ll walk through how to install jBPM, configure it, and run your first business process. 🔎 What is jBPM? Before we dive into installation, a quick recap: jBPM is an open-source Business Process Management (BPM) suite , written in Java, that allows you to model, execute, and monitor workflows using BPMN 2.0 standards. It can run standalone , embedded in applications , or deployed on a Java EE server . 🖥️ Prerequisites Before installing jBPM, make sure you have: Java JDK 11 or later (Java 17 is commonly used) Maven 3.x (for building and managing dependencies) Git (optional, if you want to clone sample projects) A Database (H2, MySQL, PostgreSQL, or Oracle) – jBPM ships with H2 for testing At least 4GB RAM (8GB recommended for Workbench & KIE Server) 📦 Download ...
Read more

Scopes of Signal in jBPM

Image
💡 Introduction Signals in jBPM 7 are a core part of event-driven workflow design. They allow asynchronous communication between process instances, making it possible to start , interrupt , or coordinate processes without direct linking. However, signals can have different scopes , which define how far the signal travels and who receives it . Let’s explore the four available scopes in detail: 🔹 Process Scope 🔹 Default Scope 🔹 External Scope 🔹 Project Instance Scope 🧩 1️⃣ Process Scope 📘 Definition Process scope signals are local to a single process instance or its child subprocesses . They are not visible outside that instance hierarchy. 📋 Use Case Used for communication inside the same process , like triggering subprocesses or event sub-processes. 🖼️ Process Scope Example Below is an example of a simple process-scoped signal. Only this process (or its subprocess) will catch this signal. ⚙️ 2️⃣ Default Scope 📘 Definition The default scope ...
Read more

OOPs Concepts in Java | English | Object Oriented Programming Explained

Image
🔹OOPS (Object Oriented Programming System) in Java Object-Oriented Programming (OOPS) is a programming paradigm that uses classes and objects to design software. It simplifies development and maintenance by applying key concepts: 📌 Class: Class   is a user-defined data type which defines its properties and its functions. Class is the only logical representation of the data. For example, Human beings in an organisation is a class like Employee. The age, name, department, salary etc. of a human being/employee are its properties, and the jobs performed by the employees in an organisation are known as functions.  The class does not occupy any memory space till the time an object is instantiated. A class is a user-defined data type that defines properties and functions. For example: Class: Employee Properties: name, age, salary Functions: work(), attendMeeting() A class does not occupy memory until an object is created. ...
Read more