Von A bis Z: Erstellung eines Display Templates für die SharePoint Suche um die Eigenschaften eines Dokuments sichtbar zu machen

Anzeigevorlagen (Display Templates) sind Vorlagen, die in WebParts verwendet werden können um Suchtreffer individuell darzustellen (siehe auch Einführung Anzeigevorlagen in der MSDN).

In diesem Artikel werde ich zeigen, wie eine Anzeigevorlage aufgebaut ist, wozu man sie braucht und wie man sie erweitern/anpassen kann.

Wozu braucht man Anzeigevorlagen?

Nicht jeder Suchtreffer ist gleich – ein kleines Icon kann dem Benutzer schon helfen Inhalte deutlich schneller zu finden als wenn nur eine monotone Masse von blauer Links dargestellt wird. Da nun auch immer mehr Inhalte im SharePoint abgelegt werden, ist dies natürlich noch wichtiger. Und Integrationslösungen, die auch viele Inhalte externer System anzeigen kann, können ja auch realisiert werden.

Die schnelle Informationsgewinnung spielt auch eine große Rolle in der Akzeptanz der Benutzer – wenn es dann auch noch gut aussieht und das System mir dabei hilft die Informationen leichter zu erkennen: umso besser!

Zudem sollten die wichtigen Inhalte im SharePoint kategorisiert und verschlagwortet werden – diese Mehrarbeit sollte auch in den Suchergebnissen sichtbar sein, damit der Aufwand sich auch noch mehr lohnt.

Wie ist eine Anzeigevorlage aufgebaut?

Jede Anzeigevorlage besteht dabei aus zwei Dateien: einer HTML-Version der Anzeigevorlage, die Sie in Ihrem HTML-Editor bearbeiten können, und einer JS-Datei, die SharePoint verwendet. Die HTML-Datei ist dabei immer nach dem gleichen Muster aufgebaut, in ihr werden definiert wo welche Eigenschaften angezeigt werden, die der Suchtreffer besitzt. Die HTML-Datei kann aber auch JavaScript enthalten um dynamisch Inhalte anzuzeigen oder sogar Business Logik abzubilden.

Im Screenshot sieht man ein typisches SharePoint 2013 Search Center, mit den 3 Komponenten die man leicht anpassen kann: Item Display Template, Item Hover Display Template und die Aktionsleiste.

(1) Item Display Template für einen PowerPoint Treffer
(2) Das dazugehörige Hover Template für PowerPoint
(3) Die Such-Aktionen die direkt von der Such-Seite gestartet werden können

Wie kann ich ein Display Template ändern?

In den folgenden 5 Schritten werde ich zeigen, wie man das Display Template für PowerPoint anpassen kann, sodass eine zusätzliche Dokumenteneigenschaft angezeigt wird.

Schritt 1: Liste vorbereiten

Damit wir einen zusätzliche Dokumenteneigenschaft anzeigen können, muss diese an mindestens einem Dokument/List Item vorhanden sein – die Spalte anlegen langt dabei nicht, sie muss auch ausgefüllt sein. Für dieses einfache Beispiel habe ich eine Text-Spalte „Technologie“ angelegt und mit Werten befüllt:

Schritt 2: Managed Property anlegen und befüllen

Wie kommt dieser zusätzliche Wert nun in die SharePoint Suche? Leider nicht automatisch (zumindest nicht immer, kann aber konfiguriert werden). Hierzu muss nun eine sogenannte Verwaltete Eigenschaft (Managed Property) angelegt werden. Dazu wechselt man in die Site Collection Administration – in SharePoint 2010 konnte man dies ausschließlich in der der Central Admin machen und musste Farm Administrator sein – und dort dann auf Such Schema. Im Tab Verwaltete Eigenschaften kann man dann ein neue Eigenschaft anlegen:

Auf der neuen Seite dann als Name „Technologie“ eintragen, die Checkbox bei Abrufbar (Retrievable) anclicken und am Ende der Seite noch ein Mapping hinzufügen. Im Dialog dann nach Technologie – also den Name der neuen Text-Spalte – suchen:

Der Wert setzte sich bei SharePoint Inhalten immer aus owa_ gefolgt vom Spaltennamen zusammen.

Falls hier kein Wert angezeigt wird, dann hat die SharePoint Suche die neue Spalte noch nicht während eines Suchlaufs gefunden. Hier hilft es einen Full Crawl in der Central Administration zu starten. Falls der Wert angezeigt wird, hinzufügen und das Managed Property mit OK anlegen. Wenn man auf der Übersichtsseite erneut nach Technologie sucht, sieht es dann so aus:

Die Verwaltete Eigenschaft wird nun im nächsten Suchlauf in den Such-Index mit aufgenommen. Wer nicht warten möchte, muss einen Full Crawl starten.

Schritt 3: Display Template anpassen

Nun zum eigentlichen Anpassen des Display Templates – die Eigenschaft Technologie wird wiederum nicht automatisch angezeigt. Um das Display Template zu modifizieren, lädt man sich dieses in der Gestaltungsvorlagen Bibliothek (Masterpage Gallery) herunter. Dazu in die Site Collection Settings wechseln, Gestaltungsvorlagen öffnen und dort zuerst in den Ordner Display Templates und dann Search wechseln. In diesem Ordner liegen alle Display Templates die für die SharePoint Suche verwendet werden können – wie bereits beschrieben, eine HTML Datei zum Editieren und eine JavaScript Datei die SharePoint generiert. Für dieses Beispiel werden wir die PowerPoint Gestaltungsvorlage (item_PowerPoint.html) herunterladen und mit einem Texteditor (z. B. Notepad++) öffnen. Der Inhalt ist eine Mischung aus normalem HTLM und Javascript – plus einer Platzhalter-Sprache die benutzt werden kann um Werte aus dem Suchindex an bestimmten Stellen anzeigen zu können.

In unserem Fall genügen wenige Modifikationen. Zuerst den Titel in den title-Tags anpassen damit wir das Display Template später wiederfinden: SPAdvent PowerPoint Item.
Dann im HTML-Tag mso:ManagedPropertyMapping folgenden Wert am Ende einfügen: ,’Technologie‘:’Technologie‘ – das Koma am Anfang darf nicht fehlen. Damit weißen wir die SharePoint Suche darauf hin, das wir für dieses  Display Template den Wert Technologie benötigen und dieser für die Suchanfrage mitgeladen werden soll.

Als letzten Schritt nun nach Zeile 38 eine neue Zeile anlegen und folgenden Text einfügen:

                
Technologie: _#=ctx.CurrentItem.Technologie=#_

Die Datei sollte dann so aussehen:

Mit diesem neuen HTML-Tag wird eine neue Zeile im Display Template dargestellt – das ctx.CurrentItem.Technologie wird dann durch den Wert aus dem Suchindex, sprich unserem Technologie-Wert, ersetzt.

Nun die Datei unter einem neuen Namen speichern und wieder in die Gestaltungsvorlagen Bibliothek hochladen – in den gleichen Ordner aus dem wir sie runtergeladen haben. Den Dialog nach dem Hochladen einfach mit OK schließen.

Schritt 4: Result Type anlegen

Damit die SharePoint Such nun weiß, dass sie für PowerPoints unser neues Display Template verwenden soll, müssen wir ein Suchergebnistyp/Result Type anlegen um diese Zuordnung zu machen. Dazu wieder in die Site Settings wechseln und dort auf den Eintrag Suchergebnistypen. Dort fügen wir dann einen neuen hinzu, der Name ist hier SPAdvent PPT. Die einzige Bedingung auf die wir diesen Typ einschränken ist Microsoft PowerPoint. Zuletzt wählen wir noch die Aktion aus – das Ergebnis sollt mit dem SPAdvent PowerPoint Display Template dargestellt werden:

Wenn der Suchtreffer also vom Typ Microsoft PowerPoint ist.

Nach dem Speichern zeigt uns SharePoint unseren neuen Ergebnistyp an:

Schritt 5: Ergebnis ansehen

So, dass war es auch schon – das neue Display Template ist fertig und wird in der Suchseite dargestellt:

Es sind zwar relativ viele Einzelschritte, dafür sind keine Entwicklung oder irgendwelche speziellen Entwicklungssprachen nötig. Änderungen lassen sich so schnell und einfach umsetzen.

Dieses einfache Beispiel zeigt jedoch wie mächtig Display Templates sein können und wie schnell sie Mehrwerte für den Endbenutzer bringen können.

In diesem Sinne wünsche ich eine frohe Weihnachtszeit!

Zusätzlich & hilfreich!

• Eigene Aktionen im Hover Panel anzeigen (englisch)
• Search Query Tool (nützlich um Suchanfragen auszuprobieren & zu testen)
• Blog Serie rund um Suchabfragen (englisch)
• Sammlung von Display Templates