Kolumne: SharePoint ganz praktisch

SharePoint – clientseitige Anpassung von Anzeigevorlagen
Keine Kommentare

Jede SharePoint-Installation ist zunächst identisch. Oft bestehen aber spezielle Anpassungswünsche, die sich oft auf die Oberfläche auswirken. In den Versionen vor SharePoint 2013 waren dazu oft serverseitige Implementierungen notwendig. Ab SharePoint 2013 gibt es eine einfachere Möglichkeit der Anpassung.

Ein SharePoint-basiertes Portal ist in vielen Unternehmen integraler Bestandteil der Infrastruktur. Aber wie so oft besteht der Wunsch, die (Basis-)Installation an individuelle Bedürfnisse anzupassen. Im SharePoint-Kontext geht es meist um die Realisierung von eigenen Prozessabläufen, z. B. mit Ereignisroutinen oder Workflows, eigenen Web Parts oder einfach nur um die Anpassung der visuellen Darstellung. Visuelle Anpassungen der Oberfläche mussten vor der (noch) aktuellen SharePoint-Version 2013 oft serverseitig erfolgen. Einen direkten eingebauten Mechanismus, um dies auch clientseitig zu realisieren, gab es nicht. Zwar war es möglich, über eigene Wege die HTML-Oberfläche mittels clientseitigem Skript anzupassen, jedoch musste dafür ein eigener Lösungsweg gefunden werden.

Clientseitige Anpassung von Anzeigevorlagen in SharePoint Server 2013

Der SharePoint Server 2013 unterstützt die clientseitige Anpassung der Darstellung von zum Beispiel Suchtreffer oder auch Verfeinerungsfilter (Refiner). Dies wird über die so genannten Anzeigevorlagen (Display-Templates) gesteuert. Anzeigevorlagen können immer dann zum Einsatz kommen, wenn es um die Aufbereitung von Suchergebnissen geht. So können Anzeigevorlagen auch bei der Verwendung des neuen Web Parts „Inhaltssuche“ (engl. Content By Search Web Part kurz: CSWP) verwendet werden, jedoch nicht beim altbekannten Inhaltsabfrage-Web-Part (engl. Content Query Web Part kurz CQWP). SharePoint 2013 selbst verwendet Anzeigevorlagen für viele Darstellungen und bringt somit bereits einige eingebaute Vorlagen mit. Eine Übersicht über die vorhandenen Anzeigevorlagen findet man am einfachsten über den Design Manager. Dieser kann über das Einstellungsmenü (Zahnrad) geöffnet werden. Anschließend findet man auf der linken Seite weitere Unterpunkte. Eine Übersicht der aktuell verfügbaren Anzeigevorlagen kann hier über den 5. Eintrag abgerufen werden (Abb. 1).

Abb. 1: Eine Übersicht über die verfügbaren Anzeigevorlagen

Abb. 1: Eine Übersicht über die verfügbaren Anzeigevorlagen

Funktionsweise der SharePoint-Suche

Anzeigevorlagen sind hauptverantwortlich für die Darstellung von Suchergebnissen. Daher erfolgt nun an dieser Stelle ein kurzer zusammengefasster Überblick über die interne SharePoint-Suche. Abbildung 2 zeigt dazu eine schematische Darstellung der wichtigsten Bausteine der Suche. Die einzelnen Punkte im Detail:

  1. Wie üblich sind SharePoint-Inhalte in Listen und Bibliotheken (Dateien) gespeichert. Site Columns werden für die interne Speicherung verwendet.
  2. Beim Aufbau des Suchindex werden die Informationen aus den Site Columns extrahiert und dem Suchindex hinzugefügt.
  3. Innerhalb des Suchindex werden Site Columns auf verwaltete Eigenschaften (Managed Properties) abgebildet.
  4. Der eigentliche Suchvorgang wird über eine SharePoint-Suchseite durch einen Benutzer ausgelöst.
  5. Die ermittelten Suchergebnisse werden vom Suchindex an die Suchergebnisseite gesendet. Verantwortlich für die Darstellung der Ergebnisse ist dort das „Suchergebnis“ Web Part (Search Results Web Part). Dieses Web Part nutzt Anzeigevorlagen für die visuelle Ausgabe der Treffer und anderen suchrelevanten Inhalten.
Abb. 2: Bestandteile der Suche (Quelle)

Abb. 2: Bestandteile der Suche (Quelle)

Für die spätere Umsetzung und Verwendung eigener Anzeigevorlagen ist es wichtig zu wissen, dass verwaltete Eigenschaften (Managed Properties) zum Einsatz kommen. Ebenfalls ist aus der oberen Erläuterung ableitbar, dass Anzeigevorlagen von den verschiedenen Such-Web-Parts verwendet werden.

Struktur von Anzeigevorlagen

Wie bereits oben gezeigt wurde, kann man sich über den Design Manager sehr leicht einen Überblick über die vorhandenen Anzeigevorlagen verschaffen. Um jedoch später auch eigene Vorlagen hinzufügen zu können, ist es sinnvoll, eine direkte Verbindung zu den Anzeigevorlageordnern im Dateiexplorer herzustellen. Dies ist über ein eingebundenes Netzlaufwerk möglich. Um dieses anzulegen, sind nur einige Schritte notwendig. Zunächst muss dazu der 3. Link „Designdateien hochladen“ innerhalb des Design Managers angewählt werden (Abb. 3).

Abb. 3: Information zum Netzlaufwerk abrufen

Abb. 3: Information zum Netzlaufwerk abrufen

Auf der rechten Seite innerhalb des Hilfetexts wird der Pfad bzw. der URL zu den Designdateien angezeigt. Dieser muss nun kopiert werden. Mit dem kopierten URL in der Zwischenablage wird als Nächstes ein Dateiexplorer geöffnet. Innerhalb des Explorers kann über das Netzwerkkontextmenü „Netzlaufwerk verbinden…“ (Map network drive) aufgerufen werden. Im öffnenden Dialog muss im oberen Bereich ein gewünschter Laufwerksbuchstabe ausgewählt werden.

In das Feld „Ordner“ (Folder) ist die zuvor kopierte URL-Adresse einzufügen. Optional kann noch festgelegt werden, ob die Laufwerkszuordnung automatisch wiederhergestellt werden soll und ob für die Verbindung ein anderes Benutzerkonto zum Einsatz kommen soll. Sind alle Angaben getätigt worden, kann der Dialog über „Finish“ bestätigt und geschlossen werden. Nach der erfolgreichen Verbindung steht nun im Explorer das neu verbundene Netzlaufwerk bereit (Abb. 4).

Abb. 4: Inhalt des verbundenen Netzlaufwerks

Abb. 4: Inhalt des verbundenen Netzlaufwerks

Im Gegensatz zu der Ansicht innerhalb von SharePoint sind über das verbundene Netzlaufwerk mehrere Dateien sichtbar. Hier sind zusätzlich JavaScript-Dateien verfügbar. Die einzelnen JavaScript-Dateien sind innerhalb von SharePoint nicht erreichbar, da diese automatisch aus der HTML-Vorlage extrahiert und erstellt werden. Anhand dieser Information ist aber schon ableitbar, dass eine Anzeigevorlage immer aus einer HTML- und einer JavaScript-Datei besteht. Da die JavaScript-Datei von SharePoint automatisch erstellt wird, sollte diese auch nie direkt modifiziert werden.

Anlage eigener Anzeigevorlagen

Nachdem nun die Ablage und die Zusammensetzung von Anzeigevorlagen erläutert wurden, geht es nachfolgend um die Neuanlage eigener Anzeigevorlagen. Als Beispiel dazu dient die Trefferanzeige von Suchtreffern. Bei der standardmäßigen SharePoint-Suchtrefferliste wird beim Überfahren mit der Maus über einen Suchtreffer ein Overlay-Fenster mit weiteren Details zu dem Treffer eingeblendet (Abb. 5).

Abb. 5: SharePoint-Trefferliste der Suche

Abb. 5: SharePoint-Trefferliste der Suche

Mithilfe einer eigenen Anzeigevorlage soll nun die Anzeige dieses Informationsfensters unterbunden werden. Damit bei der Erstellung einer eigenen Anzeigevorlage nicht alles neu implementiert werden muss, ist es sinnvoll, eine bestehende Anzeigevorlage zu kopieren. Die gewählte Quellvorlage sollte dabei dem gewünschten Ergebnis bereits sehr nahe kommen, damit die Vorlage nur so wenig wie möglich angepasst werden muss. Als Grundlage für die neue Anzeigevorlage dient daher die eingebaute SharePoint-Vorlage Item_Site.html. Diese Datei befindet sich im Ordner [X]:\Display Templates\Search. Wie zuvor erläutert wurde, ist nur die HTML-Datei relevant. Von der Item_Site.html wird zunächst eine Kopie erstellt und im gleichen Ordner gespeichert. Anschließend kann die neue Datei in einem Editor der Wahl geöffnet werden. Um die Anzeige des Hover-Panels zu unterbinden, müssen die im Listing abgebildeten Codezeilen auskommentiert bzw. entfernt werden:

ctx.currentItem_ShowHoverPanelCallback = 
  Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl);
ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback();

Die Datei kann nach diesen Anpassungen gespeichert und geschlossen werden. Anschließend sollte im Design Manager sichergestellt werden, dass die neue Datei aufgelistet und den Status „Freigegeben“ (Approved) besitzt. Wird die Vorlage lediglich als Entwurf angezeigt, kann diese über das Kontextmenü freigegeben werden. Nun steht der Verwendung der neuen Anzeige nichts mehr im Wege. Verwendet werden kann die Anzeigevorlage innerhalb von Suchtreffern. Daher ist zunächst eine eingerichtete SharePoint-Suchseite im Bearbeitungsmodus zu öffnen. Für die Trefferanzeige ist das Web Part „Suchergebnisse“ (Search Results Web Part) verantwortlich. Über die Web-Part-Eigenschaften können verschiedene Anzeigevorlagen konfiguriert werden (Abb. 6). Nach dem Wechsel auf die Option „Einzelne Vorlage für Anzeige von Elementen verwenden“ kann dort die neu erstellte Vorlage ausgewählt und gesetzt werden. Nach der Sicherung der geänderten Web-Part-Eigenschaften wird die neue Vorlage für die Trefferanzeige verwendet. Nun erscheint wie erwartet kein Hover-Panel mehr beim Überfahren eines Suchtreffers mit der Maus.

Abb. 6: Auswahl einer Anzeigevorlage für Suchergebnisse

Abb. 6: Auswahl einer Anzeigevorlage für Suchergebnisse

Zusammenfassung

Wie hier anhand eines einfachen Beispiels gezeigt wurde, ermöglichen Anzeigevorlagen auf einfache Art und Weise die Darstellung von suchbasierten Ergebnissen anzupassen. Innerhalb der Anzeigevorlagen können umfangreiche JavaScript-Blöcke – für zum Beispiel eine regelbasierte Ausgabensteuerung – verwendet werden. In der nächsten Ausgabe werden die verschiedenen Anzeigevorlagen für den Suchbereich erläutert. Weiterhin wird anhand eines Beispiels gezeigt, wie umfangreichere codebasierte Erweiterungen umgesetzt werden können.

Windows Developer

Windows DeveloperDieser Artikel ist im Windows Developer erschienen. Windows Developer informiert umfassend und herstellerneutral über neue Trends und Möglichkeiten der Software- und Systementwicklung rund um Microsoft-Technologien.

Natürlich können Sie den Windows Developer über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist der Windows Developer ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -