Neues für Entwickler in SharePoint 2013, Teil 2

Inhaltsverzeichnis

In SharePoint 2013 gibt es neben dem Cloud-App-Modell weitere Neuerungen für Entwickler auf Grundlage der Client-Techniken HTML5, JavaScript und CSS. Der Artikel verrät, wie man mit clientseitigem Rendering die Darstellung von Daten und Formularen anpasst, suchbasierte Anwendungen implementiert und Brandings und Themings in SharePoint 2013 anpasst.

Zusätzlich zu den im ersten Artikel beschriebenen Punkten ist das clientseitige Rendering für SharePoint-Entwickler neu. Ähnlich wie man mit XSLT-Transformationen bei SharePoint 2007 und 2010 die Ausgabe von Listenansichten, Data Views, Webparts et cetera serverseitig verändern kann, lässt sich in SharePoint 2013 mit einem Attribut "JS-Link" eine JavaScript-Datei verlinken, um zum Beispiel die Darstellung einer Listenansicht zu verändern, die dann clientseitig gemäß der JavaScript-Datei gerendert wird. Das funktioniert
nicht nur mit Listenansichten, sondern auch beispielsweise mit Listenformularen und bestimmten Webparts.

Neu ist das Prinzip nicht. Entwickler konnten schon in SharePoint 2007 in berechneten Spalten HTML-Anweisungen mit Metadaten verknüpfen und dann in Listenansichten unterhalb des Listen-Webparts ein weiteres Webpart einrichten, mit einem Stück jQuery-Code, das dafür sorgt, dass das generierte HTML der berechneten Spalte gerendert wird. Ein Beispiel für HTML-Code in einer berechneten Spalte sieht der Leser in Abbildung 1.

Auf der linken Seite steht der berechnete HTML-Code, auf der rechten die Ausgabe, die angezeigt wird, wenn man ein Stück JavaScript-Code aus dem folgenden Quellcode in einem Inhalts-Editor-Webpart unterhalb der Liste einfügt.

$(document).ready(function(){
$(".ms-vb2:contains('<DIV')").each(function(){
var tempDIV = document.createElement ("DIV");

tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
});
}); 

Was in SharePoint 2007 eine Bastelei ist, unterstützt SharePoint 2013 nativ: Das folgende Beispiel verdeutlicht, wie man etwa in einer SharePoint-2013-Liste abhängig vom Wert eines einfachen Auswahlfelds ein Bild anzeigen kann, das diesen Wert repräsentiert. Abbildung 2 zeigt die Ausgangsliste mit dem Auswahlfeld zum Projektstatus. Hier werden als mögliche Werte gemäß dem Ampelprinzip grün, gelb und rot angeboten. Da in einer Listenansicht der Projektstatus aber besser wahrzunehmen ist, wenn statt der Wörter ein Icon mit dieser Farbe verwendet wird, kann der Entwickler dazu per clientseitigem Rendering dynamisch Icons anzeigen.

Die folgenden Schritte sind dafür durchzuführen:

1. Erstellen einer Liste beziehungsweise einer Metadaten-Spalte. In Abbildung 2 ist das die Spalte ProjektStatus.
2. Erstellen der JavaScript-Datei, die mit der Listenansicht verlinkt wird.
3. Hochladen der Datei in die Masterpage-Galerie. Hier den Inhaltstyp "JavaScript-Anzeigevorlage" auswählen und wie in Abbildung 3 dargestellt befüllen.
4. In der Listenansicht in den Editiermodus der Seite gehen.
5. Die Eigenschaften des List-View-Webpart bearbeiten. Hier gibt es unter "Sonstiges" den Punkt "JS-Link". Den Pfad zur eben erstellten JavaScript-Datei einstellen. Dabei den Token ~site beziehungsweise ~sitecollection für den relativen Pfad zur Masterpage-Galerie verwenden.
6. Das Webpart und die Webseite speichern. Das Ergebnis soll gemäß der folgenden Codepassage wie in Abbildung 4 aussehen.

(function () {
    // Initialisieren der Variablen zum Überschreiben der Objekte
    var overrideCtx = {};
    overrideCtx.Templates = {};
        
    // Felddaten überschreiben
    overrideCtx.Templates.Fields = {
        // Projekt-Status = Interner Feldname.
        // View = Wenn man die Darstellung der Felder in einer 
        // Ansicht ändern möchte.
        // <div ... = Hier wird die neue HTML-Darstellung festgelegt.
        'ProjektStatus': { 'View' : 
             '<div><img src="http://susi.computacenter.de/SiteAssets
                   /<#=ctx.CurrentItem.ProjektStatus#>.png"></img></div>' }
    };
        
    // Registrieren der Änderung am Feld
    SPClientTemplates.TemplateManager.
             RegisterTemplateOverrides(overrideCtx);
})();

Wichtig ist, dass man den internen Feld- und nicht den Anzeigenamen angibt. Das vorstehende Beispiel verwendet ein Image-Element zur Bildanzeige. Dazu wird das src-Attribut dynamisch gesetzt, indem der Wert des ProjektStatus-Felds, etwa "rot", gleich dem Dateinamen des Icons ist – rot.png. Man könnte auch andere Darstellungsformen verwenden, beispielsweise den Hintergrund einfärben oder Ähnliches. Abbildung 4 zeigt das Ergebnis.