Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

JS Link: you've got the whole SharePoint in your hands

Teil1: JSLink: you've got the whole SharePoint in your hands (die­ser Artikel)
Teil2: JSLink: was man sonst noch wis­sen sollte
Teil3: JSLink – Problemfall Minimal Download Strategy (MDS)

… zumin­dest für den UI Bereich trifft das voll und ganz auf JS Link zu. Aber was ist die­ses JS Link über­haupt und wofür kann es ver­wen­det wer­den?

JS Link wurde zusam­men mit SharePoint 2013 vor­ge­stellt. Es ermög­licht das cli­ent­sei­tige Rendering von SharePoint Controls zu ver­än­dern, ohne in die Masterpage oder die Controls direkt eig­rei­fen zu müs­sen. Das ist ein rie­si­ger Vorteil gegen­über frü­he­ren SharePoint Versionen, bei denen noch mühe­voll mit Hilfe von Inhaltseditor Webparts oder JavaScript Dateien in der Masterpage, Ausgaben ange­passt wer­den muss­ten.

js1

Mittels JS Link kön­nen viele Arten von SharePoint Elementen gestylt wer­den.

  • Webparts
  • Felder in Newform, Editform etc.
  • Listen, Listansichten & Listenelemente

Im Beispiel (Bild oben) wurde die Spalte "Statusfarbe" ver­wen­det um den Nutzer einen Indikator für den Arbeitsstand einer Aufgabe zu geben. Technisch han­delt es sich dabei um eine Spalte des Typs "Auswahl". Zur Auswahl ste­hen dabei die Werte #red, #yel­low und #green. Dabei wurde die Spalte "Statusfarbe" so ange­passt, dass nicht die Werte ange­zeigt wer­den, statt­des­sen aber die schö­nere Ampel.

Wie wird denn jetzt eine Statusspalte in solch eine Ampel gewandelt?

Zu aller erst wer­den drei Bilder für die Ampelfarben benö­tigt. Diese kön­nen an einem belie­bi­gen Ort abge­legt wer­den, auf den spä­ter pro­blem­los zuge­grif­fen wer­den kann. In Frage kom­men dabei idea­ler­weise die Style Library, der Image Order oder eine belie­bige Dokumentenbibliothek.

Anschließend wird die JavaScript Datei erstellt, wel­che für das Rendering zustän­dig ist. Dafür kann das unten ste­hende Skript ver­wen­det wer­den. Das Prinzip ist rela­tiv sim­pel. Folgende Stellen müs­sen ange­passt wer­den:

  • fieldJsLinkOverride.Templates.Fields
    • hier wer­den alle Felder ange­ge­ben, wel­che durch ein benut­zer­de­fi­nier­tes Rendering ersetzt wer­den sol­len. Im Beispiel wird die Spalte mit dem inter­nen Namen "color", im View Mode, durch die Ausgaben der Methode "statusVisual.GetStatusFieldIcon" ersetzt. Hier kön­nen, kom­mage­trennt, alle Spalten durch eine Rendermethode über­schrie­ben wer­den.
  • statusVisual.GetStatusFieldIcon
    • In die­ser Methode wer­den alle Abhängikeiten geprüft und das mani­pu­lierte HTML zurück­ge­ge­ben. Das aktu­elle Element kann über ctx.CurrentItem aus­ge­le­sen wer­den. Der Wert des Feldes ver­birgt sich hin­ter ctx.CurrentItem.color. Je nach Wert (#red,#green,#yellow) kann dann die rich­tige Ampelfarbe zurück­ge­ge­ben wer­den.
var statusVisual = statusVisual || {};

statusVisual.CustomizeFieldRendering = function ()
{
    var fieldJsLinkOverride = {};
    fieldJsLinkOverride.Templates = {};

    fieldJsLinkOverride.Templates.Fields =
    {       
        'color': { 'View': statusVisual.GetStatusFieldIcon }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);
};

statusVisual.GetStatusFieldIcon = function (ctx) {
    var color = ctx.CurrentItem.color;
   
     if (color.indexOf("#red") != -1) {   
        return "<img src='/_layouts/15/images/red.gif' />";}
    
    if (color.indexOf("#yellow") != -1) {  
        return "<img src='/_layouts/15/images/yellow.gif' />";}

    if (color.indexOf("#green") != -1) {       
        return "<img src='/_layouts/15/images/green.gif' />";}

    return ctx.CurrentItem.color;
};

statusVisual.CustomizeFieldRendering();

Mit JS Link wurde der neue Inhaltstyp "JavaScript Anzeigevorlage" zusam­men ein­ge­führt. Die soeben erstellte JavaScript Datei muss, unter die­sem Inhaltstyp, in die Masterpage Galerie hoch­ge­la­den wer­den. Anschließend kön­nen ver­schie­dene Eigenschaften gesetzt wer­den, wel­che das Einsatzgebiet des Templates steu­ern "könn­ten".

  • Inhaltstyp: JavaScript-Anzeigevorlage
  • Zielsteuerelement-Typ: Ansicht
  • Eigenständig: Außer Kraft set­zen
  • Zielbereich: /
  • Ziellistebvorlagen-ID: 100 

In der aktu­el­len SharePoint Version sind diese Einstellungen (bis auf den Inhaltstyp) anschei­nend noch Dekoration. In mei­nen Tests funk­tio­nierte das modi­fi­zierte ren­dern, egal wel­che Einstellung aus­ge­wählt wurde.

js3

Nachdem die JS Datei hoch­ge­la­den wurde, muss sie unter Umständen noch frei­ge­ge­ben wer­den. Anschließend kann sie bereits ver­wen­det wer­den. Dazu ein­fach die Liste als Webpart (Listenansicht) in eine Seite ein­bin­den und in die Webpart Eigenschaften wech­seln. Unter dem Reiter "Verschiedene" befin­det sich die Einstellung für JS Link. In die Eingabebox kann dann nach fol­gen­dem Muster, die URL ein­ge­tra­gen wer­den:

~site/_catalogs/masterpage/trafficLights.js

js2

Nach Bestätigung der Einstellungen durch Ok, sollte die Ampel erschei­nen.

JS Link ist wohl eines der Highlights, der aktu­ell schon über ein Jahr alten SharePoint Version. Jeder, der viel mit SharePoint Listen und UI Anpassungen arbei­tet, sollte sich ernst­haft ein­mal näher mit den neuen Möglichkeiten beschäf­ti­gen, die JS Link mit­bringt.

Weitere Tipps und Tricks und neue Einsatzmöglichkeiten erfahrt ihr in unse­ren nächs­ten Blogposts.

Related Posts

1 Kommentar

Hallo Torsten,

ich habe mich mitt­ler­weile auch mei­nem zwei­ten Beitrag über JSLink und einer Kontaktliste gewid­met. Vielleicht inter­es­sant und es hilf dem ein oder ande­ren… http://www.dbuschke.de/blog/darstellung-einer-kontaktliste-anpassen-mit-jslink/

Gruß Daniel

Comments are closed.

Pin It on Pinterest