SharePoint 2013 und JSLink – Möglichkeiten anhand praktischer Beispiele

Wer SharePoint 2013 nutzt (unabhängig ob Foundation oder Server) kann mithilfe von kleinen JavaScripts das Erscheinungsbild von Listen, Inhaltstypen, Formularen, Ansichten und ListView-Webparts anpassen. Während man bis einschließlich SharePoint 2010 die zuvor genannten Dinge mühsam mithilfe vom SharePoint Designer und XSLT anpassen musste, kann die neue Funktion „JS-Link“ verwendet werden.

Nachfolgend möchte ich anhand von drei praktischen Beispielen erläutern, welche Möglichkeiten sich durch die neue Funktion ergeben.

Download des Beitrags als WORD-Datei mit Code.

Beispiel 1 – Aufgabenstatus

Anforderung der Fachabteilung: In einer Aufgabenliste befinden sich viele Aufgaben zu einem Projekt.

Der angegebene Aufgabenstatus soll für die Ansicht „Alle Aufgaben“ farblich hervorgehoben werden:

Umsetzung mittels JS-Link

Das JavaScript hat folgenden Aufbau:

… CODE ….

Jetzt noch das Script lokal speichern (Dateiendung .js) und in eine Bibliothek der Site hochladen. In meinem Beispiel verwende ich dazu die vorhandene Bibliothek Websiteobjekte mit einem separaten Ordner „JSLink“.

Implementierung JS-Link
In der jeweiligen Ansicht oder innerhalb einer Webpart-Seite kann das Script eingefügt werden. Dazu muss die Seite bearbeitet werden:

In den Webpart-Eigenschaften im Bereich „Verschiedenes“ ist eine Textbox mit der Beschriftung „JS-Link“ zu finden:

Im Feld JS-Link kann der Pfad zum Script hinterlegt werden:
Site-relativ: ~site/SiteAssets/JSLink/AufgabenStatus.js

Ergebnis

Die Darstellung erfolgt fortan gemäß hinterlegtem Script.

Beispiel 2 – Aufgabenfortschritt

Anforderung der Fachabteilung:
In einer Aufgabenliste befinden sich viele Aufgaben zu einem Projekt.

Neben der Status-Visualisierung soll ebenso der prozentuale Aufgabenfortschritt deutlicher visualisiert werden. Der Fachabteilung schwebt eine Art Fortschrittsbalken zur Visualisierung vor.
Umsetzung mittels JS-Link
Das JavaScript hat folgenden Aufbau:

… CODE ….

Script erneut lokal speichern, in eine Bibliothek der Site hochladen und Link zum Script in den Webpart-Eigenschaften hinterlegen.

Ergebnis

Je nach hinterlegtem Fertigstellungsgrad wird der Balken prozentual gefüllt.

Beispiel 3 – Dokumentenversion

Anforderung der Fachabteilung:
In einer Dokumentenbibliothek mit aktivierter Versionshistorie und Inhaltsgenehmigung befinden sich Dokumente mit unterschiedlichen Versionsständen.

Haupt- und Nebenversionen sollen sich deutlicher voneinander unterscheiden.
Umsetzung mittels JS-Link

Das JavaScript hat folgenden Aufbau:

… CODE …

Script erneut lokal speichern, in eine Bibliothek der Site hochladen und Link zum Script in den Webpart-Eigenschaften hinterlegen.

Ergebnis

Wissenwertes über JSLink:

Kann ich mehrere Scripts im Feld JSLink hinterlegen?

Ja, die Pfade zum Script können mit einem „|“ separiert werden.
Beispiel:
~site/SiteAssets/JSLink/Script1.js|~site/SiteAssets/JSLink/Script2.js

Welche Pfadangaben werden im Feld „JS-Link“ supportet?
JS-Link unterstützt die folgenden Pfadangaben:

• ~site
• ~sitecollection
• ~layouts
• ~siteLayouts
• ~siteCollectionLayouts

Praktisch: Wenn “~layouts” verwendet wird, wird anhand des aktuellen Kompatibilitätslevels entweder zum “_layouts/14” oder “_layouts/15” verlinkt.

Gibt es eine Möglichkeit, das Script mit SharePoint SOD (ScriptOnDemand) zu laden?

Auch bei JS-Link kann ich angeben, ob ein Script partiell geladen wird ScriptOnDemand.
Die Pfadangabe erfolgt dann wie folgt:
~site/SiteAssets/JSLink/Script1.js(d)|~site/SiteAssets/JSLink/Script2.js(d)

Funktioniert JS-Link ebenso in der Aufgaben-QuickEdit?

Ja! Das wird die Fachabteilung freuen.

Gibt es auch andere Anzeigemöglichkeiten?

In meinen Beispielen verwende ich den Anzeigemodus „View“ – die Darstellung in einer Ansicht mit mehreren Elementen. Neben „View“ gibt es noch die folgenden Möglichkeiten:

• NewForm
  Manipulationen innerhalb des Formulares zur Erstellung neuer Listenelemente
  Mögliche Szenarien: Validierung von Inhalten, Felder ausblenden oder farblich Hervorheben
• EditForm
  Manipulationen innerhalb des Formulares zur Änderung eines vorhandenen Listenelementes / der Eigenschaften eines Dokumentes
  Mögliche Szenarien: Validierung von Inhalten, Felder ausblenden oder farblich Hervorheben
• DisplayForm
  Manipulationen innerhalb der Darstellung eines Listenelementes / Eigenschaften eines Dokumentes

Mögliche Szenarien:

Wenn mehrere dieser Möglichkeiten verwendet werden sollen, kann das wie folgt im Script hinterlegt werden:

ProzentAbgeschlossenContext.Templates.Fields = {
"PercentComplete": {
"View": ProzentAbgeschlossenViewTemplate,
"DisplayForm": ProzentAbgeschlossenViewTemplate,
"NewForm": ProzentAbgeschlossenNewFormTemplate,
"EditForm": ProzentAbgeschlossenEditFormTemplate
}
};

Je nach Anzeige kann ein anderes Template geladen werden.
Vorteil: Es kann jeweils die gleiche Script-Datei in den Webpart-Eigenschaften hinterlegt werden.