Einer unserern Kunden hatte die Anforderung, auf der Startseite eines SharePoint-Portals die aktuellen Uhrzeiten der internationalen Standorte des Unternehmens anzuzeigen. Die Uhrzeit sollte sich dabei bei geöffnetem Fenster aktualisieren, nicht nur beim ersten Öffnen des Fensters.
Dabei sollten die Standorte jedoch möglichst über eine SharePoint-Liste eingetragen werden können, so dass neue Standorte ohne Programmierung eingefügt werden können.
Bevor wir die Lösung beschreiben, hier gleich das Ergebnis als Screenshot:
Für die Umsetzung verwenden wir die JavaScript-Lösung CoolClock, die unter einer BSD OpenSourceLicense zur Verfügung gestellt wird. Bitte beachten Sie die dort erwähnten Lizenzbedingungen.
Download und Dokumentation unter:
http://randomibis.com/coolclock/
Nun zur Umsetzung:
Ressourcen vorbereiten
Die Lösung enthält 3 JavaScript-Dateien, diese wurden in das Stammverzeichnis der gewünschten Site kopiert. Bei Bedarf können diese an anderer Stelle abgelegt werden, dann müssen entsprechend die Pfade (s.u.) angepasst werden.
Scripts in die Startseite einbinden
Nun wurde die Startseite (default.aspx) unserer Site im SharePoint Designer geöffnet und folgende Zeilen direkt unter den "PlaceHolderMain" kopiert:
<!–[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]–>
<script type="text/javascript" src="coolclock.js"></script>
<script type="text/javascript" src="moreskins.js"></script>
Die Zeilen können natürlich auch in den Header eingebunden werden, verwenden Sie dazu den Inhaltsbereich PlaceHolderAdditionalPageHead.
Benutzerdefinierte Standortliste einrichten
Als nächstes wurde eine benutzerdefinierte Liste für die Standorte eingerichtet mit folgenden Spalten:
- Standort – umbenannt aus der Titel-Spalte
- Zeitzone – eine Zahlenspalte, enthält die Abweichung des jeweiligen Standorts von GMT
- Sommerzeit – eine Zahlenspalte, die die Abweichung der Sommerzeit enthält
- UhrCode – berechnete Spalte, die den Code enthält, der für die CoolClock zum Aufruf benötigt wird. Teil des Codes ist fester Text, dazu wird der Standort sowie Zeitzone und Sommerzeit als variable Parameter hinzugefügt:
=("!canvas id=clk")&Standort&(" class=CoolClock:fancy:30:noSeconds:")&(Zeitzone+Sommerzeit)&(" leftRightPad%!/canvas%")
Das Ergebnis ist wieder eine Textzeile.
Der richtige Code für den Aufruf des Script enthält eigentlich die Zeichen "<" und ">". Da diese aber später beim Einbinden so nicht erhalten bleiben, verwenden wir an dieser Stelle stattdessen "!" und "%". Später werden diese wieder "zurückverwandelt" (s.u.).
Datenansicht erstellen
Nun wird eine Datenansicht erstellt, die die Standorte und die Uhrzeit dazu anzeigt. Die gewünschte Seite wird im SharePoint Designer zum Bearbeiten geöffnet. Über die Aufgabenbereiche Datenquellenbibliothek und Datenquellendetails wird aus der Liste "Standorte" die Spalte "Standort" eingefügt.
Nun werden die bereits definierten Standorte aufgelistet. Für unser Beispiel fügten wir nun rechts vom Standort eine neue Spalte ein. Dort soll jetzt unser errechneter Code stehen und dabei unsere Hilfszeichen in die richtigen "<" und ">" umgewandelt werden.
Dazu in die neue Spalte klicken und Menü "Datenansicht" und "Formel einfügen" verwenden.
Im Dialogfeld "Formel einfügen" verwendeten wir nun folgende Formel:
translate(@UhrCode, ‘!%’, ‘<>’)
Abschließend muss noch die eingefügte Spalte als Rich-Text-Feld formatiert werden.
Erweiterungen
Die CoolClock lässt sich vom Design her stark anpassen. Schauen Sie auf die erwähnte Website für Anregungen und Hilfe.
Mit der vorgestellten Lösung muss die Sommerzeit-Umstellung manuell in der Standorte-Liste vorgenommen werden. Die CoolClock sieht momentan keinen Parameter dafür vor. JavaScript-Fans finden hier sicher noch Möglichkeiten, das vorliegende Script zu erweitern. Ausgangspunkt für eine solche Programmierung kann z.B. folgendes Beispiel sein:
http://rainbow.arch.scriptmania.com/tools/clock/clock_generator.html