WEBDEV – Intégration de Frappe Gantt pour des plannings interactifs

Introduction

Dans les projets de gestion et de planification, les diagrammes de Gantt sont un outil clé pour visualiser les tâches et leurs interdépendances. Webdev, la solution de développement d’applications web de PCSoft, ne propose pas nativement de composant Gantt interactif. C’est ici que Frappe-Gantt entre en jeu : une librairie JavaScript open source, légère, simple à utiliser et hautement interactive. Elle permet d’afficher et de manipuler des tâches directement dans le navigateur.

Nous verrons dans cet article comment intégrer Frappe-Gantt dans une application Webdev, en détaillant les mécanismes d’intéraction, notamment via les procédures navigateur de Webdev, pour réagir aux modifications utilisateur.

Pourquoi choisir Frappe Gantt ?

Frappe-Gantt est une librairie JavaScript basée sur SVG, développée par la communauté Frappe. Elle permet :

l’affichage clair de tâches avec début, fin et durée,
la gestion des dépendances entre tâches,
le déplacement ou redimensionnement direct des barres de tâche,
l’utilisation d’événements comme on_click, on_date_change, on_progress_change.

Son intégration dans une page HTML est simple, ce qui facilite son usage dans Webdev via un champ HTML statique ou dynamique.Parmi ses points forts :

Intégration dans Webdev

1. Ajouter les fichiers nécessaires

Frappe Gantt étant une librairie JavaScript, l’intégration dans Webdev se fait via un champ HTML.

Dans l’onglet Détail de votre page Webdev, ajoutez ces 2 ressources :

https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.min.js
https://cdn.jsdelivr.net/npm/frappe-gantt/dist/frappe-gantt.css

2. Insérer un champ HTML dans la page

<div id="chart_gantt"></div>

3. Exemple de script pour afficher les tâches

const tasks = [
  {
    id: 'Task1',
    name: 'Spécifications',
    start: '2025-06-01',
    end: '2025-06-05',
    progress: 100
  },
  {
    id: 'Task2',
    name: 'Développement',
    start: '2025-06-06',
    end: '2025-06-15',
    progress: 40,
    dependencies: 'Task1'
  }
];

const gantt = new Gantt("#chart_gantt", tasks, { ...
 on_date_change: (task, start, end) => {
    // Callback appelé lors du drag & drop
    console.log(`Tâche déplacée : ${task.name}`);
    console.log(`Nouvelles dates : ${start} ➝ ${end}`);
  }
});

Interaction native par glisser-déposer

L’un des atouts les plus marquants de Frappe Gantt, c’est sa capacité à permettre à l’utilisateur de manipuler directement le planning :

Glisser une tâche pour modifier sa date de début/fin
Déclenchement d’un callback on_date_change pour mettre à jour le backend
Synchronisation possible avec la base de données via AJAX ou procédures serveur

Cette approche rend l’interface beaucoup plus intuitive et réactive, particulièrement adaptée aux environnements métiers dynamiques où les ajustements sont fréquents.

1. Création d’une procédure Navigateur Webdev

Dans Webdev, créer une procédure navigateur (ex: OnTacheDeplacee) :

PROCÉDURE OnTacheDeplacee(sId, sDebut, sFin)
    // Traitement local, ou appel AJAX vers le serveur
    Trace("Tâche modifiée :" + sId + " de " + sDebut + " à " + sFin)

2. Déclaration de la callback pour Javascript

function js_afficherFrappe(jsDatas,viewMode,fncOnUpdateTask = null)
{
...
	// ---- ici, on fait appel à notre callback webdev
	on_date_change: (task, start, end) => {
		if (fncOnUpdateTask) {
			console.log("Appel à la callback Webdev ",task.name);
			fncOnUpdateTask(task.id,task.start,task.end);
		}
	 }
...

3. Remplissage des taches et affichage

Le code du bouton vous permet de générer les taches et de lancer l’affichage du Gantt.

jsonDatas est un JSON

// appel de la fonction de remplissage des données
jsonDatas = AJAXExécute(jsonGenereDatas)

js_afficherFrappe(jsonDatas, "Month",&OnTacheDeplacee)

Conclusion

Frappe Gantt permet d’ajouter à une application Webdev un diagramme de Gantt interactif et moderne, tout en conservant la logique métier côté serveur. Grâce à sa légèreté, son design clair et ses interactions (glisser-déposer, update des taches, …), il constitue une alternative simple, efficace et gratuite pour enrichir vos outils métiers.

IsiNeva