Bernhard Straub
Notify in SharePoint mit Inhaltssuche
Ich möchte Ihnen heute ein Beispiel zeigen, wie man die Suche in SharePoint nutzen kann, um wichtige Informationen oder Ankündigungen auf ansprechende und hervorgehobene Weise auf Ihren Webseiten anzeigen zu lassen.
Das klingt erst einmal etwas trocken, daher am besten gleich ein Screenshot, wie das Ergebnis aussieht:
Beim Öffnen der gewünschten Seite (z.B. die Startseite einer Abteilungs-Teamsite) wird automatisch die blau hervorgehobene Info angezeigt. Diese Info wird in einer Liste eingetragen und kann dort einfach er-stellt/aktualisiert/gelöscht werden.
Diese Lösung möchte ich Ihnen nun als Rezept zum „Nachkochen“ beschreiben.
Überblick
Hier erst einmal eine kurze Beschreibung, wie die Lösung aufgebaut ist.
In SharePoint 2013 gibt es das sog. Content Search Webpart (Inhaltssuche). Dieses Webpart ermöglicht, mit einer Abfrage gezielt Inhalte zu durchsuchen, die dann im Webpart angezeigt werden.
In unserem Fall wird die Abfrage auf eine einfache Liste gesetzt, die nur das Titelfeld enthalten muss (das kann also z.B. eine benutzerdefinierte Liste oder eine Ankündigungsliste sein).
Für die Darstellung der Inhalte benutzt das Webpart sog. „Display Templates“ (Anzeigevorlagen). Es ist möglich, eigene Display Templates zu erstellen und dort die Darstellung praktisch beliebig anzupassen.
D.h. das Webpart liefert erst einmal einfach die Suchergebnisse (z.B. Titel der Ankündigung), und die Display Templates sorgen für die Präsentation dieser Inhalte. Hier hat man mit HTML, CSS und JavaScript praktisch unbegrenzte Möglichkeiten.
In meinem Beispiel wird der Titel aus einer Liste über ein jQuery-Plugin als Infobox am Bildschirm dargestellt (s. Screenshot). Ich beschreibe Ihnen nun, wie Sie Schritt für Schritt zur Lösung gelangen. Sie finden zusätzlich die fertige Lösung als ZIP-Datei, d.h. Sie können die Dateien auch einfach in die entsprechenden Verzeichnisse kopieren und die Funktion ausprobieren bzw. noch weitere Anpassungen vornehmen.
Zutaten
Die Lösung ist mit Office 365 Plan E1 erstellt. Dort wird als Komponente das Content Search Webpart eingesetzt. Weiterhin wird benötigt:
- jQuery, ich habe Version 1.11.1 verwendet: http://jquery.com/download/
- Das jQuery-Plugin Notify.js http://notifyjs.com/
- Metro-Style für Notify: https://github.com/jpillora/notifyjs/tree/gh-pages/dist/styles/metro
Als Werkzeug für die Konfiguration den Microsoft SharePoint Designer 2013.
Vorbereitungen
Zuerst müssen diverse Dateien hochgeladen und dann bearbeitet werden. Dafür habe ich die Website einfach mit dem SharePoint Designer geöffnet. Sie können das jedoch auch komplett über die Webober-fläche von SharePoint ausführen.
Die Lösung benötigt die o.g. Ressourcen, diese sind alle in die Formatbibliothek einer Websitesammlung abgelegt, in einem neuen Verzeichnis „Notify“. Hier die Ablagestruktur:
Dateien einchecken und als Hauptversion veröffentlichen!
Weiterhin werden die Display Templates vorbereitet. Diese befinden sich in folgendem Ordner:
../_catalogs/masterpage/Display Templates/Content Web Parts
Dort liegen zu allen Display Templates jeweils zwei Dateien, einmal mit der Endung .html, einmal mit .js. Wir arbeiten nur mit der HTML-Datei, SharePoint kümmert sich automatisch um das Konvertieren in eine JavaScript-Datei.
Bestehende Dateien werden nicht verändert, sondern kopiert und umbenannt:
- Control_List.html kopieren und in Control_Notify.html umbenennen
- Item_TwoLines.html kopieren und in Item_Notify.html unbenennen
Display Templates
Wie schon erwähnt sorgen die Display Templates für die Darstellung der Suchergebnisse im Webpart. Oben wurden zwei Dateien kopiert, warum das?
Das „Control“-Template ist der Rahmen für die einzelnen Suchergebnisse. Damit ist es möglich z.B. Kopf- und Fußzeilen etc. hinzuzufügen.
Das „Item“-Template bewirkt die Darstellung des einzelnen Treffers.
Was machen die beiden Standard-Templates?
Control_List baut per HTML eine Liste mit „ul“auf (dies wird nur einmalig benötigt, daher im Control-Template).
Item_TwoLines zeigt die Suchergebnisse jeweils als einzelnes Listenelement an mit „li“. Innerhalb des Listenelements gibt es natürlich noch weitere HTML-Anweisungen, die per CSS und ggf. JavaScript formatiert und angepasst sein können.
Zur Verdeutlichung als Grafik:
Anpassung der Display Templates
Die oben erwähnten Display Templates zeigen die Suchergebnisse als Liste im Webpart an. In unserem Fall möchten wir aber gar keine Darstellung im Webpart selbst, sondern die Anzeige der Infos soll ja an anderer Stelle über die Notify-Funktion geschehen.
… hier folgen CodeBeispiele …
Erweiterungen
Mit diesem kleinen Kochrezept habe ichr Ihnen die Möglichkeiten der Verwendung des Inhaltssuche-Webparts und die Anpassung mit Display Templates gezeigt. Die Notify-Funktion kann für einen sinnvollen Einsatz in der Praxis natürlich noch erweitert werden, z.B.:
Die Notify-Liste enthält ein Start- und ein Enddatum. Damit kann eine zeitliche Einschränkung für eine Info definiert werden. Dazu muss dann im Webpart einfach eine angepasste Abfrage erstellt werden.
Die Liste enthält zusätzlich ein Kategorien-Feld. Diese Kategorie wird im Display-Template verwen-det, um verschiedene Farben und/oder Grafiken anzuzeigen, z.B. „Info“ in blau, „Warnung“ in rot.
Ansonsten können natürlich noch weitere Parameter des Notify-Plugins eingesetzt werden, schauen Sie doch einfach mal dort in die Dokumentation!
Zusammenfassung
Für die Vorweihnachtszeit vielleicht doch ein recht trockenes Brot? Für das Suchergebnis-Webpart und die Display Templates benötigen Sie auf jeden Fall etwas Einarbeitungszeit, und es gibt einige Fallstricke. Andererseits sind die Möglichkeiten praktisch unbegrenzt, wie die Daten dargestellt werden können. Und über die Suche können Sie natürlich jetzt Daten über mehrere Websitesammlungen oder gar Webanwendungen aggregieren! So wird aus dem trockenen Brot dann doch schnell ein leckerer Lebkuchen!
Ich hoffe, dass Ihnen diese Beispiellösung das Thema etwas näher gebracht hat und wünsche Ihnen – auch im Namen des KOM4TEC-Teams eine schöne Advents- und eine ruhige und erholsame Weihnachtszeit!
