Sprunglinks
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.
Es gibt verschiedene Typen von Display Templates. Sie werden durch die Aufgaben die sie übernehmen unterschieden:
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:
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.
Dort öffnen wir den Ordner „Display Templates“ und dann den Ordner „Search“.
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.
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.
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
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:
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:
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.
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.
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.
