SharePoint Display Templates – was soll denn das sein?

Display Templates in SharePoint werden in Search Web Parts verwendet. Diese Web Parts sind dazu gemacht Suchabfragen auszuführen und die Resultate anzuzeigen. Sie steuern welche Resultate, welche Felder und welche Werte angezeigt und wie sie dargestellt werden sollen. Dabei besteht jedes Display Template aus zwei Dateien. Eine HTML Version der Datei und eine JavaScript Version. Das HTML ist jenes, welches man selber anpassen kann. Die JavaScript Version wird auf Basis der HTML Datei durch SharePoint selbst erstellt und wird dann von SharePoint für die Darstellung verwendet.

Template Typen

Es gibt verschiedene Typen von Display Templates. Sie werden durch die Aufgaben die sie übernehmen unterschieden:

b780c116-22b4-4138-9da9-a9026f32f8c5

Quelle: Microsoft

Control Template

Die Control Templates definieren die allgemeine Struktur des Suchresultat Web Parts. Sie können auch Struktur Elemente wie das Paging oder Links beeinflussen.

Item Template

Die Item Templates definieren wie einzelne Suchresultate dargestellt werden, darunter auch Bilder, Text, Videos oder andere Inhalte. Aber im allgemeinen können beliebige Inhalte aus den Suchresultaten angezeigt werden.

Hover Panel Template

Das Hover Panel erscheint sobald die Maus über ein Suchresultat fährt und zeigt oft eine detaillierte Ansicht über das Element. Bei Office Dokumenten ist sogar eine Vorschau des Dokuments möglich.

So sehen die Suchresultate ohne Anpassung aus:

OhneDisp

Und so können sie mit Anpassung aussehen:

MitDisp

Display Template erstellen – Step by Step

1. Start

Wichtig: Damit man diese Funktion verwenden kann muss vor dem Start das Feature „SharePoint Server-Veröffentlichungsinfrastruktur“ aktiviert werden.

Um ein neues Display Template zu erstellen ist es am einfachsten das neue Template auf einem bestehenden aufzubauen. Dazu müssen wir als erstes in die betroffene Gestaltungsvorlagen Bibliothek navigieren.

Wir begeben uns dazu in die Websiteeinstellungen und dort zu Gestaltungsvorlagen.

disptemplate1-e1509445344934.png

Dort öffnen wir den Ordner „Display Templates“ und dann den Ordner „Search“.

disptemplate2-e1509445447747.png

disptemplate3-e1509445476583.png

Dort sehen wir dann auch schon die bestehenden Display Templates. Die Template Typen sind hier an ihrem Dateinamen zu erkennen. Für die Control Panel Templates wird am Anfang „Control_“ verwendet. Die Hover Panel Templates sind mit „HoverPanel“ markiert und die Item Templates beginnen mit „Item_“ im Dateinamen.

DispTemplate4

2. Felder bearbeiten

Damit wir die gewünschten Suchresultate anzeigen können, müssen wir die benötigten Felder verknüpfen. Dafür gibt es im HTML Header des Display Templates ein eigenes Property namens ManagedPropertyMapping. Dort sind alle Felder eingetragen die bei der Suchanfrage zurück gegeben werden sollen.

'Title':'Title','Path':'Path','Description':'Description',

Es ist auch wichtig darauf zu achten, dass die gewünschten Felder korrekt in Search konfiguriert wurden bzw. auch existieren. Die Felder müssen suchbar sein damit sie als Teil der Suchresultate abgerufen werden können. Anleitung: Manage the search schema in SharePoint Server 2013

 3. Anzeigen

Um Suchresultate anzuzeigen, müssen diese in ein HTML integriert werden. Zusätzlich wird auch JavaScript benötigt um allenfalls Werte aus den Resultaten auszulesen. Diese sind im Body des Display Template erfasst.

Hier sehen wir einen Ausschnitt des Body:

DisplayTempalteBody

Man erkennt den JavaScript und den HTML Teil sehr gut. Das JavaScript ist in der Display Template Vorlage noch auskommentiert, wird aber dann von SharePoint korrekt übersetzt.

JavaScript:
Für jedes Element wird ein JavaScript durchlaufen und stellt uns die Suchresultate zur Verfügung. Diese sind in einer JavaScript Variable namens „ctx“ gespeichert.

Der JavaScript Block sieht dann wie folgt aus:

if(!$isNull(ctx.CurrentItem) && !$isNull(ctx.ClientControl))
{
    var id = ctx.ClientControl.get_nextUniqueId();
    var itemId = id + Srch.U.Ids.item;

    $setResultItem(itemId, ctx.CurrentItem);
    var title = null;
    if (!$isEmptyString(ctx.CurrentItem.Title)) 
    {
        title = $htmlEncode(Srch.U.truncateEnd(ctx.CurrentItem.Title, Srch.U.titleTruncationLength));
    }

    var url = null;
    if (!$isEmptyString(ctx.CurrentItem.Url))
    {
        url = $htmlEncode(Srch.U.truncateUrl(ctx.CurrentItem.Url, Srch.U.pathTruncationLength));
    }

    var isVBB = ctx.CurrentItem.IsVisualBestBet;

Will man dann die Feldwerte auslesen, kann man wie folgt darauf zugreifen:

var title = $getItemValue(ctx, "Title");
Danach muss noch dafür gesorgt werden dass die Werte auch korrekt im HTML integriert werden. Dazu muss eine vorgeschriebene Notation eingehalten werden damit JavaScript und JavaScript Variablen im HTML korrekt integriert werden. Diese beginnt mit den Zeichen „_#=“ und endet mit „=#_“. So können auch Variablen ins HTML einfügt werden. Entweder direkt als Anzeige oder auch als Attribute.

4. Upload

Wenn alle gewünschten Anpassungen gemacht wurden, kann die Datei wieder in SharePoint hochgeladen und veröffentlicht werden. Wichtig dabei ist, dass man die Datei unter einem neuen Namen speichert damit die Standard Display Templates nicht verändert werden.

5. Konfigurieren

Nach dem wir erfolgreich ein Display Template erstellt haben müssen wir nur noch das gewünschte Search Web Part konfigurieren und unser Ergebnis testen.
Unter den Einstellungen für das Search Web Part können wir angeben, welches Display Template angewendet werden soll. Das können wir sowohl für Control Templates wie auch für Item Templates. Dazu müssen wir in der unten markierten Auswahl unsere Display Templates anwenden.

SearchWebPartConfig

Frederic Lehmann
Software Engineer Solutions

0 Responses to “SharePoint Display Templates – was soll denn das sein?”



  1. Schreibe einen Kommentar

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s





%d Bloggern gefällt das: