Comment intégrer un diagramme de Gantt dans le logiciel Confluence d'Atlassian ?
Récemment, l'un de nos utilisateurs nous a demandé comment intégrer un diagramme de Gantt Tom's Planner sur une page de l'application Confluence d'Atlassian. Vous pouvez le faire en ajoutant une iFrame à une page, mais ce n'est pas aussi simple à faire que nous le souhaiterions. Voici donc un guide étape par étape :
Dans Confluence, ouvrez la page à laquelle vous souhaitez ajouter le diagramme de Gantt de Tom's Planner. Cliquez sur le bouton "insérer plus de contenu" dans la barre d'outils supérieure de cette page et choisissez l'option "Autres macros" dans le menu qui apparaît :
Cela ouvre une fenêtre contenant une collection de différentes macros. L'une de ces macros insère une iFrame dans votre page. Les iFrames vous permettent d'afficher des pages web provenant d'autres endroits sur le web directement dans votre page Confluence. Ce guide vous expliquera comment insérer une iframe avec votre diagramme de Gantt Tom's Planner sur une page de Confluence.
Cherchez d'abord le terme 'iframe' dans la fenêtre avec toutes les macros :
Cliquez ensuite sur la macro appelée 'iframe'. Une fenêtre va s'ouvrir qui vous permettra de configurer l'iframe que vous allez insérer dans votre page. Pour que cela fonctionne correctement, vous devez renseigner au moins deux éléments. Premièrement, l'url (adresse Internet) du graphique de Gantt que vous souhaitez intégrer et deuxièmement, la largeur et la hauteur que vous souhaitez donner à l'iframe (et donc à votre graphique).
Commençons par l'URL du diagramme de Gantt que vous souhaitez afficher dans l'iframe. Dans ce cas, l'URL est l'adresse Internet de votre diagramme de Gantt Tom's Planner.
Vous pouvez trouver cette adresse dans l'application Tom's Planner :
- ouvrez l'outil Tom's Planner dans votre navigateur
- ouvrez le graphique que vous souhaitez intégrer
- cliquez sur le bouton "partager/collaborer en ligne" dans la barre d'outils supérieure
- cliquez sur le lien "intégrer votre planning" dans la fenêtre qui vient de s'ouvrir.
- Suivez les instructions jusqu'à ce que vous arriviez à cette fenêtre :
Dans le 'code d'intégration', comme indiqué dans l'image ci-dessus, vous trouverez l'url de votre diagramme de Gantt qui vous permettra de l'intégrer à une page de Confluence. Elle est soulignée en rouge.
Copiez l'adresse entière. Veillez à commencer par la partie 'https' et à terminer par la partie 'zoom=9', sans oublier les guillemets simples au début et à la fin !
Donc, dans ce cas, l'adresse complète est : https://www.tomsplanner.com/embedded/?id=4500dd8c-f1c3-11e4-a73b-12313b0e4453&zoom=9
Si ce guide pas à pas ne vous donne pas le résultat escompté, c'est le premier endroit où vérifier si quelque chose s'est mal passé. Avez-vous copié l'url correctement ?
Une fois que vous avez trouvé et copié l'URL, retournez dans l'application Confluence et collez-la dans la fenêtre 'insert iframe macro' que nous venons d'ouvrir :
Vous devez ensuite faire défiler un peu la colonne de gauche de la fenêtre pour entrer la largeur et la hauteur du graphique :
La largeur et la hauteur sont définies en pixels. Jouez avec ces paramètres pour découvrir ce qui fonctionne le mieux pour votre graphique et/ou votre page.
Après avoir défini la largeur et la hauteur, vous pouvez cliquer sur le bouton d'insertion en bas de la fenêtre. La macro va insérer un iframe dans votre page Confluence. Cela n'a pas l'air de grand-chose lorsque vous êtes en train d'éditer la page, mais lorsque vous cliquez sur le bouton de prévisualisation de la page, le résultat ressemblera à ceci :
Eh bien, voilà. Voilà, c'est fait. Vous avez intégré un diagramme de Gantt Tom's Planner à votre page Confluence. Bon travail. C'est le moment de boire une autre tasse de café, je dirais.