© Kellie L. Folkerts/Shutterstock.com
Ausgabeanpassungen direkt im Browser

Clientseitiges Rendering


Seit SharePoint 2013 steht eine weitere Möglichkeit bereit, um auch clientseitig auf die Datenausgabe Einfluss zu nehmen. Der neue Mechanismus namens „Clientseitiges Rendering“ (engl. Client-Side Rendering, kurz: CSR) ermöglicht die Anpassung der Ausgabe direkt im Browser über JavaScript.

Um Ausgabevorlagen für die Darstellung von Daten in Listen und Formularen nach den eigenen Bedürfnissen zu erstellen, benötigt man entweder serverseitigen Code oder setzt dies seit Version 2013 clientseitig um. Da mittlerweile die Einbringung serverseitigen Codes in SharePoint in bestimmten Szenarien nicht mehr möglich ist, wurde das Konzept des clientseitigen Renderings eingeführt, um die Datendarstellung anpassen zu können. Um den Unterschied der beiden Möglichkeiten zu verdeutlichen, stellt Abbildung 1 die beiden Verfahren schematisch gegenüber. Im oberen Bereich ist die klassische serverseitige Generierung der Ausgabe dargestellt. Wie hieran erkennbar ist, fordert der Client Daten an (Request) und bekommt diese direkt im HTML zurück. Auf der Serverseite stehen für die Beeinflussung des erstellten HTML verschiedene Möglichkeiten wie XSLT oder eigener Code zur Verfügung. Von Nachteil in dieser Variante ist jedoch, dass die Rückgabe des Aufrufs eine Vermischung zwischen Präsentation und Daten darstellt. Wünschenswert wäre, dass die Anfrage nur reine Daten zurückliefert. Genau das leistet nun der clientseitige Rendering-Mechanismus, wie es die untere Darstellung in Abbildung 1 verdeutlicht. Bei einer Anfrage (Request) antwortet der Server lediglich mit einem Datenpaket in Form von JSON. Für die Aufbereitung und Darstellung der Daten ist dann der Client zuständig.

zhou_kolumne_1.jpg

Abb. 1: Serverseitige vs. clientseitige Ausgabe

zhou_kolumne_2.jpg

Abb. 2: Mögliche Bereiche für eine clientseitige Anpassung

Flexibler Einsatz der Vorlagen

Der clientseitige Mechanismus kann für verschiedene SharePoint-Elemente zum Einsatz kommen. So können Ausgabevorlagen bei Listen, Formularen und bei der Ausgabe von Suchresultaten verwendet werden. Abbildung 2 zeigt beispielhaft die verschiedenen Bereiche einer Listenansicht, die durch clientseitige Vorlagen angepasst werden können. Wie hier erkennbar ist, können alle Bereiche über Vorlagen beeinflusst werden. Um nun einen ersten Eindruck davon zu bekommen, wie eigene Ausgabevorlagen zu definieren sind, wird in einem ersten Beispiel die Ausgabe einer Listenspalte innerhalb einer Listenansicht verändert.

zhou_kolumne_3.jpg

Abb. 3: Ergebnis der Layoutanpassung für das Feld „Titel“

Abbildung 3 zeigt den Endzustand der Anpassung. In Listing 1 ist das zugehörige JavaScript abgebildet. Zunächst wird hier ein JavaScript-Objekt namens templateCtx definiert. Dieses wird um die Objekteigenschaft Templates und Templates. Fields erweitert. Über die Eigenschaft Templates.Fields kann nun festgelegt werden, wie einzelne Spalten ausgegeben werden sollen. Das über die Eigenschaft Fields definierte Objekt erwartet als Schlüssel den Namen des Felds aus der Liste, das um eine spezielle Ausgabevorlage erweitert werden soll.

(function () {
var templateCtx = {};
templateCtx.Templates = {};
templateCtx.Templates.Fields = {
'Title': { 'View': renderTitle }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(templateCtx);
function renderTitle(ctx) {
return "<h1 style=\"color: red;\" >" + ctx.CurrentItem.Title + "</h1>";
}
})();

Listing 1: Eine erste einfache Ausgabevorlage

Für die Felder kann zusätzlich für jede Ausgabemöglichkeit eine JavaScript-Funktion angegeben werden, die das spezielle HTML für die Darstellung generiert. In diesem Beispiel soll die Ausgabe für die Listendarstellung angepasst werden, daher wird hier für die Darstellungsart View eine JavaScript-Funktion angegeben. Die JavaScript-Funktion renderTitle ist für die Generierung des HTML zuständig. Diese Funktion erhält über einen Parameter Zugriff auf alle relevanten Informationen. Die wohl wichtigste Eigenschaft des übergebenen Objekts ist CurrentItem. Hierüber können alle Felder des aktuellen Listeneintrags abgerufen werden. Zudem können hierüber leicht die aktuellen Werte des Listeneintrags abgerufen werden. Das so vorbereitete JavaScript-Objekt templateCtx muss nun nur noch vom so genannten TemplateManager registriert werden, damit es bei der Listenausgabe auch berücksichtigt wird. Steht das JavaScript in Listing 1 bereit, stellt sich natürlich schnell die Frage, wie es mit der Liste verknüpft werden kann. Dieses wird im Folgenden beantwortet.

CSR installieren und verwenden

Im ersten kleinen Einstiegsbeispiel aus Listing 1 wurde die Darstellung der Spalte „Titel“ angepasst. Um dieses Script in SharePoint testen zu können, gibt es mehrere Möglichkeiten. Die einfachste und für erste Entwicklungsschritte schnellste Variante besteht darin, die JavaScript-Datei innerhalb des SharePoint-LAYOUTS-Verzeichnisses innerhalb eines Unterordners abzulegen. Danach kann diese Datei über die JS-Link-Eigenschaft des Listenansichts-Web-Parts referenziert werden. Dazu ist wie folgt vorzugehen:

  1. Seite mit der gewünschten Liste im Browser aufrufen
  2. Seite in den Bearbeitungsmodus schalten
  3. Die WebPart-Eigenschaften der Liste öffnen
  4. Der URL zur JavaScript-Datei ist innerhalb der Eigenschaft JS-Link einzutragen.
  5. Eigenschaften speichern und Seite speichern

Ist der URL korrekt eingetragen worden, sollte nun der Titel gemäß definiertem Layout dargestellt werden. Geschieht dies noch nicht, sollte zunächst geprüft werden, ob die Datei geladen wurde und keine JavaScript-Fehler auftraten. Diese Art der Einbindung eignet sich besonders gut für die Entwicklung eigener Ausgabevorlagen. Für die spätere Bereitstellung innerhalb einer produktiven Umgebung existieren weiterhin die folgenden Möglichkeiten:

  • Anlage einer eigenen deklarativen Felddefinition
  • Setzen der Feldeigenschaft JSLink per serverseitigem Code
  • Aktualisierung über PowerShell (Feld oder WebPart)
  • Anlage eines neuen Feldsteuerelements

Werden im Zuge einer SharePoint-Lösung eigene Felder deklarativ erstellt, kann bei der XML-Felddefinition direkt der Link zu einer CSR-JavaScript-Datei angegeben werden. Listing 2 zeigt dazu ein entsprechendes Beispiel. Sind alle Felder bereits installiert, kann auch die JSLink-Eigenschaft über das SharePoint-Objektmodell gesetzt werden. Listing 3 zeigt dazu ein entsprechendes Beispiel. Weiterhin kann diese Eigenschaft auch über PowerShell gesetzt werden (Listing 4). Sollen bestehende Web Parts auf Seiten um die JSLink-Eigenschaft aktualisiert werden, bietet sich auch hier der Weg über PowerShell an. Anstatt alle betroffenen Web Parts manuell zu aktualisieren, kann PowerShell aus Listing 5 zur Automatisierung herangezogen werden.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Field ID="{...}" Name="Interne Prüfung"
DisplayName="Geben Sie das Ergebnis der Überprüfung ein."
Type="Text" Required="FALSE" Group="Legal"
JSLink="/_layouts/15/[custom-solution]/csr-script.js">
</Field>
</Elements>

Listing 2: Verlinkung der JavaScript Datei über das JSLink-Attribut

using (SPSite site = new SPSite("[PORTAL URL]"))
{
SPWeb web = site.RootWeb;
SPField fldIComment = web.Fields["InternalComment"];
fldIComment.JSLink = ""/_layouts/15/[custom-solution]/csr-script.js ";
fldIComment.Update(true);
}

Listing 3: Programmatische Aktualisierung der JSLink-Eigenschaft

$web = Get-SPWeb [PORTAL URL]
$field = $web.Fields["InternalComment"]
$field.JSLink = "/_layouts/15/[custom-solution]/csr-script.js";
$field.Update(...

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