Digitale Dashboards

Eine Menge an Informationen sind das eine, eine gute Struktur das andere. Digital Dashboards verbinden beides und sorgen so dafür, dass in der Informationsflut der Überblick behalten werden kann.

Anfänglich waren Digital Dashboards nichts anderes als eine erweiterte Version der Zusammenfassungsseite Outlook Heute, die Microsoft mit Outlook 98 eingeführt hatte. Auch diese liess sich bereits rudimentär anpassen, allerdings war das Vorgehen etwas umständlich.

Mit Outlook 2000 wurde dies einfacher: Outlook Heute ist nun eine normale HTML-Seite (oder auch Folder Homepage genannt) und kann beliebig angepasst und erweitert werden.

Outlook Heute dient nach wie vor als Beispiel für ein einfaches Digital Dashboard. Hier lässt sich auf einfachste Weise ein Überblick über anstehende Aufgaben, offene Termine und die Anzahl von Nachrichten in der Inbox gewinnen. Dabei ist die Seite über ein spezielles Applet rudimentär anpassbar, d.h. man hat die Wahl, welche Folder im Nachrichtenüberblick angezeigt werden sollen, wie Outlook die Aufgaben sortiert und in welchen Farben die ganze Seite gestaltet werden soll.

Natürlich bietet ein echtes Dashboard einiges mehr. Sinnvollerweise werden darin alle Informationen gesammelt und übersichtlich dargestellt, mit denen man im Laufe eines Arbeitstages konfrontiert wird. Die neuesten Digital Dashboards sind auch nicht mehr von Outlook abhängig, sondern können im Internet Explorer angezeigt werden. Auf diese Weise spielt der Aufenthaltsort des Users keine Rolle mehr, die Informationen sind immer und überall zugänglich.

Voraussetzungen

Um Dashboards für Outlook zu entwickeln, sind einige Voraussetzungen auf Software-Seite erforderlich. Die wichtigste ist natürlich Outlook 2000 selber. Benötigt werden darüber hinaus weitere Teile von Office 2000, ein HTML-Editor (Frontpage bietet einige Vorteile) sowie die Office Web Components. Der Exchange Server ist zwar keine zwingende Voraussetzung, aber nur in dieser Umgebung stellt sich der angestrebte Nutzen auch wirklich ein. Schliesslich lassen sich Dashboards mit SQL Server und anderen Komponenten aus der BackOffice-Familie funktionell stark erweitern.

Auch der Entwickler selbst sollte einige Voraussetzungen erfüllen: neben Sattelfestigkeit in HTML und VBScript können Kenntnisse in DHTML und Java nicht schaden, wenn man fortgeschrittene Funktionen nutzen will.

Einen guten Einstieg in die Welt der Digital Dashboards vermittelt das Digital Dashboard Starter Kit, das aus einigen Whitepapers, Tutorials und Beispielen besteht. Das Starter Kit kann als deutsche Version kostenlos von der Microsoft-Website  heruntergeladen werden. Die Installation des Kit ist ebenfalls Voraussetzung für die Erstellung von Dashboard, da mit ihm wichtige ActiveX-Controls wie das Outlook-View-Control installiert werden.

Die Arbeit mit Frontpage als HTML-Editor bietet einige Vorteile. So können die benötigten ActiveX-Controls direkt über das Einfügen-Menü von Frontpage ins Dashboard integriert werden. Grundsätzlich ist jedoch jedes Tool geeignet, mit dem Webseiten erzeugt werden können.

Strukturen

In diesem Artikel wird ein Dashboard erstellt, das Informationen aus Outlook, verschiedenen Webseiten sowie einigen Excel-Tabellen zusammenfasst. Die Daten sollen in einem Mehrseiten-Layout gegliedert und nach Zusammengehörigkeit geordnet werden.

Dazu wird zuerst eine Dashboard-Struktur benötigt. Am besten erstellt man dazu eine einfache Skizze, aus der hervorgeht, welche Informationen auf welcher Seite angezeigt werden sollen. Dieses Beispiel besteht unter anderem aus einer Ressourcenseite, auf der die Outlook-Daten zusammengefasst werden und einer Newsseite, die den schnellen und übersichtlichen Zugriff auf einige Webseiten erlaubt.

Diese Struktur wird daraufhin im Dateisystem abgebildet. Jede einzelne Seite erhält einen eigenen Ordner, diese Folder wiederum werden in einem Stammverzeichnis abgelegt, in dem als einzige Datei auch die Homepage des Dashboards zu finden ist.

Der Vorteil dieses Ansatzes liegt darin, dass Rohdaten (wie zum Beispiel Tabellen oder Datenbanken) im selben Verzeichnis gespeichert werden können wie die Seite, auf der sie angezeigt werden sollen. Besonders in umfangreichen Informationssystemen gewinnt das Ganze dadurch an Übersichtlichkeit.

Natürlich werden in grösseren Projekten weitere Ordner benötigt, etwa für Bilder, mehrfach verwendete Scripts und Stylesheets oder andere Seitenelemente wie die Navigationsbar.

Navigation

Wie jede Website benötigt auch ein Dashboard eine möglichst einfache Navigationsstruktur. Beim Dashboard kommt allerdings erschwerend dazu, dass man dafür nicht beliebig viel Platz hat: die gesammelten Informationen stehen im Mittelpunkt und der Anwender sollte nicht zum Scrollen gezwungen werden.

Im Allgemeinen reicht eine einfache Navigatonsbar am oberen Seitenrand, wie sie im Beispiel-Dashboard zu sehen ist. Mit dieser Leiste wird der Zugriff auf die einzelnen Seiten sichergestellt.

Natürlich können diese weitere, seiteninterne Navigationselemente besitzen. Unumgänglich wird dies etwa, wenn in einem einzigen Fenster verschiedene Ressourcen angezeigt werden sollen.

Outlook-Elemente einfügen

Die erste Seite des Beispiel-Dashboards ist eigentlich nichts anderes als eine Erweiterung von Outlook Heute. Hier werden Einträge aus dem Kalender, anstehende Aufgaben und die neuen Nachrichten angezeigt. Allerdings erscheint nicht nur die Anzahl neuer Mails, sondern gleich der ganze Posteingang - die Nachrichten lassen sich direkt öffnen. Über den Menüpunkt Ansicht lässt sich auch einstellen, dass das Vorschaufenster für die E-Mails weiterhin angezeigt wird.

Die Anzeige des Posteingangs (oder eines beliebigen anderen Outlook-Ordners) wird vom ActiveX-Steuerelement Outlook View Control (outlcltx.cab) ermöglicht. Dieses Control wird automatisch mit dem Digital Dashboard Starter Kit auf dem PC installiert.

Die Integration eines Outlook-Elements ist in Frontpage ein Kinderspiel. Über die Menübefehle Einfügen - Outlook Controls - Outlook View Control ruft man die Dialogbox auf, in dem das gewünschte Element ausgewählt wird. Anschliessend passt man das Element in der Layout-Ansicht an die gewünschte Grösse und Erscheinungsweise an.

Genau gleich verfährt man mit den anderen gewünschten Elementen, etwa den Aufgaben, Kontakten oder der Kalender-Übersicht.

Infos verstecken

Es wurde bereits erwähnt, dass Dashboards alle wesentlichen Informationen zwar möglichst unter einem Dach, gleichzeitig aber auch möglichst übersichtlich anzeigen sollten. Da Platz in Outlook nicht endlos verfügbar ist, macht es Sinn, wenn der User die gerade nicht benötigten Informationselemente ausblenden kann.

Dazu verpackt man das gesamte Informationselement in DIV-Tags (Klasse wholeNugget) und gibt diesen einen eindeutigen Bezeichner (im Beispiel nug_messages_1). Das Element besteht aus einem Titelbalken sowie einem Hauptteil, der die eigentlichen Daten anzeigt. Auch dieser Hauptteil wird als separater DIV-Bereich codiert (ID content, Klasse Nugget) und kann darauf von einem einfachen JavaScript adressiert werden. Als Beispiel hier einige Zeilen des Codes für die Integration der Inbox:

<div class="wholeNugget" ID="nug_messages_1">   <table>     <tbody>       <tr title="Messages">         <td nowrap id="title" class="NuggetBar"><span id="text"><a href="outlook:inbox"> Messages</a></span></td>         <td nowrap id="disp" title="Hide" class="NuggetBar"  onclick="displayNugget(nug_messages_1)"<img src="../images/close.gif"</td>       </tr>     </tbody>   </table>   <div id="content" class="Nugget">     <object id="HighPriorityMessages" classid="CLSID:0006F063-0000-0000-C000- 000000000046" codebase="../outlctlx.CAB#ver=9,0,3024" widht="800" height="192">       <param name="View" value="Nachrichten">       ...     </object>   </div> </div>

Eine interessante Möglichkeit zeigt sich in der fünften Zeile. Hier wird in der Titelzeile ein Link auf die Outlook-Inbox gelegt. Klickt der User darauf, verlässt Outlook das Dashboard und wechselt zum Inbox-Ordner. Dieser Vorgang lässt sich für alle Outlook-Ordner programmieren und ist vor allem dann praktisch, wenn das Dashboard nur ein gefiltertes Unterset aller verfügbaren Daten anzeigt. Der Anwender ist somit nur einen Mausklick von der Vollansicht entfernt.

Das displayNugget-JavaScript, das beim Anklicken der Schaltfläche ausgeführt wird und die Daten versteckt bzw. wieder anzeigt, sieht folgendermassen aus:

function displayNugget(oNug) {   var e = oNug.all("disp");   var f = oNug.all("content");   // Wenn Inhalt versteckt ist, anzeigen   if (f.style.display == "none")   {     e.title = "Hide";     e.children(0).src = "../images/close.gif";     f.style.display = "block";     display = "0";   }   // Wenn Inhalt angezeigt wird, verstecken   else   {     e.title = "Show";     e.children(0).src = "../images/open.gif";     f.style.display = "none";     display = "1";   } }

Hier werden zunächst einige Variablen gesetzt. Daraufhin wird in Zeile 6 überprüft, ob die Daten angezeigt werden oder nicht. Falls nicht, zeigt das Script den Datenblock an und ändert gleichzeitig das Symbol in der Titelleiste. Das Ausblenden der Daten geschieht analog dazu.

Webseiten im Dashboard

Ein Dashboard kommt kaum ohne integrierte Webinhalte aus. Das können News- oder Börsenticker sein, in Frage kommen aber auch komplette Webseiten.

Für die Integration dieser Inhalte kommen drei Varianten in Betracht, die sich mehr oder weniger eignen: ActiveX-Controls (insbesondere für Ticker), das Webbrowser-ActiveX-Steuerelement sowie IFrames. Letztere stellen für die meisten Anwendungen die einfachste Methode dar, zumal sich damit mehrere Webseiten in dem selben Frame anzeigen lassen. Der Sourcecode dazu ist denkbar einfach:

<div id="FullPageIFrame" style="padding-top:100px;">   <iframe name="ResourceIFrame" src="http://www.news.com"></iframe> </div>

Der IFrame braucht nichts weiter als einen Namen, der sich adressieren lässt, eine Standard-URL sowie natürlich Masse.

Wer nur eine einzige Webseite anzeigen will, braucht dafür kaum ein Dashboard. Interessanter ist die Möglichkeit, mehrere Quellen im selben Frame anzuzeigen und über ein einfaches Menü zwischen den Informationen auszuwählen. Eine solche Menüstruktur benötigt ebenfalls nur wenig Code:

<span id="topBarSpan">   <span id="span1" onclick="changeTabs(this); document.ResourceIFrame.location.replace('http://www.itreseller.ch') "class="btnFolder" style="font-weight:bold">ITReseller</span> </span>

Natürlich ist das noch kein Menü - dazu wären noch weitere Einträge nötig. Diese lassen sich aber auf einfachste Weise durch Copy&Paste erstellen, bloss die Span-ID muss man weiternummerieren und natürlich die Ziel-URL anpassen. Auch der Aufruf für den Seitenwechsel ist mit dem onClick-Event bereits in dieser Code-Zeile drin.

Nun können wir die Menüleiste über ein kleines Script noch komfortabler machen: Der gerade ausgewählte Menüpunkt wird dafür fett geschrieben, so dass der Anwender auf den ersten Blick erkennt, was er gerade betrachtet:

function changeTabs(currentdiv) {   span1.style.fontWeight="normal" currentdiv.style.fontWeight="bold" }

Zunächst werden mit diesem Script alle Menüpunkte auf Normalschrift gesetzt, bevor der aktuelle Menüeintrag auf fett gesetzt wird. Auch hier genügt es, die dritte Codezeile so oft wie nötig zu kopieren und dann die Span-Nummer anzupassen.

IFrames sind die einzig möglichen Container, die dynamisch generierte Webseiten wie ASPs in digitalen Dashboards aufnehmen können. Allerdings ist mit IFrames Vorsicht geboten: jeder IFrame öffnet nämlich eine eigene neue Instanz des Internet-Explorer Basismoduls. So lange nur wenige IFrames genutzt werden, ist das kaum ein Problem - werden aber Dashboards weitgehend mit diesem Element aufgebaut, kann das ganz schön an die Ressourcen des Host-Computers gehen.

Zugriff auf Office-Dokumente

Die einfachste Methode, um Office-Dokumente (etwa Excel-Tabellen) in ein Dashboard einzufügen, beruht ebenfalls auf IFrames. Statt auf eine URL wird dann im bereits gezeigten Code einfach auf die entsprechende Datei verwiesen.

Diese Methode hat allerdings einen gewichtigen Nachteil: Sie ist statisch, d.h. auf diese Weise eingebundene Dokumente können nur rudimentär bearbeitet und weder sortiert noch gefiltert werden.

Wesentlich bessere Möglichkeiten bieten hier die Office Webkomponenten, die mit Office 2000 geliefert werden. Diese Webkomponenten bestehen im Wesentlichen aus den folgenden vier Elementen:

DataSource-Steuerelement

Das Kernstück der Office-Webkomponenten arbeitet im Hintergrund und stellt die Verbindung mit den Datenquellen für die anderen Steuerelemente her.

Tabellenkalkulationskomponente

Dieses Element unterstützt die meisten Formeln, die auch in Excel zu finden sind. Die Komponente bietet eine Interaktivität, wie sie auch eine Kalkulationstabelle zur Verfügung stellt.

PivotTable-Komponente

Diese Komponente ermöglicht den Zugriff auf OLAP-Datenquellen.

Diagrammkomponente

Über dieses Element lassen sich Informationen aus mehreren Datenquellen sammeln und als Diagramm darstellen.

Die Office-Webkomponenten sind uneingeschränkt programmierbar und können problemlos in ein digitales Dashboard integriert werden. Am einfachsten geschieht dies über Excel: Das Tabellenkalkulations-Programm von Microsoft verfügt in der Version 2000 über einen PivotTable- und einen PivotChart-Assistenten, mit denen Datenquellen schnell und einfach eingebunden werden können. Das Ergebnis wird als interaktive Webseite gespeichert - auf diese Weise ist sichergestellt, dass die Seite auch noch mit der ursprünglichen Datenquelle verbunden ist, wenn die Bearbeitung der Site abgeschlossen ist. Ausserdem werden so einige Bearbeitungselemente von Excel in die Seite eingebunden.

Um die so erstellten Seiten ins Dashboard einzubinden, kann wieder auf die bereits vorgestellten IFrames zurückgegriffen werden. Noch einfacher ist es allerdings, den Source-Code der interaktiven Excel-Seiten einfach ins Dashboard zu kopieren.

Dashboard ersetzt Outlook Heute

Der letzte Schritt auf dem Weg zum digitalen Dashboard ist die Integration der erstellten Website in Outlook. Dafür gibt es verschiedene Möglichkeiten:

Outlook Heute

Ein einfacher Weg, das Digital Dashboard in Outlook zu integrieren, besteht im Ersatz der Outlook-Today Seite. Dieses Element ist standardmässig dazu gedacht, HTML-Seiten anzuzeigen.

Mit der Installation des Digital Dashboard Starter Kit wurde auch ein neuer Menüpunkt namens Set Outlook Today Page ins Extras-Menü von Outlook eingefügt. Nach dem Aufruf dieses Mini-Programms muss bloss die URL (lokal oder auf einem Webserver) eingegeben werden.

Wurde dieses Progrämmchen nicht installiert, kann die Änderung manuell in der Registry vorgenommen werden. Dazu muss im Schlüssel HKEY_CURRENT_USER\Software\Microsoft\Office\9.0\Outlook\Today die Zeichenfolge URL mit dem Wert http://url oder Pfad eingefügt werden.

Soll Outlook wieder die Standardseite von Outlook Heute anzeigen, genügt es, diesen Unterschlüssel wieder zu löschen.

Folder Homepage

In manchen Fällen macht es wenig Sinn, die Standardseite von Outlook Heute zu ändern oder zu ersetzen. Eine bessere Möglichkeit ist in diesem Fall das Anlegen einer speziellen Ordner -Homepage.

Dazu wird in der Ordner-Liste von Outlook in der ersten Unterebene nach dem persönlichen Ordner ein neuer Folder erstellt. Über den Eigenschaften-Dialog dieses Ordners lässt sich nun die URL oder der Pfad zu der eben erstellten Dashboard-Website eintragen.

Wer sich tiefer mit diesen einfach zu entwickelnden Knowledge-Management-Lösungen beschäftigen will, findet einen hervorragenden Einstieg in den Beispielen und Whitepapers, die mit dem Digital Dashboard Starter Kit geliefert werden.

Und wer sich mal anschauen möchte, wie so ein Digital Dashboard aussehen kann, findet hier eine Testseite.