Das Dashboard stellt einen der dominantesten Teile in den meisten Confluence Systemen dar. Als Landing-Page gewährt es eine erste Vorschau, was die Benutzer in den verschiedenen Bereichen, auf bestimmten Seiten, Blog-Beiträgen usw. erwartet. Es sollte daher immer sichergestellt werden, dass dieser erste Eindruck ein guter ist. Leider werden die Administratoren schon zu Beginn ihrer Confluence Laufbahn mit einer unerfreulichen Tatsache konfrontiert: Das Dashboard kann nur durch Programmieren individuell angepasst werden. Aufgrund dessen haben uns bei der Scandio schon zahlreiche Kunden kontaktiert mit der Bitte, das Layout ihres Dashboards zu ändern. In den meisten Fällen entwickeln wir dann ein benutzerdefiniertes Theme, das uns die Möglichkeit gibt, das Dashboard nach Belieben zu verändern. Das Dashboard kann aber ebenso durch Bearbeiten des “global layout” unter Confluence Admin / Look and Feel / Layouts angepasst werden. Realistisch gesehen wird dies jedoch nie ausreichend sein, da es sich dabei lediglich um einen Template-Code handelt, ohne jegliche Berücksichtigung von Java oder sauberer Frontend-Entwicklung. Folglich beginnen wir in den meisten Fällen gleich mit einem Theme-Plugin.

Aber es gibt auch noch eine weitere sehr saubere und einfache Vorgehensweise, um das Dashboard zu ändern und verwalten. Das Beste daran: Dies kann von jedem beliebigen Benutzer, der weiß, wie man eine Confluence Seite verwaltet, vollzogen werden - denn wir stellen schlichtweg eine Confluence Seite auf dem Dashboard dar. Des Weiteren sind keine speziellen Add-ons notwendig - es kann alles mit den gewöhnlichen Confluence Ressourcen erreicht werden. Sie können das nicht glauben? Dann lassen Sie es mich im Folgenden genauer erklären…

Eine neue “Dashboard” Seite erstellen

Da wir eine Confluence Seite auf dem Dashboard anzeigen möchten, müssen wir zuerst eine spezielle Seite dafür erstellen. Ich werde diese Seite einfach “dashboard” nennen und in meinem Testbereich mit dem Key “manage” erstellen. Es ist relativ egal, wo man die Seite anlegt und wie man sie betitelt, denn dies wird später noch konfigurierbar sein, wenn wir die Seite einbinden.

Meine Beispiel-Seite sieht im Editiermodus folgendermaßen aus (ich habe lediglich ein paar Artikel von der New York Times Website kopiert):

managed-dashboard-1

Ich habe meiner Seite ein 3-Spalten-Layout mit jeweils gleicher Spalten-Breite gegeben. Ansonsten gibt es keine besondere Formatierung - ganz simpel. Diese Seite speichere ich nun.

Die Seite in den “global layout” Code einbinden

Jetzt müssen wir diese Seite nur noch irgendwie zum Inhalt unseres Dashboards machen. Dies können wir erreichen, indem wir das Einbindungsmakro - wie bereits in der Einleitung erwähnt - im “global layout” anwenden. Diese Anpassung muss nur einmal vollzogen werden und wir müssen den Layout-Code danach nicht mehr editieren - alle weiteren Änderungen werden sofort angezeigt, sobald die Seite bearbeitet wurde.

Gehen Sie zu Confluence Admin / Look and Feel / Layouts. Klicken Sie auf “edit layout” in der “global layout” Reihe. Der Velocity Code des Standard-Dashboards wird in einem Textfeld angezeigt (ohne jegliches Syntax-Highlighting - *aarrrr*).

Nun muss man diesen Bereich im Code suchen:

<div class="dashboard-section">
 #if ($mode == "dashboard")
 #parse ("/decorators/includes/dashboard-navigation.vm")
 #requireResourcesForContext("dashboard")
 #rssautodiscovery($action.rssDescriptor)
 #permitSearchEngines()
 [...]
 #else

Und den Teil […] mit diesem Code ersetzen:

<div id="mandb" class="wiki-content">
    $helper.renderConfluenceMacro("{include:manage:dashboard}")
</div>

Wir benutzen das Einbindungsmakro, um unsere Seite mit dem Titel “dashboard” in den Bereich mit dem Key “manage” einzuschließen. Zudem verpacken wir alles in einem div mit der ID “mandb” (“managed dashboard”), sodass wir den Inhalt später gezielt mit CSS auslesen können. Der Teil “wiki-content” wird für die Anwendbarkeit des Standardseiten-Styles benötigt.

Wenn man nun zum Dashboard navigiert, wird man etwas in dieser Art sehen:

managed-dashboard-2

Einige grundlegende Styles

Nun wollen wir noch die Styles ein bisschen aufhübschen. Da wir uns in einem Standard-Confluence befinden, werden wir das “global stylesheet” unter Confluence Admin / Look and Feel / Stylesheet verwenden. Sobald das CSS komplexer wird, sollte man sich überlegen, irgendwo eine separate CSS Datei beizubehalten und diese stattdessen in das “global layout” (siehe oben) einzubinden. Wenn Sie in der allgemeinen Formatvorlage arbeiten, sollten Sie immer sicher gehen, dass Sie Ihren Selektoren ein _#mandb _voranstellen, sodass die Styles niemals außerhalb des von Ihnen verwalteten Dashboards erscheinen.

In unserem Fall wollen wir die Breiten der einzelnen Spalten noch anpassen und diese mit Rändern sowie Füllungen versehen. Außerdem würden wir auch die Überschriften gerne ein bisschen verschönern. Das ist unser CSS Code:

#mandb .cell:nth-child(1) {
    width: 38%;
    padding-right: 2%;
}
#mandb .cell:nth-child(2) {
    width: 56%;
    padding: 0 2%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}
#mandb .cell:nth-child(3) {
    width: 38%;
    padding-left: 2%;
}
#mandb h2 {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

Nun sieht das Dashboard folgendermaßen aus:

managed-dashboard-3

Das Layout kann nach wie vor verbessert werden. Aber ich denke, für meinen nur 10-minütigen Arbeitsaufwand sieht es ganz gut aus.

Beispiel aus der Hotellerie

Ich muss zugeben: Das obige Beispiel sieht etwas fad aus. Daher haben wir uns dazu entschlossen, ein besseres mit mehr Funktionen zu kreieren. Auf dem Dashboard unseres fiktiven (sehr erfolgreichen ;)) Hotels haben wir ein paar tolle Widgets bereitgestellt. So sieht es aus:

hotel-dashboard-1

Für das Hotel-Intranet haben wir uns wieder für das 3-Spalten-Layout entschieden. In der linken Spalte informiert Lively Blog Posts unsere Mitarbeiter über die aktuellsten Nachrichten im Hotel. Und um ihnen den Tag ein bisschen zu versüßen, haben wir dort zudem einen kleinen Bereich mit täglich wechselnden Zitaten eingebaut. Die mittlere Spalte zeigt an, was sich aktuell in unserem Hotel-Wiki tut: To Dos, heutige Anreisen und neueste Updates. In der rechten Spalte haben wir den aktuellen Belegungsstand in einem Kreisdiagramm visualisiert, die Zahlen dafür liefert PocketQuery aus der externen Hotel-Datenbank. Zudem halten wir unsere Mitarbeiter stets auf dem aktuellsten Stand bezüglich Wetter und $-€ Wechselkurs, sodass sie immer sofort in der Lage sind, die Gäste bei Bedarf darüber zu informieren. Und falls diese noch weitere Fragen haben, zum Beispiel zu einem bestimmten Laden in der Innenstadt, können die Mitarbeiter in der Suchleiste ganz oben in der rechten Spalte danach suchen, indem sie dort passende Stichwörter eingeben.

Die allgemeinen Styles haben sich kaum verändert. Das ist unser Code:

#mandb .cell {
 border-radius: 0;
}
#mandb .cell:nth-child(1) {
 width: 38%;
 padding-right: 2%;
}
#mandb .cell:nth-child(2) {
 width: 56%;
 padding: 02%;
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
}
#mandb .cell:nth-child(3) {
 width: 38%;
 padding-left: 2%;
}
#mandb h2 {
 padding-bottom: 10px;
 border-bottom: 1px solid #ccc;
}

Habe ich bereits erwähnt, dass das Dashboard von nun an ganz einfach durch Bearbeiten der “dashboard” Seite verändert werden kann? Und das ohne zusätzliches technisches Hintergrundwissen? Richtig, ich glaube, das habe ich.  (Lächeln)