© Kellie L. Folkerts/Shutterstock.com
Client-side Rendering (CSR) im praktischen Einsatz

Dashboards und KPIs erstellen


Bei der heutigen Informationsflut lieben wir alle doch Dashboards und vor allem, wenn Werte in rot, gelb, grün, blau und pink herausgehoben sind. Ok, letztere Farbwahl ist wohl nicht häufig zu finden. Aber Fakt ist, dass die schon im Vorfeld formatierte Ansicht einem das Arbeitsleben vereinfachen kann. In SharePoint 2013 kann man dies mittels der Client-side-Rendering-Technik und ein bisschen JavaScript erreichen, der Artikel zeigt wie.

Nachdem man innerhalb seines Teams SharePoint näher kennengelernt hat, Dokumente austauscht, eigene Listen einsetzt oder die Vorlagen, wie Aufgabenlisten, immer mehr einsetzt und im Team jeder auf diesen Inhalten arbeitet und die Listen und Bibliotheken sich allmählich mit Content füllen, folgt die nächste Herausforderung: Der Wunsch, die Daten schneller zu überblicken, wichtige Daten hervorzuheben und die Menge an Daten optimierter darzustellen. Ein einfaches Mittel ist das Erstellen von Listenansichten, die eine bedingte Formatierung der Spalte oder Zeile durchführen – je nach zutreffender Bedingung. Viel besser ist es allerdings, die Informationen in Form von Dashboards und Farben dargestellt zu bekommen. Die Farben setzen einen bestimmten Fokus auf Werte, die wichtig sind, auf Einträge, die wir beachten müssen, oder heben einfach unsere dringenden To-dos hervor. Diese Visualisierung der Daten hilft uns, die große Datenmenge schneller einzuordnen.

In SharePoint 2010 war es zumindest möglich, die Listenansichten mithilfe von SharePoint Designer 2010 umzusetzen. Es gab hierfür sogar die Einstellungsmöglichkeit über die Oberfläche (Button Bedingte Formatierung in der Ribbon-Leiste von SharePoint Designer), um eine bedingte Formatierung einzustellen, sofern man SharePoint Designer verwenden konnte bzw. durfte (Abb. 1).

pohnke_dashboard_1.jpg

Abb. 1: Bedingte Formatierung in SharePoint 2010

Mit SharePoint 2013 und der neuen SharePoint-Designer-2013-Version hat sich dies geändert. Der oben genannte Button ist verschwunden. Aber nur weil der Button verschwunden ist, bedeutet dies noch lange nicht, dass die bedingte Formatierung nicht mehr möglich ist. Sie kann nun über einen etwas anderen Weg erreicht werden. Ein Weg, der ein wenig Erfahrung in JavaScript voraussetzt, aber auch für Laien zu schaffen sein sollte – spätestens nach diesem Artikel. In diesem Artikel geht es nämlich genau darum: Eine bedingte Formatierung über den Client-side-Rendering-(CSR-)Weg zu erstellen und in die Listenansicht einzubinden.

Das Grundprinzip erklärt sich wie folgt: Es wird ein JavaScript-File erstellt, das irgendwo innerhalb der Site Collection gespeichert wird. In diesem JavaScript sind alle notwendigen Funktionen definiert, die die bedingte Formatierung ausmachen. Der Pfad zu diesem JavaScript-File wird innerhalb des Listenansichts-Web-Part in den Web-Part-Eigenschaften unter dem JSLink eingetragen und dadurch aufgerufen. Dieser Teil ist also der einfache, der komplizierte ist der Inhalt des JavaScript-Files.

In unserem heutigen Szenario wollen wir eine einfache selbst erstellte Projektliste farblich umgestalten. Diese „Malerarbeiten“ sollen anschließend ein Ergebnis liefern, wie es in Abbildung 2 zu sehen ist.

pohnke_dashboard_2.jpg

Abb. 2: Exemplarische Dashboard-Ansicht

Bei der Ansicht sollte jeder Manager glücklich werden, zumindest was die Darstellung angeht – nicht bei den Werten. In dieser Liste haben wir die typischen Felder für Projektlisten: Titel, Projektende, Projektbudget, aktuelle Kosten, Erfüllungsgrad (Completion) und den Status. In diesem Beispiel sollen nun folgende Formatierungen herbeigeführt werden:

Projektende: Wenn das Projektende in der Vergangenheit liegt, soll der Hintergrund rot werden und die Schrift weiß.

Aktuelle Kosten: Wenn die Kosten das Projektbudget übersteigen, soll der Hintergrund rot sein, wenn die Werte identisch sind, soll der Hintergrund orange werden und die Schrift jeweils weiß.

Erfüllungsgrad/Project Completion: Diese Spalte gibt Prozentwerte an, daher soll dies wie eine Säule dargestellt sein mit einem grauen Hintergrund, der sich abhängig von dem eingegangenen Prozentwert füllt. Die Spalte soll sich dabei bei einer Erfüllung von über 50 Prozent orange einfärben und bei über 90 Prozent Erfüllung grün gefärbt sein.

Projektstatus: Der Projektstatus soll bei verschiedenen Werten unterschiedliche Bilder und GIF-Animationen anzeigen.

Klingt nach einer einfachen typischen Anfrage, und in Excel wäre dies ebenso kein Problem wie in unserer schönen SharePoint-Ansicht. Diese SharePoint-Listenansicht wird nun zu einem Dashboard, leider noch nicht über ein UI wie es in Excel geht, sondern mit einem JavaScript-File.

Zunächst muss ein JavaScript-File erstellt werden, entweder lokal oder direkt über SharePoint Designer. Dieses JavaScript-File wird innerhalb der Websitesammlung abgelegt. In diesem Fall nutzen wir innerhalb der Ablage der Masterpages den Ordner Display Templates (in SharePoint Designer zu finden unter All Files | _catalogs | masterpage | Display Templates) und nennen das JavaScript-File Dashboard.js (Abb. 3). Es kann aber ebenfalls innerhalb einer Bibliothek liegen, für den Fall dass SharePoint Designer nicht verfügbar oder gesperrt ist...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Gewinner-Teams

Wir bieten Lizenz-Lösungen für Teams jeder Größe: Finden Sie heraus, welche Lösung am besten zu Ihnen passt.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang