Webparts für Inhaltssuche–Teil 3: Darstellung anpassen mit Displaytemplates
Dritter Beitrag zum Webpart für Inhaltssuche in SharePoint 2013: Nach dem Einstieg in die Konfiguration des Webparts und dem Gestalten der Suchabfrage geht es jetzt darum, wie wir die Suchanfrage optisch aufpeppen können. Prinzipiell stehen dafür bereits Vorlagen bereit, doch diese sind abgesehen von den Funktionen für Bilder eher technisch orientiert. Wir zeigen im Folgenden ein einfaches Anwendungsbeispiel, das das Prinzip vermittelt und schnell zur Umsetzung eigener Lösungen verhilft.
Serie ‚Webpart Inhaltssuche‘
- Grundlagen ‚SharePoint-Webpart für Inhaltssuche‘ – Teil 1: Übersicht
- Webpart für Inhaltssuche – Teil 2: Abfragen erstellen mit KQL
- Webpart für Inhaltssuche – Teil 3: Darstellung Anpassen mit Displaytemplates
- Webpart für Inhaltssuche – Teil 4: Vordefinierte Suchen erstellen
Die Vorlagen heißen Displaytemplates (deutsch: Anzeigevorlagen) und von diesen gibt es eine ganze Menge in SharePoint. Displaytemplates legen fest, wie einerseits die Anzeige der Suchergebnisse mit Tabellen, Listen oder Slideshows aussieht, sie steuern aber auch das Aussehen der einzelnen Elemente, also, welche Metadaten angezeigt werden oder wie groß ein Bild ist. Ebenso werden Anzeigevorlagen dafür genutzt, um die Vorschau beim Überfahren eines Elementes (Hover) darzustellen.
Für unser Beispiel passen wir eine bestehende Vorlage an und ergänzen diese. Im ersten Teil haben wir das Displaytemplate ‚Two Lines‘ verwendet, und dort zusätzlich das Metadatum Author eingefügt. Jetzt möchten wir erreichen, dass vor dem Metadatum der Begriff ‚Autor‘ steht. Folgende Schritte sind dafür notwendig:
1. Zunächst das vorhandene Displaytemplate kopieren, um in der Kopie die Anpassung vorzunehmen. Zu finden sind die Displaytemplates im Pfad http:///_catalogs/masterpage/Display%20Templates. Es kann sein, dass dieser Pfad beziehungsweise sein Inhalt nicht immer im Browser sichtbar sind. In diesem Fall muss das SharePoint Publishingfeature aktiviert werden.
2. Um zum Pfad zu navigieren, gehen Sie zu den Site Settings (Websiteeinstellungen) und dann zu Master pages and page layouts im Abschnitt Web Designer Galleries. Auch diesen Link finden Sie erst nach der Aktivierung des Features. Sie sehen eine Bibliothek, in welcher alle Pagelayouts und Masterpages liegen, sowie einige Ordner. Suchen Sie den Ordner Display Templates und öffnen Sie diesen. Die Displaytemplates für den Webpart für Inhaltssuche liegen im Unterordner Content Web Parts. Dort finden Sie jetzt alle Displaytemplates , welche Sie auch im Webpart auswählen können.
3. Um die Arbeit mit den Vorlagen zu vereinfachen, öffnen Sie die Bibliothek im Windows Explorer. Klicken Sie dazu auf das Menüband Library und im Abschnitt Connect & Export auf Open with Explorer. Zusätzlich können Sie dem Pfad auch einen Laufwerkbuchstabe zuweisen. Das Bearbeiten geht prinzipiell mit jedem beliebigen HTML-Designer, denn die Vorlagen bestehen nur aus HTML und JavaScript. Beide zusammen bilden dann jeweils ein Displaytemplate.
4. Angepasst werden immer nur die HTML-Dateien, niemals die JS-Dateien. Die JS-Dateien werden von SharePoint automatisch erzeugt wenn eine HTML Datei gespeichert wird, sie sind für 
die Bearbeitung tabu. Suchen Sie die Datei Item_TwoLines.html und kopieren Sie diese zu Item_TwoLines_with_Author.html. Sie werden sehen, dass unmittelbar danach auch die entsprechende JS Datei erstellt wird. In unserem Fall öffnen wir die kopierte HTML-Datei in Notepad++, aber natürlich geht auch jede beliebige anderer Editor. 
5. Es lohnt sich, die Datei einmal in Ruhe zu inspizieren. Sie zeigt viele Möglichkeiten auf, was sich mit Displaytemplates alles realisieren lässt. Wir bieten hier nur einen kleinen Abriss, um zu zeigen, wie man ein eigenes Displaytemplate modifizieren sollte. Als erstes ändern wir den Titel in Zeile drei. Unter diesen Namen können wir nämlich später das Displaytemplate im Webpart auswählen. Unschön wäre es, wenn wir zwei Anzeigevorlagen mit dem selben Namen vorfinden würden. Unseres nennen wir ‚TwoLines with Author‘.
&lt;html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"&gt; &lt;head&gt; &lt;title&gt;TwoLines with Author&lt;/title&gt;<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
6. Als nächstes interessiert uns die Zeile acht. Hier legen Sie fest, mit welchen verwalteten Eigenschaften Sie im Displaytemplate arbeiten möchten. Dabei gibt es immer ein Wertepaar, interne Bezeichnung der Eigenschaft und Anzeigename. Da in unseren Fall allerdings die Werte über Eingabefelder (Line1 und und Line2) übergeben werden, brauchen wir die Eigenschaften hier nicht extra zu benennen.
7. Es folgt einiger JavaScript Code, welcher in Token
eingeschlossen ist. Die eigentliche Darstellung erfolgt erst ab Zeile 63. In Zeile 73 steht die Darstellung der zweiten Zeile.
[code language=“javascript“]&lt;div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_"&gt;_#= line2 =#_&lt;/div&gt;
Wir können jetzt erkennen, dass hier sowohl reines HTML als auch JavaScript vermischt wird. Der JavaScript Code steht wieder in Token. Der Wert der Eigenschaft steht vor dem letzten Div in _#= line2 =#_ . Also ändere ich die Zeile folgendermaßen indem ich direkt davor Author schreibe:
Orginal
&lt;div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_"&gt;_#= line2 =#_&lt;/div&gt;
Mit Änderung
&lt;div class="cbs-Line2 ms-noWrap" title="_#= $htmlEncode(line2.defaultValueRenderer(line2)) =#_" id="_#= line2Id =#_"&gt;Author: _#= line2 =#_&lt;/div&gt;
Speichern Sie jetzt die Änderung.
8. Achtung: Damit alle Benutzer die Änderung später sehen, muss das geänderte Displaytemplate noch veröffentlicht werden. Gehen Sie im Browser deshalb zur Bibliothek, markieren Sie die Datei und wählen Sie aus der Menüleiste Publish. Dieser Vorgang ist jedes Mal erforderlich, wenn Sie ein fertiges Displaytemplate zur Verfügung stellen wollen. Veröffentlichen Sie nur die HTML-Datei, um die JS-Datei kümmert sich SharePoint alleine. 
9. Damit Sie das neue Displaytemplate auswählen können, müssen Sie die Seite neu laden, die den Webpart für Inhaltssuche enthält, und diesen wieder zur Bearbeitung auswählen.
10. Unter Property Mappings können wir das Metadatum Author auswählen, welches dann auch in der zweiten Zeile zusammen mit dem Suffix angezeigt wird. Natürlich wird jetzt immer der Präfix Author angezeigt, aber als Beispiel soll es genügen.
Fazit
Das gezeigte soll nur als Beispiel dienen. Wenn man alles konsequent zu Ende denkt, kann auf diesem Weg eine Anwendung entstehen, wie sie beispielsweise 
Maggi für Rezepte erstellt hat (https://www.maggi.de/rezepte). Die Rezepte arbeiten mit der Suche, die Präsentation der Suchergebnisse erfolgt mit Displaytemplates. .
Displaytemplates sind das Mittel zur Wahl zur Präsentation von Inhalten in SharePoint. Auch, aber nicht nur deswegen sollte man überlegen, mehr Inhalte über die Suche zu erschließen und auf Drilldown- Strukturen weitgehend zu verzichten.
- Serie Workflows mit SharePoint Designer (Teil 5): Genehmigungen mit mehr als zwei Auswahlmöglichkeiten erstellen - 10. Oktober 2018
- Serie: Workflows mit SharePoint Designer (Teil 4): Subwebs anlegen mit Webservices und Designer Workflows - 31. Juli 2018
- Serie: Workflows mit dem SharePoint Designer (Teil 3): So ermittelt man den höchsten Wert aus einer Spalte - 28. Mai 2018
Hallo Herr Thiemer,
Gibt es eigentlich auch die Möglichkeit Suchergebnisse mehrspaltig anzeigen zu lassen? Ich suche schon sehr lange nach Beispielen konnte aber leider bisher noch nichts finden… haben sie eine Idee, die mir weiterhelfen könnte? Ich danke Ihnen für die Mühe!
Viele Grüße
Axel otto
Hallo Herr Otto,
vielen Dank für den Kommentar. Und ich habe eine Idee. Elio Struyf hat dazu was geschrieben und auch gleich noch den Code veröffentlicht. Viel Spaß damit!
HowTo: https://www.eliostruyf.com/table-layout-display-template-with-managed-property-sorting/
Code auf GitHub: https://github.com/SPCSR/DisplayTemplates/tree/master/Search%20Display%20Templates/Table%20Layout%20with%20Sorting%20Templates%20(CSWP)
Viele Grüße
Nico Thiemer