© Kellie L. Folkerts/Shutterstock.com
Client Rendering in SharePoint 2013

XSLT adé!


SharePoint 2013 setzt in vielen Bereichen der Darstellung von Inhalten und Funktionen einen deutlichen Schwerpunkt auf den Client (bzw. Browser). Wer sich früher mit vielen Zeilen unübersichtlicher XSL-Transformationen und dem teils aufwändigen Deployment serverseitiger Komponenten konfrontiert sah, wird am neuen und schlankeren Ansatz des „Client Side Rendering“ seine Freude haben. Im folgenden Artikel erfahren Sie, wie Sie das neue Feature für sich nutzen können – und alles, was Sie dazu brauchen, ist ein alter Freund namens JavaScript.

Die Vorgängerversionen von SharePoint 2013 boten nativ fast nur serverseitige Möglichkeiten, das Rendern von bestimmten Seitenelementen zu steuern. Stellen Sie sich folgendes Szenario in Form einer simplen Anforderung für eine Aufgabenliste vor: Das Fälligkeitsdatum einer Aufgabe soll in roter Schrift dargestellt werden, wenn diese überfällig ist. Unter SharePoint 2010 oder einer der Vorversionen musste für dieses einfache Beispiel XSL-Code mit dem SharePoint Designer generiert oder sogar ein benutzerdefiniertes Feld programmiert werden – alles keine schlanken Lösungen. Und damit haben wir dann noch nicht über Deployment-Aufgaben gesprochen, die dann unter Umständen administrative Arbeit auf den SharePoint Servern erforderten.

Mit dem Einzug von jQuery schien hierfür eine weitaus einfachere Alternative gefunden zu sein. Nur mit ein paar Zeilen JavaScript war es nun möglich, solche Anforderungen ohne den ganzen Overhead umzusetzen und eine clientseitige Lösung zu implementieren – keine Notwendigkeit für eine Farm-Solution oder schwer überschaubares XSLT mehr! Einen Haken hatte dieser Lösungsansatz jedoch: Man war stets gezwungen, das Laden der Seite abzuwarten, da man nur über das fertig gerenderte HTML die Elemente der Seite manipulieren konnte. Die Folge daraus war immer ein kurzes „Flackern“ der Seite, bei dem das alte Rendering dann mit dem benutzerdefinierten Inhalt überschrieben wurde. Zudem waren diese ersten Ansätze eines so genannten „Client Side Rendering“ niemals so in SharePoint vorgesehen.

JSLink

SharePoint 2013 nimmt sich dieses Themas an und unterstützt nun ein clientseitiges Rendern mittels JavaScript. Dazu wurden zahlreiche SharePoint-Komponenten um eine neue Eigenschaft erweitert: JSLink.

JSLink ist – wie der Name vielleicht schon vermuten lässt – nichts weiter als ein Link zu einer JavaScript-Datei. Wird eine SharePoint-Komponente (z. B. ein Ansichts-Web-Part) auf einer beliebigen Seite verwendet, wird das von ihm per JSLink referenzierte JavaScript automatisch eingebunden – und ausgeführt, bevor die Seite gerendert wird. JSLink wird von den folgenden SharePoint-Komponenten verwendet:

  • Felder und Inhaltstypen
  • Formulare und Ansichten
  • Bestimmte Standard-Web-Parts (ListForm, TilesView, BaseXsltList und alle hiervon erbenden wie XsltListView)

JSLink lässt sich über drei Wege anpassen. Je nach Art der SharePoint-Komponente hat die JS-Erweiterung auch nur einen bestimmten Gültigkeitsbereich, in dem sie angewendet wird. Die Web Parts bieten erwartungsgemäß eine Web-Part-Eigenschaft an, die direkt im Toolpane unter der Kategorie „Verschiedenes“ gesetzt werden kann (Abb. 1). Für minimale Anpassungen bestimmter Listenansichten ein denkbar einfacher Weg. Die Anpassung ist dann auch nur für diese eine Instanz des Web Parts bzw. nur auf der jeweilige Seite gültig.

manuelihlau_clientrendering_1.png

Abbildung 1: Die neue Eigenschaft „JS-Link“ des Listenansicht-Web-Parts

Für alle anderen Komponenten ist diese Eigenschaft nur über das Objektmodell überschreibbar. Da diese Anpassungen einen Einfluss auf die gesamte Webseite oder gar die gesamte Webseitensammlung hat (z. B. im Falle eines Felds also auf alle Formulare und Listen, die das Feld verwenden), ist das eine nachvollziehbare Einschränkung. Listing 1 veranschaulicht, wie auf die JSLink-Eigenschaft eines Felds zugegriffen werden kann.

var rootWeb = SPContext.Current.Site.RootWeb;
var myField = rootWeb.Fields.GetField("MyCustomField");
myField.JSLink = "~site/Style Library/mycustomfield.js";
myField.Update(true);

Listing 1: Zugriff auf die Property JSLink mittels Servercode

Es gibt auch noch die Möglichkeit, die Eigenschaft deklarativ festzulegen. Voraussetzung hierfür ist, dass die jeweilige Komponente über ein Element-Manifest deklariert und als Feature bereitgestellt wird. In diesem Fall stellt das XML des Elements das neue Attribut JSLink zur Verfügung (Listing 2).

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field ID="{51aa12e7-D017-141C-0711-7De71d111711}"
Name="MyCustomField"
StaticName="MyCustomField"
DisplayName="My custom field"
Type="Text"
JSLink="mycustomfield.js"...

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