Wie man ein Gantt-Diagramm in die Confluence-Software von Atlassian einbettet

Kürzlich erhielten wir eine Frage von einem unserer Benutzer, wie man ein Gantt-Diagramm von Tom's Planner auf einer Seite in der Confluence-App von Atlassian einbetten kann. Sie können dies tun, indem Sie einen iFrame zu einer Seite hinzufügen, aber es ist nicht so einfach, wie wir es gerne hätten. Deshalb hier eine Schritt-für-Schritt-Anleitung:

Öffnen Sie in Confluence die Seite, zu der Sie das Gantt-Diagramm von Tom's Planner hinzufügen möchten. Klicken Sie auf die Schaltfläche "Weitere Inhalte einfügen" in der oberen Symbolleiste dieser Seite und wählen Sie im angezeigten Menü die Option "Andere Makros":


Es öffnet sich ein Fenster mit einer Sammlung von verschiedenen Makros. Eines der Makros fügt einen iFrame in Ihre Seite ein. Mithilfe von iFrames können Sie Webseiten von anderen Websites direkt auf Ihrer Confluence-Seite anzeigen. Diese Anleitung erklärt Ihnen, wie Sie einen iframe mit Ihrem Tom's Planner-Gantt-Diagramm auf einer Confluence-Seite einfügen.

Suchen Sie zunächst nach dem Begriff 'iframe' in dem Fenster mit den Makros:



Klicken Sie dann auf das Makro 'iframe'. Es öffnet sich ein Fenster, in dem Sie den iframe konfigurieren können, den Sie in Ihre Seite einfügen möchten. Damit dies richtig funktioniert, müssen Sie mindestens zwei Dinge eingeben. Erstens die URL (Internetadresse) des Gantt-Diagramms, das Sie einbetten möchten, und zweitens die Breite und Höhe, die der iframe (und damit auch Ihr Diagramm) haben soll.

Beginnen wir also mit der URL des Gantt-Diagramms, das Sie im iframe anzeigen möchten. In diesem Fall ist die URL die Internetadresse Ihres Tom's Planner Gantt-Diagramms.

Sie finden diese URL in der Tom's Planner-App:

  1. Öffnen Sie das Tom's Planner-Tool in Ihrem Browser
  2. Öffnen Sie das Diagramm, das Sie einbetten möchten
  3. Klicken Sie auf die Schaltfläche "Online teilen/zusammenarbeiten" in der oberen Symbolleiste
  4. Klicken Sie in dem sich öffnenden Fenster auf den Link "Plan einbetten".
  5. Folgen Sie den Anweisungen, bis Sie zu diesem Fenster gelangen:


Im 'Einbettungscode', wie im Bild oben gezeigt, finden Sie die URL Ihres Gantt-Diagramms, mit der Sie es in eine Confluence-Seite einbetten können. Sie ist rot unterstrichen.

Kopieren Sie die gesamte Adresse. Achten Sie darauf, dass Sie mit dem 'https'-Teil beginnen und mit dem 'zoom=9'-Teil enden. Lassen Sie die einfachen Anführungszeichen am Anfang und am Ende weg!

In diesem Fall lautet die vollständige URL also: https://www.tomsplanner.com/embedded/?id=4500dd8c-f1c3-11e4-a73b-12313b0e4453&zoom=9

Wenn diese Schritt-für-Schritt-Anleitung nicht zum gewünschten Ergebnis führt, ist dies der erste Ort, um zu überprüfen, ob etwas schief gelaufen ist. Haben Sie die Url richtig kopiert?

Nachdem Sie die URL gefunden und kopiert haben, gehen Sie zurück zur Confluence-Anwendung und fügen sie in das soeben geöffnete Fenster "Iframe-Makro einfügen" ein:



Dann müssen Sie in der linken Spalte des Fensters ein wenig nach unten scrollen, um die Breite und Höhe des Diagramms einzugeben:


Die Breite und Höhe werden in Pixeln angegeben. Spielen Sie einfach mit diesen Einstellungen herum, um herauszufinden, was für Ihr Diagramm und/oder Ihre Seite am besten funktioniert.

Nachdem Sie die Breite und Höhe festgelegt haben, können Sie auf die Schaltfläche "Einfügen" am unteren Rand des Fensters klicken. Das Makro wird einen Iframe in Ihre Confluence-Seite einfügen. Es sieht nicht viel aus, wenn Sie die Seite noch bearbeiten, aber wenn Sie auf die Schaltfläche "Vorschau" der Seite klicken, sieht das Ergebnis etwa so aus:



Na also, es geht doch. Das war's. Sie haben ein Gantt-Diagramm von Tom's Planner in Ihre Confluence-Seite eingebettet. Gute Arbeit. Zeit für eine weitere Tasse Kaffee, würde ich sagen.

Werden Sie einer von fast 119,431 Kunden und erstellen Sie Ihr erstes Gantt-Diagramm noch heute!