Biggle's Blog

Web- und Software Development

by Mario Binder

Outlook als GTD Applikation

GTD steht für Getting Things Done und beschreibt Methodiken, seinen täglichen Aufgaben produktiv und effizient zu erledigen. Lesenswerte Artikel zum Thema GTD stehen am Ende des Tutorials.

Zieldefinition

Ziel ist es, im Outlook ein Dashboard bereit zu stellen, welches einem alle Aufgaben, den Posteingang, den Kalender, Notizen und die Kontakte anzeigt. Das Besondere dabei ist, das die Aufgaben in (agiler) Form eines Scrum/Kanban Boards angezeigt werden.

image

image

image

image

image

Features

  • Innerhalb der Aufgabenlisten die man hier im Screenshot sieht, kann man via Drag & Drop die Aufgabe von einer "Pane" in eine andere "Pane" verschieben. 
  • Neue Mails werden automatisch als neue Aufgabe in das Backlog kopiert.

    Taskordner anlegen.

    Zu Beginn müssen wir unserer "Panes" anlegen, das machen wir, indem unter Aufgaben die entsprechende Ordner erstellt werden. Dazu geht man unter Aufgaben mit der rechten Maustaste auf Vorgangsliste und wählt hier "Neuer Ordner". Dies macht man für alle Ordner die man benötigt. In meinem Fall sind das die folgende drei: backlog, in progress und done.

     2012-04-17_14h50_19

  • Dashboard erstellen

    Nachdem wir nun die Aufgaben-Ordner erstellt haben, sollen diese im Dashboard angezeigt werden. Dazu müssen wir vorerst das Dashboard erstellen:
    Hier legen wir uns eine *.html-Datei an einem beliebigen (sicheren) Ort ab. Ich erstelle dazu in meinem Entwicklungsordner einen Ordner namens "#OutlookToday ". Das Pfad müsste nun so aussehen:  "D:\Dev\#OutlookToday\OutlookToday.html".

    In dieser Datei, designen wir nun unser DashBoard.
    Die Elemente die wir im Dashboard anzeigen wollen, werden mittels Object-Element eingebunden, hier kann man über den Parameter "Folder" das  jeweilige Outlook-Element anzeigen.

    Für den Posteingang sieht das wie folgt aus:

    2012-04-17_14h17_19

    Man kann jeden beliebigen Ordner anhand des Namens angeben. z.B. auch den Ordner "Gesendete Elemente"

    2012-04-17_14h18_40

    Nun baut man sich mit ein paar Html/jQuery Kenntnissen ein Design zusammen und bindet die entsprechenden Object-elemente an den Stellen ein, wo man diese benötigt. Mein Beispiel sieht wie folgt aus:

    <html> <head> <title>Dashboard</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> <style type="text/css"> a:active, a:focus { outline: none; ie-dummy: expression(this.hideFocus=true); } h1{ font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif; margin: 5; padding: 0; color: #cc3300; border-bottom: dotted #cc3300 thin; } .thirds{ width: 33%; float:left; } #tabbed_box_1 { margin: 0px auto 0px auto; width:100%; } .tabbed_area { border:1px solid #494e52; background-color:#636d76; padding:8px; } ul.tabs { margin:0px; padding:0px; margin-top:5px; margin-bottom:6px; } ul.tabs li { list-style:none; display:inline; } ul.tabs li a { background-color:#464c54; color:#ffebb5; padding:8px 14px 8px 14px; text-decoration:none; font-size:9px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; border:1px solid #464c54; background-image:url(images/tab_off.jpg); background-repeat:repeat-x; background-position:bottom; } ul.tabs li a:hover { background-color:#ffffff; color:#282e32; border:1px solid #464c54; border-bottom: 1px solid #ffffff; background-image:url(images/tab_on.jpg); background-repeat:repeat-x; background-position:top; } ul.tabs li a.active { background-color:#ffffff; color:#282e32; border:1px solid #464c54; border-bottom: 1px solid #ffffff; background-image:url(images/tab_on.jpg); background-repeat:repeat-x; background-position:top; } .content { background-color:#ffffff; height: 400px; border:1px solid #464c54; font-family:Arial, Helvetica, sans-serif; background-image:url(images/content_bottom.jpg); background-repeat:repeat-x; background-position:bottom; padding: 20px 0px 40px 0px; } #content_2, #content_3, #content_4, #content_5 { display:none; } .content ul { margin:0px; } .content ul li { list-style:none; border-bottom:1px solid #d6dde0; padding-top:15px; padding-bottom:15px; font-size:13px; } .content ul li:last-child { border-bottom:none; } .content ul li a { text-decoration:none; color:#3e4346; } .content ul li a small { color:#8b959c; font-size:9px; text-transform:uppercase; font-family:Verdana, Arial, Helvetica, sans-serif; position:relative; left:4px; top:0px; } .content ul li a:hover { color:#a59c83; } .content ul li a:hover small { color:#baae8e; } </style> </head> <body> <!-- TabControl http://d2o0t5hpnwv4c1.cloudfront.net/001_Tabbed/site/jQuery.html# --> <div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <ul class="tabs"> <li><a href="#" title="content_1" class="tab active">Board</a></li> <li><a href="#" title="content_2" class="tab">Inbox</a></li> <li><a href="#" title="content_3" class="tab">Appointments</a></li> <li><a href="#" title="content_4" class="tab">Notes</a></li> <li><a href="#" title="content_5" class="tab">Contacts</a></li> </ul> <div id="content_1" class="content"> <div class="thirds"> <h1>BACKLOG</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Aufgaben\backlog"> <param name="Namespace" value="MAPI"> <param name="Restriction" value=""><param name="DeferUpdate" value="0"> </OBJECT> </div> <div class="thirds"> <h1>PROGRESS</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Aufgaben\in progress"> <param name="Namespace" value="MAPI"> <param name="Restriction" value><param name="DeferUpdate" value="0"> </OBJECT> </div> <div class="thirds"> <h1>DONE</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Aufgaben\done"> <param name="Namespace" value="MAPI"> <param name="Restriction" value><param name="DeferUpdate" value="0"> </OBJECT> </div> </div> <div id="content_2" class="content"> <h1>Inbox</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Posteingang"> <param name="Namespace" value="MAPI"> <param name="Restriction" value> <param name="DeferUpdate" value="0"> </OBJECT> </div> <div id="content_3" class="content"> <h1>Appointments</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Kalender"> <param name="Namespace" value="MAPI"> <param name="Restriction" value> <param name="DeferUpdate" value="0"> </OBJECT> </div> <div id="content_4" class="content"> <h1>Notes</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Notes"> <param name="Namespace" value="MAPI"> <param name="Restriction" value> <param name="DeferUpdate" value="0"> </OBJECT> </div> <div id="content_5" class="content"> <h1>Contacts</h1> <OBJECT classid=CLSID:0006F063-0000-0000-C000-000000000046 id=ViewCtlFolder width=100% height=500> <param name="Folder" value="Contacts"> <param name="Namespace" value="MAPI"> <param name="Restriction" value> <param name="DeferUpdate" value="0"> </OBJECT> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ // When a link is clicked $("a.tab").click(function () { $(".active").removeClass("active"); $(this).addClass("active"); $(".content").hide(); // slide this content up var content_show = $(this).attr("title"); $("#"+content_show).show(); }); }); </script> </body> </html>

    In Outlook einbinden.

    Um die OutlookToday.html in Outlook einzubinden, geht man mittels Rechtsklick auf den Posteingang und wählt hier unter Eigenschaften den Reiter "Homepage" 
    2012-04-17_14h50_19 (1)

    und trägt hier den Pfad ein: D:\Dev\#OutlookToday\OutlookToday.html

    image 

    Neue Mails als Aufgabe in Backlog kopieren

    Nun kommen wir zum zweiten Feature. Wenn eine neue Mail eintrifft, wollen wir einer Regel erstellen, die die Mail als Kopie in den Aufgaben-Ordner "Backlog" kopiert.


    Dazu benötigen wir ein VBAScript, welches man im Visual Basic Editor erstellen kann. Diesen ruft man mit der Tastenkombination ALT F11 auf. Hier fügt man ein neues Modul ein


     2012-04-17_14h37_01

    In diesem Modul schreibt man folgenden Code


    2012-04-17_14h38_06

    (Das Copy() im Code ist ein Workaround, da sonst die Mail nicht mehr im Posteingang gelistet wird)

    Sub RulesScript(olItem As MailItem) Set copyitem = olItem.Copy Set myTasks = Application.GetNamespace("MAPI").GetDefaultFolder(olFolderTasks) Set backlog = myTasks.Folders("backlog") olItem.Move backlog End Sub

    Nach dem Speichern und Schließen des VBA Editors, müssen wir eine Regel erstellen, die diesen Code ausführt.

    Dazu gehen wir im Outlook unter Extras auf Regeln und Benachrichtigungen.

    2012-04-17_14h34_51

    Hier erstellen wir folgende neue Regel.

  • nur auf diesen Computer
  • die meinen Namen im Feld "An" oder "CC" enthält
  • Weiter
  • ein Script ausführen
  • Im unteren Bereich das RulesScript wählen
  • weiter
  • weiter
  • Der Regel einen Namen vergeben
  • Regel aktivieren 
  • Fertig stellen

    Die Regel empfehle ich natürlich entsprechend anzupassen, nicht jede Mail macht Sinn in das Backlog  geschoben zu werden.

    Nun sollte, wenn alles glatt gelaufen ist, die Regel auch aktiv sein. 

    In der  Board-Ansicht ist man in der Lage, die Aufgaben zwischen den einzelnen Aufgaben-Ordnern ("Panes") mit der Maus zu verschieben, um sich so den derzeitigen Aufgaben-Zustand zu visualisieren.

    So, das war es auch schon. Ich hoffe Ihr findet Verwendung mit dem Outlook-Dashboard und habt so etwas mehr Organisation in Eurer täglichen Arbeit.

    Wenn irgendwas nicht hinhaut, einfach einen Kommentar hinterlassen.

    Links:

  • Produktiver Arbeiten – Alle Tools und Techniken
  • GTD in einer Nußschale
  • GTD auf Google+
    • majestic_55

      Super Sache!
      Ich habe Ihren Vorschlag gleich mal in eine HTML-Datei umgesetzt. Leider ohne Erfolg. Datei wird nicht angezeigt oder es kommt eine Meldung, das die Datei wegen Offlineeigenschaften nicht angezeigt werden kann, oder sie kann einfach so nicht angeigt werden. Bei mit OL2010 mit Exchange.
      Vielleicht können Sie mir ja eine passende Datei zukommen lassen?
      MfG

    • http://www.biggle.de Mario Priebe

      Hallo,

      prima, das dir das Tutorial gefällt. Nun müssen wir schauen, an was das liegen könnte, dass die html nicht rennt.

      Wurden die Task-Ordner so angelegt wie beschrieben? Einfach dazu die jeweiligen Object-Controls die Namen und Pfade anpassen.

      Ist die OL2010 Version engl. oder deutsch?

      Was genau sagt die Fehlermeldung, könnte ich ein Screenshot der Fehlermeldung sehen? Bitte senden an:(mp[ät]biggle[döt]de

    • http://blog.geniali.ch/ GENiALi

      Und jetzt noch ein passendes Setup …
      :-)

    • Christian Götz

      Hallo Mario,

      ich finde das Dashboard genial.

      Nur leider läuft es bei mir nicht richtig. Ich habe Outlook 2010

      Wenn eine neue eMail kommt, verdoppelt sich die eMail in meinem Posteingang.

      Und auf der erste Seite backlog, in progress und done kann ich überhaut nichts machen.

      Gruß Christian

    • Patrick

      Hi, ich kriegs einiger maßen zum laufen :) Habe zwei Exchange Postfächer (mein Einzel-Account und ein GRUPPEN Account). In dem Gruppenaccount hab ich es eingebunden und wird auch angezeigt (der Rahmen) aber der Inhalt ist leider aus meinem Einzel-Account und nicht aus der Gruppe…was mach ich falsch?