Mirko Schrempp (Hg.) JavaScript mit SharePoint · Das Beispiel wird zum Download bereitgestellt und kann als Basis für eigene Anpassungen genutzt werden. Für unser Beispiel wird

Mir

ko S

chre

mpp

(H

g.)

Ban

d 6

Kompendium

Kompendium

Mirko Schrempp (Hg.)

Business Solutions l Management l Administration l Development

JavaScript mitSharePoint

TEAM SUCCESS

AngularJS und KnockoutSOCIAL INTRANET

Im Intranet erfolgreichCOFFEESCRIPT

App-Entwicklung

SPK2_14_U1_U4.indd 3 06.06.14 15:29

140

Display-Templates

Adm

inis

tratio

n

Kon�guration von Display-Templates für Suchergebnisse

Treffend dargestelltSven Heimberger

Alleine durch die Integration der FAST-Suche in SharePoint 2013 ist die Suche um ein Vielfaches leistungsstärker ge-worden. Darüber hinaus bietet die neue Suche interessante Anpassungs- und Erweiterungsmöglichkeiten. Beispielswei-se muss die Darstellung der Suchergebnisse nicht wie beim Vorgänger umständlich über XSL-Templates angepasst werden, sondern das Rendern der Trefferliste kann mit Ja-vaScript vorgenommen werden. Für die meisten Entwickler dürfte das eine willkommene Neuerung darstellen. Durch die Einführung der auf HTML und JavaScript basierenden Display-Templates bietet es sich förmlich an, die mitge-lieferten Standardtemplates per JavaScript um weitere Er-gebnis- und Darstellungslogik zu erweitern. In Kombination mit den ebenfalls neuen Callouts und Hover-Panels stehen somit einfache Wege offen, die Benutzerfreundlichkeit und die Ef�zienz der neuen Suche noch weiter zu steigern.

Hierbei hat sich die Enterprise-Suche von SharePoint 2013 zur idealen Lösung entwickelt. Nicht nur weil sie über scheinbar unendliche Anpas-sungsmöglichkeiten verfügt, sondern auch weil sie einen entscheidenden Vorteil gegenüber ihrer prominenten Konkurrenz besitzt: Die Nutzer der Suche sind bekannt, sie sind keine anonyme Masse von Personen, de-

SPK2_14.indb 140 04.06.14 12:04

141www.sharepoint-kompendium.de

Display-Templates

Adm

inis

tratio

n

ren Ambitionen erahnt werden müssen, sondern es sind Mitarbeiter mit konkreten Funktionen, Arbeitsbereichen und Aufgaben. Darüber hinaus sind die benutzbaren Informationen und Inhalte zumeist strukturiert und mit Metadaten angereichert, mehr als nur Volltext. Besonders interes-sant ist die Kombination dieser Vorteile mit Aufgaben und Tätigkeiten, die direkt im Anschluss an die Suche aus der Trefferdarstellung heraus durchgeführt werden können. So kann eine in SharePoint zentralisierte Enterprise-Suche als Schnittstelle und Einstiegspunkt zu einer komple-xen Informationslandschaft dienen und aufgrund strukturierter Daten zielgerichtete Tätigkeiten ermöglichen.

In diesem Artikel werden wir nicht nur die Grundlagen für das An-passen von Display-Templates und Hover Panels vermitteln, sondern anhand eines Projektbeispiels zeigen, wie die SharePoint-Standard-Er-gebnisau�istung durch clientseitigen Code um für die Ergebnisauswahl relevante Informationen auch von externen Quellen erweitert werden kann. Das Beispiel wird zum Download bereitgestellt und kann als Basis für eigene Anpassungen genutzt werden.

Für unser Beispiel wird Microsofts SharePoint Designer 2013 benötigt, der unter [1] kostenlos heruntergeladen werden kann. Der SharePoint De-signer ist gemeinsam mit Expression Web der Nachfolger von FrontPage zum Bearbeiten von Webseiten. Während Expression Web zum Erstellen beliebiger Webseiten verwendet werden kann, wurde der SharePoint Desi-gner spezi�sch zum Erstellen und Bearbeiten von Webseiten in SharePoint entwickelt. Er bietet mehr Kontrolle als die eingebauten Bearbeitungsmög-lichkeiten in SharePoint. Konnte die erste Version von 2007 noch als ei-genständiger HTML-Editor verwendet werden, sind die Versionen 2010 und 2013 ausschließlich in Kombination mit SharePoint verwendbar. Das Arbeiten mit dem SharePoint Designer ist dabei nur mit aktiver Verbin-dung zum entsprechenden Server möglich, einen Of�inemodus gibt es der-zeit nicht. Dennoch erleichtert der SharePoint Designer das Bearbeiten von Dateien auf dem SharePoint-Server sehr. So wird eine Datei beim Speichern direkt auf dem Server gesichert und ist dort sofort verfügbar. Alternativ können Sie die Display-Templates auch in einem Text- oder HTML-Editor Ihrer Wahl bearbeiten, allerdings ist dies oft sehr viel umständlicher.

Die Überführung der einfachen Out-of-the-box-Such- und Trefferdar-stellung in eine effektivere Anwendungsform kann recht einfach über HTML- und JavaScript-basierte Display-Templates und Hover-Panels er-folgen, die je nach Treffer/Ergebnistyp eine unterschiedliche Darstellung

SPK2_14.indb 141 04.06.14 12:04

142

Display-Templates

Adm

inis

tratio

n

und Funktionen anbieten. Diese Funktionalität ist in SharePoint 2013 nicht neu, sie wurde jedoch im Vergleich zur Vorgängerversion sehr stark und kann mit wenig Einarbeitungszeit realisiert werden. In diesem Artikel erhalten Sie einen Überblick, welche Möglichkeiten sich anbieten und wie diese in einem tatsächlichen Projektszenario umgesetzt wurden.

Display-Templates und Hover-PanelsDisplay-Templates dienen der unterschiedlichen Darstellung einzelner Suchtreffer (Abb. 1, Nummer 1). Handelt es sich bei einem Treffer z. B. um ein Word-Dokument, wird das Display Template für Word-Doku-mente verwendet. Dies beschränkt sich jedoch nicht nur auf Dateifor-mate, sondern auch auf Inhaltstypen. So gibt es für Kontakte, Personen, Microfeed-Einträge, Aufgaben und Diskussionsbeiträge jeweils eigene Display Templates. Neben den Display-Templates für einzelne Elemente einer Suchergebnisliste gibt es „Control Displays“ (Abb. 1, Nummer 2). Diese werden im Webpart nur einmalig aufgerufen und strukturieren die Sucherergebnisse in Listen.

Hover-Panels sind eine besondere Form von Display-Templates, die bei Bewegung der Maus über einen Suchtreffer eingeblendet werden. In ihrem Aussehen ähneln sie den aus SharePoint 2013 bekannten Callouts, die beim Klick auf die Auslassungspunkte eines Elements erscheinen. Hover-Panels unterscheiden sich jedoch in ihrer Logik und besitzen einen anderen Aufbau. Jedes Display-Template referiert über die Variable var hoverUrl auf ein eigenes Hover-Panel. Hover-Panels können ebenso wie Display-Templates bearbeitet und angepasst werden und bieten darüber hinaus Möglichkeiten zur Benutzeraktion (Abb. 1, Nummer 3).

Das SzenarioNachfolgend wird der konkrete Einsatz von Display-Templates und Ho-ver-Panels an einem tatsächlichen Projektbeispiel vorgestellt: Ein mittel-ständischer Lieferant erhält auf dem Postweg täglich über 55 Schreiben, darunter Bestellungen, Angebote, Mitteilungen und andere Korrespon-denzen. Nun gibt es viele Gründe, den Posteingang grundsätzlich zu optimieren. Stehen dahinter Anstrengungen zu weniger Papier im Of�ce-Bereich oder eine Optimierung der Prozesse, ist eine Digitalisierung un-umgänglich. Hierfür werden alle Briefe nach ihrem Eingang eingescannt und im TIFF-Format in einer SharePoint-Dokumentenbibliothek gespei-chert, wo sie automatisch mit dem Posteingangsdatum und einer Kurz-

SPK2_14.indb 142 04.06.14 12:04


Display-Templates

Adm

inis

tratio

n

beschreibung versehen werden. SharePoint kann nun mithilfe des TIFF iFilters (Windows Server Feature), der eine optische Zeichenerkennung (OCR) vornimmt, die Texte der eingescannten Dokumente im Volltext indexieren und über die Suche auf� ndbar machen. Über einen Content Enrichment Service werden die Volltextinformationen mit weiteren Metainformationen wie Absender, Abteilung oder Art des Schreibens automatisiert angereichert und mit anderen Systemen wie etwa einem CRM abgeglichen. Ein Großteil der Schreiben ist nun strukturiert und auch über die SharePoint-Suche auf� ndbar. Der Mitarbeiter hat somit die Möglichkeit, über eine Suchanfrage z. B. alle Bestellungen zu � nden, die Schreiben manuell weiterzubearbeiten oder direkt aus der Treffer-darstellung über das Hover-Panel weitere Aktionen wie „Status bearbei-ten“ oder „Kunde neu erstellen“ anzustoßen. Die Weiterverarbeitung eines Schreibens ist mit einem Klick initiiert oder bereits erledigt. Durch die Erweiterung des SharePoint Search Centers mit Webparts, über die vorde� nierte Suchanfragen abgegeben werden, wird die Suche von einer reinen Informationsquelle, bei der der Anwender die relevanten Daten einholen muss, in ein suchgetriebenes Dashboard erweitert, in dem In-formationen vorge� ltert präsentiert werden.

Abb. 1: Zusammenhang zwischen Hover-Panels, Item- und Control-Templates: 1) Display-Template für Suchtreffer; hier: Template für PowerPoint-Folien und SharePoint-Inhalte; 2) Control-Template, das die Suchergebnisse strukturiert und in einer Liste darstellt; 3) Hover-Panel mit Vorschau auf die PowerPoint-Folie

SPK2_14.indb 143 04.06.14 12:04

144

Display-Templates

Adm

inis

tratio

n

Aufbau der Display-TemplatesEin Display-Template besteht immer aus zwei Dateien, einer HTML- und einer JavaScript-Datei, die miteinander verknüpft sind. Werden Än-derungen an der HTML-Datei vorgenommen und gespeichert, werden diese Änderungen in der JavaScript-Datei übernommen. Anpassungen sollten also nur in der HTML-Datei durchgeführt werden. Wird ein neu-es Display-Template erstellt, z. B. Item_Inbox.html, wird von SharePoint eine entsprechende JavaScript-Datei Item_Inbox.js generiert, die dann den erforderlichen SharePoint-2013-Markup-Code enthält, damit das Display-Template angezeigt werden kann.

Um ein Display-Template zu bearbeiten, öffnen Sie die SiteCollection im SharePoint Designer: Website öffnen -> Eingabe der URL der Site-Collection (z. B. http://<URL>/sites/suche). Auf der rechten Seite �nden Sie die Ordnerstruktur der SiteCollection. Navigieren Sie zum Verzeich-nis: Alle Dateien | _Catalogs | Masterpage | Display-Templates | Search. Hier sehen Sie eine lange Liste der Display-Templates. Be-reits anhand der Dateinamen ist deren Verwendung ablesbar. So sind Templates mit dem Prä�x Item_ für einzelne Elemente vorhanden, beispielsweise Item_Word.html für Worddokumente, mit dem zughö-rigen Hover-Panel, dessen Dateinamen auf _HoverPanel endet. Control-Templates besitzen das Prä�x Control_. Eine weitere Unterkategorie von Display-Templates sind die Common-Display-Templates (Abb. 2). Diese werden als Templates für de�nierte Bereiche innerhalb eines Templates mehrfach in verschiedenen Item-Display-Templates und Hover-Panels verwendet. So �nden sich beispielsweise Item_CommonItem_Body.html für den Inhaltsbereich aller Item-Display-Templates oder Item_Com-monHoverPanel_Header.html für den Kopfbereich der Hover-Panels.

Codestruktur der Display-TemplatesAm Anfang eines Display-Templates steht immer der Title-Tag, der im Webpart-Bearbeitungsfenster als Displayname erscheint:

<title>Inbox Item</title>

SPK2_14.indb 144 04.06.14 12:04


Adm

inis

tratio

n

Display-Templates

Abb. 2: Display-Templates referenzieren auf Common-Display-Templates: 1) Jedes Dis-play-Template referenziert mit „_#=ctx.RenderBody(ctx)=#_“ auf das Com mon-Display-Template des Inhaltsbereichs; 2) Jedes Hover-Panel referenziert mit „_#=ctx.Ren der Head-er(ctx)=#_“, „_#=ctx.RenderBody(ctx)=#_“ und „_#=ctx.Ren der Foot er(ctx)=#_“ auf drei Common-Display-Templates, jeweils für den Kopfbereich, den Inhaltsbereich und für die Aktionen

Direkt nach dem Title-Tag �nden sich benutzerde�nierte Elemente, die wie folgt ausgezeichnet werden:



Diese Elemente und ihre Eigenschaften sind besonders wichtig, da sie der SharePoint-Umgebung alle Informationen über das Display-Template zur Verfügung stellen. Im Inhaltsbereich des Templates (Body-Bereich) gibt es die Möglichkeit, externen JavaScript-Code oder Style Sheets einzubinden. Hier kann mit $includeScript oder $includeCSS auf Da-teien innerhalb der SiteCollection, relativ zum Display-Template, und auf externe Ressourcen zugegriffen werden. Den nächsten Bereich stellt der DIV-Block dar, innerhalb dessen alle inhaltlichen Anpassungen für das Display-Template vorgenommen werden müssen. Die ID des DIV-Blocks sollte hier dem Namen des Display-Templates entsprechen.

18_Heimberger.indd 145 04.06.14 14:01

146

Display-Templates

Adm

inis

tratio

n

Abb. 3: „DIV“-Block im Body-Bereich des Display Templates

Innerhalb des DIV-Blocks sehen Sie Kommentarauszeichnungen, die mit  <option id="_#= $htmlEncode(id + 'customer') =#_" value="_#= $htmlEncode(customerID) = #_" onclick="setCustomer(this);"> <div>Kunden zuordnen</div> </option>  <option id="_#= $htmlEncode(id + 'customer') =#_" onclick="createCustomer();"> <div>Kunden erstellen</div> </option> </select>

Klickt man die erste Option des Drop-down-Felds an, wird die Funk-tion ChangeStatus aufgerufen, die die Item-ID des Elements als Para-meter erwartet. Die zweite Option ist davon abhängig, ob bereits eine Kundennummer zum Element vorliegt. In diesem Fall würde die Funk-tion setCustomer aufgerufen werden, andernfalls würde ein Kunde mit createCustomer erstellt werden. Beachtenswert ist hier, dass zwar alle JavaScript-Befehle mit der Zeichenfolge <!--#_ gekennzeichnet werden müssen, es aber möglich ist, im onclick-Event eine JavaScript-Funktion wie gewohnt aufzurufen.

SPK2_14.indb 150 04.06.14 12:04


Display-Templates

Adm

inis

tratio

n

CustomActionsScript.jsIn der benutzerde�nierten JavaScript-Datei werden nun die Funktionen aufgelistet, die aus dem Display-Template heraus aufgerufen werden. Vereinfacht stellen wir folgend nur eine Funktion zur Demonstration der Vorgehensweise vor:

function createCustomer(){ var options = { url: "/sites/content/Lists/Kunden/NewForm.aspx", width:800, height: 600, dialogReturnValueCallback: createCustomerDialogCallback }; SP.UI.ModalDialog.showModalDialog(options);}

Ist einem Element kein Kunde zuzuordnen, wird die Funktion createCus-tomer aufgerufen. Diese wiederum übergibt der SharePoint-Standard-funktion SP.UI.ModalDialog.showModalDialog lediglich die Optionen, in diesem Fall die Darstellungsgröße und den URL des Formulars, das in einem modalen Dialog angezeigt werden soll. Um jedoch für ein be-stimmtes Element eine Funktion auszuführen, muss die ID des Elements im Hover-Panel übergeben werden (z. B. mit setCustomer(this)), die dann als Variable in der Funktion in die Optionen geschrieben werden kann:

var itemID = item.id; var options = { url: "/sites/content/Inbox%20Documents/Forms/EditForm.aspx?ID=" + itemID, (...)

Der Aufruf eines Formulars zur Erstellung oder Bearbeitung eines Lis-tenelements ist jedoch nur eine grundlegende Aktion, die innerhalb SharePoint sicherlich Anwendung �nden kann. Weitaus komplexer, aber dadurch nicht unbedingt schwerer umzusetzen, sind Funktionen, die ex-terne Systeme beispielsweise mittels eines REST Service aufrufen und be-stimmte Parameter übergeben. Besonders im Hinblick auf ein CRM und die damit verbundenen Anwendungsfälle kann das SharePoint Search Center durch die Einbindung von Aktionen Einstieg und zentrales Portal für die wichtigsten Prozesse sein.

SPK2_14.indb 151 04.06.14 12:04

152

Display-Templates

Adm

inis

tratio

n

FazitEs wäre ein Fehler, bei der SharePoint-Suche nur ausgetretene Mecha-nismen zu betrachten und ihre Funktionen nur auf ein einfaches Such-eingabefeld beschränkt zu sehen, denn die vereinfachte Bearbeitung und Einbindung der Display-Templates eröffnen im Business Case echten Mehrwert. Gerade die unkomplizierte Anpassung des HTML-Codes, der direkt den passenden JavaScript-Code erzeugt und aktualisiert, sowie die durchdachte Verknüpfung und Einbindung eigener Skripte eröffnen neue Nutzungswege in der Enterprise-Suche. Das hier gezeigte stark ver-einfachte Szenario ist deshalb nur als Einstieg in die Möglichkeiten der bedarfsgerechten Erweiterungen zu verstehen. Display-Templates und Hover-Panels sind sehr dynamische Objekte, die die vorhandenen Mög-lichkeiten von SharePoint zur Prozesssicherung und -vereinfachung (z. B. Work�ows und Alerts) umfangreich ergänzen.

Sven Heimberger ist Geschäftsführer und SharePoint Solution Architect der Next Itera-tion Gesellschaft für Software Engineering mbH aus Karlsruhe. Die Gesellschaft für Soft-ware Engineering versteht sich als SharePoint Full-Service Provider, der seine Kunden von der Beratung über die Lösungsentwicklung und Umsetzung von Projekten bis zum Betrieb mit Microsoft-SharePoint-Lösungen unterstützt.

Links & Literatur

[1] SharePoint Designer 2013: http://www.microsoft.com/de-de/download/details.aspx?id=35491

[2] Ergebnistypen und Display-Templates: http://technet.microsoft.com/en-us/library/dn386874%28v=of�ce.15%29.aspx

SPK2_14.indb 152 04.06.14 12:04

Jetzt 4 Ausgaben im Jahr abonnieren und sparen!www.sharepoint-kompendium.de

Business Solutions Management Administration Development

Das umfassende Kompendium rund um SharePoint!

19_Guenther.indd 165 04.06.14 15:36