Lesezeit: 3 min

Seit es Listen und Bibliotheken in SharePoint gibt, gab es Versuche, die Standardansicht der Elemente aufzuwerten. Oft geht es dabei um eine bedingte Formatierung, d.h. man möchte Ampeln, Farb- oder Fortschrittsbalken in einer Listenansicht sehen, anstatt schnöde Zahlen oder Texte. Hier einige der Varianten, die in der Vergangenheit oder auch noch heute eingesetzt werden:

  • Drittanbietertools
  • selbstprogrammierte Lösungen
  • SharePoint Designer
  • JSLINK (ab SharePoint 2013)

Die JSLINK-Variante kann auch in Office 365 noch problemlos eingesetzt werden (hier findet man einige Beispiele), allerdings läuft das nicht mehr in den modernen Listenansichten. Für die neuen Ansichten gibt es seit wenigen Monaten eine neue Option, die wir hier im Feature of the Week gerne vorstellen möchten. Diese Option ist ausführlich dokumentiert, allerdings – falls man nicht gerade Entwickler ist – im ersten Moment recht technisch. Daher hier für Sie zuerst ein paar allgemeine Informationen, dann einfache Beispiele für den schnellen Einsatz, und abschließend noch ein paar technische Details.

Der Überblick

Wir haben eine kleine Testliste vorbereitet, mit einer Spalte “Dauer”.

Spaltenformatierung in SharePoint

Mit der neuen Spaltenformatierung ist es jetzt möglich, die Spalte Dauer optisch hervorzuheben. Das geht ganz einfach: Klicken Sie an der gewünschten Spalte auf den Pfeil, öffnen das Dropdown-Menü und navigieren Sie über die Spalteneinstellungen schließlich zu “Diese Spalte formatieren”.

Spaltenformatierung in SharePoint

Jetzt wird der Konfigurationsbereich “Spalte formatieren” angezeigt.

Spaltenformatierung in SharePoint

Nun geht der Spaß los. Was heißt JSON-Spaltenformatierung, und wie kommt man zum gewünschten Ergebnis?

Die Schnell-Variante

Tatsächlich verbirgt sich hinter JSON ein bei Entwicklern häufig verwendetes Datenformat, das in vielen (Web-)Anwendungen zum Einsatz kommt. Auch wenn man sich damit nicht beschäftigen möchte, gibt es einige interessante Beispiele, die Sie direkt einsetzen können, evtl. mit ganz kleinen zusätzlichen Anpassungen an Ihre Anforderungen. Diese Beispiele finden Sie auf einer Seite von GitHub, hier gibt es einige SharePoint Column Formatting Samples. Auch wenn das gleich wieder sehr entwicklerlastig aussieht (ist es auch), zeigen wir Ihnen den schnellen Weg zum Glück. Klicken Sie einfach auf die grüne Schaltfläche “Clone or download” und wählen dann die Option “Download ZIP”.

Spaltenformatierung in SharePoint

Nach dem Download entpacken Sie die ZIP-Datei und öffnen den Ordner “Samples”. Hier gibt es aktuell knapp 20 Beispiele, wenn Sie den jeweiligen Ordner öffnen finden Sie dort auch einen Screenshot, der die Anwendung des Beispiels zeigt. Wir wählen das Beispiel im Ordner “number-data-bar”, und öffnen dort die Datei “number-data-bar.json” mit einem Editor. Wir lassen uns von dem Entwickler-Wirrwarr nicht stören und kopieren alles in die Zwischenablage. Zurück nach SharePoint und den Konfigurationsbereich “Spalte formatieren”. Hier einfach den Inhalt der Zwischenablage einfügen und unten mit Vorschau oder gleich mit Speichern bestätigen, anschließend sehen wir sofort, was sich getan hat:

Spaltenformatierung in SharePoint

Die “Ich will es ein bisschen anpassen”-Variante

Zugegeben, die Beispiele von GitHub sind hilfreich, aber man braucht dann schnell kleine Anpassungen. Hier eine zweite Variante für unsere Urlaubstage – in der Tabelle soll farblich darauf hingewiesen werden, wenn ein Urlaub 10 oder mehr Tage beträgt. Dazu gibt es das Beispiel “number-conditional-format”. Also im Ordner die entsprechende JSON-Datei öffnen. Wir wollen jetzt nicht den ganzen Code analysieren, aber zwei Stellen sind hier interessant:
Sie finden je zweimal die Zeilen “operator”: “<=”, und etwas darunter die Zahl 70. Das bedeutet, dass im Beispiel die farbliche Hervorhebung angezeigt wird bei Werten kleiner/gleich siebzig. Das kann nun einfach umgekehrt werden, mit den folgenden Zeilen “operator”: “>=”, (also einfach das “<” durch “>” ersetzen) und etwas darunter die Zahl 10 eingeben. Auch nicht schlecht im Ergebnis:

Spaltenformatierung in SharePoint

Damit haben Sie schon einige Möglichkeiten, um die neuen Formatierungsmöglichkeiten auszuprobieren. Wie Sie der Dokumentation von Microsoft vielleicht schon entnehmen konnten, kann das alles sehr komplex werden, aber auch mit einfachen Mitteln kann man schon interessante und hilfreiche Effekte erzielen.

Einschub: Was man noch wissen sollte

Hier noch ein paar Beobachtungen und Informationen für Sie.

  • Wenn Sie die Listeneigenschaften in SharePoint öffnen und dort Spalten bearbeiten, gibt es ebenfalls ein Feld mit Eingabemöglichkeit für den JSON-Code. Es spielt keine Rolle, wo Sie den Code eingeben, die oben gezeigte Variante ist sicher bequemer.
  • Falls Sie einen fehlerhaften Code eingeben, passiert nichts außer einem Hinweis, dass gültige JSON-Spaltenformatierung eingegeben werden soll. Man kann also hier nichts falsch machen, andererseits ist die Fehlersuche sicher nicht ganz einfach.
  • Der Code wird direkt mit den Listeneinstellungen gesichert und kann von allen Personen mit entsprechenden Rechten angepasst werden. Sichern Sie am besten die verwendeten Codeschnipsel an separater Stelle, falls hier versehentlich etwas geändert oder gelöscht wird.
  • Anders als beim JSLINK wird der Code für die Liste in allen Ansichten ausgeführt. Allerdings – wenn Sie auf einer Seite mit modernen Webparts arbeiten und dort die Liste einfügen, wird die Formatierung noch nicht angezeigt! Wir hoffen, Microsoft bessert hier bald nach.

Die “Jetzt will ich’s aber wissen”-Variante

Wir möchten hier nicht die komplette und sehr gute Dokumentation zum Thema nacherzählen, sondern ein paar interessante Hinweise für eigene Erweiterungen geben. Hilfreich ist vielleicht folgende Kurzübersicht “was geht”. Man kann:

  • auf andere Werte innerhalb eines Listenelements zugreifen
  • mit “before” und “after” sogar auf die Zeile über bzw. unter dem aktuellen Element zugreifen
  • einfache Berechnungen anstellen
  • komplexe Vergleichsbedingungen verwenden
  • mit @me auf den aktuellen Benutzer zugreifen
  • mit @now auf das aktuelle Datum zugreifen
  • mit den meisten Spaltentypen arbeiten, außer
    • verwaltete Medataten
    • Berechnet
    • Dateiname (Dokumentenbibliotheken)
    • Aufbewahrungsbezeichnung
  • mit eigenem CSS, aber auch mit vordefinierten Klassen z.B. aus dem Office UI Fabric arbeiten.

Noch ein Hinweis für das Design der Formatierungen. Microsoft hat für “moderne” Listen und Seiten einen kompletten Stilkatalog im Einsatz, der auf diesen Seiten auch automatisch zur Verfügung steht, die Stilvorlagen sind Teil des Office UI Fabric. Dort finden Sie unter “Style” z.B. eine Menge an Icons. Verwenden Sie am besten diese, eigene Grafikdateien sollten nur noch in speziellen Fällen notwendig sein. Ebenso der Hinweis auf die Farbpaletten unter “Colors”, wenn Sie diese Farben verwenden, werden automatisch die Designfarben der jeweiligen Website angezeigt. Und ansonsten können Sie mit den vordefinierten Klassen aus der Dokumentation zur JSON-Formatierung einiges erreichen.