JAVASCRIPT MIT SHAREPOINT
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Band 6
Kompendium
Business Solutions l Management l Administration l Development
Kompendium
JavaScript mit
Mirko Schrempp (Hg.)
SharePoint
TEAM SUCCESS
AngularJS und Knockout
SOCIAL INTRANET
Im Intranet erfolgreich
COFFEESCRIPT
App-Entwicklung
Mirko Schrempp (Hg.)
SPK2_14_U1_U4.indd 3 06.06.14 15:29
Display-Templates
Konfiguration von Display-Templates für Suchergebnisse
Treffend
dargestellt
Sven 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 Effizienz der neuen Suche noch weiter zu steigern.
Hierbei hat sich die Enterprise-Suche von SharePoint 2013 zur idealen
Administration
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-
140
SPK2_14.indb 140 04.06.14 12:04
Display-Templates
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-
gebnisauflistung 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 spezifisch 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 Offlinemodus 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.
Administration
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
www.sharepoint-kompendium.de 141
SPK2_14.indb 141 04.06.14 12:04
Display-Templates
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-Panels
Display-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 Szenario
Nachfolgend 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 Office-
Administration
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-
142
SPK2_14.indb 142 04.06.14 12:04
Display-Templates
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 auffindbar 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 auffindbar. Der Mitarbeiter hat somit
die Möglichkeit, über eine Suchanfrage z. B. alle Bestellungen zu finden,
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
vordefinierte 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 vorgefiltert präsentiert werden.
Abb. 1: Zusammenhang zwischen Hover-Panels, Item- und Control-Templates: 1) Display-
Administration
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
www.sharepoint-kompendium.de 143
SPK2_14.indb 143 04.06.14 12:04
Display-Templates
Aufbau der Display-Templates
Ein 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:///sites/suche). Auf der rechten Seite finden
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äfix 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äfix Control_. Eine weitere Unterkategorie von
Display-Templates sind die Common-Display-Templates (Abb. 2). Diese
werden als Templates für definierte Bereiche innerhalb eines Templates
mehrfach in verschiedenen Item-Display-Templates und Hover-Panels
verwendet. So finden 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-Templates
Am Anfang eines Display-Templates steht immer der Title-Tag, der im
Webpart-Bearbeitungsfenster als Displayname erscheint:
Inbox Item
Administration
144
SPK2_14.indb 144 04.06.14 12:04Display-Templates
Abb. 2: Display-Templates referenzieren auf Common-Display-Templates: 1) Jedes Dis-
play-Template referenziert mit „_#=ctx.RenderBody(ctx)=#_“ auf das Common-Display-
Template des Inhaltsbereichs; 2) Jedes Hover-Panel referenziert mit „_#=ctx.RenderHead-
er(ctx)=#_“, „_#=ctx.RenderBody(ctx)=#_“ und „_#=ctx.RenderFooter(ctx)=#_“ auf drei
Common-Display-Templates, jeweils für den Kopfbereich, den Inhaltsbereich und für die
Aktionen
Direkt nach dem Title-Tag finden sich benutzerdefinierte 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
Administration
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.
www.sharepoint-kompendium.de 145
18_Heimberger.indd 145 04.06.14 14:01Display-Templates
Abb. 3: „DIV“-Block im Body-Bereich des Display Templates
Innerhalb des DIV-Blocks sehen Sie Kommentarauszeichnungen, die
mitDisplay-Templates
kopierte Version Item_Inbox_HoverPanel.html. Da die Darstellung und
Aktionen nur für diese Elemente zur Verfügung stehen sollen, verzich-
ten wir darauf, Common-Templates für definierte Bereiche zu erstellen,
sondern fügen die erforderlichen Befehle direkt in die beiden genannten
Display-Templates ein.
Abb. 4: Praxisbeispiel: 1) Icon mit Titel und Beschreibung; 2) Hover-Panel mit Aktionen:
Die Aktionen wurden in ein Drop-down-Menü aufgenommen, da der Platz für eventuelle
weitere Aktionen (z. B. innerhalb anderer Abteilungen) nicht ausreichen würde
Inbox-Display-Template
Der Titel wurde bereits angepasst und so fahren wir mit weiteren Anpas-
sungen fort. Als Erstes sollten die benutzerdefinierten Elemente angepasst
werden. Wir belassen diese größtenteils bei ihrem aktuellen Zustand,
abgesehen von einigen Erweiterungen in der Zeile ManagedProperty-
Mapping. Hier geben wir die Managed Properties an, die wir in unseren
Templates anzeigen wollen – auch für das Hover-Panel. Hierzu brauchen
wir den genauen Namen der Managed Properties, die mit den gecrawlten
Properties gemappt wurden. Diese finden wir nach einer vollständigen
Indexierung in der Central-Administration im Search Schema der Search
Service Application. In unserem Fall benötigen wir die Kategorie, den
Status, die Beschreibung und die Kundennummer des Inbox-Elements.
Alle anderen Properties sind bereits in dieser Zeile enthalten, z. B. Creat-
Administration
ed oder DisplayAuthor, weshalb wir den Rest der Zeile unverändert las-
sen. So beginnt die Zeile in unserem Fall wie folgt (Vorsicht: Codezeile
wird hier verkürzt dargestellt):
www.sharepoint-kompendium.de 147
SPK2_14.indb 147 04.06.14 12:04Display-Templates
'InboxKategorieOWSCHCS':'InboxKategorieOWSCHCS',
'InboxStatusOWSCHCS':'InboxStatusOWSCHCS','InboxBeschreibungOWSMTXT':'InboxBeschreibung
OWSMTXT','KundennummerOWSTEXT':'KundennummerOWSTEXT','ListItemID':'ListItemID','Title':'Title' ,
(...)
Die fett dargestellten Properties sind spezielle Bezeichnungen der Ma-
naged Properties und können bei jeder Installation abweichen. Im nächs-
ten Schritt wird die Einbindung des externen JavaScript-Codes (siehe
Abschnitt zu CustomActionsScript.js) vorgenommen. Dies wird direkt
nach dem Body-Tag erledigt:
$includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Custom Js/
CustomActionsScript.js");
$includeScript(this.url, "~sitecollection/_layouts/15/sp.js");
$includeScript(this.url, "~sitecollection/_layouts/15/sp.ui.dialog.js");
Das erste Skript ist das eigene, das zum Ausführen der Aktionen be-
nötigt wird, bei den beiden anderen handelt es sich um für die Stan-
dardfunktionen notwendigen SharePoint-JavaScript-Code. Innerhalb
des umschließenden DIV-Blocks (id="Item_inbox") werden einleitende
JavaScript-Variablen festgelegt. So wird hier der URL des zugehörigen
Hover-Panels hinterlegt:
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display
Templates/Search/Item_Inbox_HoverPanel.js";
Im nächsten Schritt wird der Pfad des gewünschten Icons angegeben.
Anmerkung: In den Codebeispielen wird zwecks Übersichtlichkeit auf
Formatangaben und Klassendefinitionen verzichtet. Hier ist es zunächst
anzuraten, existierende Stylezuweisungen beizubehalten:
Das Standardfeld Title ist als Link hinterlegt:
148
SPK2_14.indb 148 04.06.14 12:04Display-Templates
_#= title =#_
Daraufhin wird das Feld für die Elementbeschreibung eingefügt:
_#= ctx.CurrentItem.
InboxBeschreibungOWSMTXT =#_
Hier ist es wichtig, dass die Schreibweise des Felds der definierten
Crawled Properties im Kopfbereich entspricht. Somit wären die wesent-
lichen Elemente im Display-Template vorhanden. Die weiteren Felder
und Aktionen werden im Hover-Panel implementiert.
Inbox-Hover-Panel
Im Kopfbereich des Hover-Panels Item_Inbox_HoverPanel.html müs-
sen außer dem Titel keine Anpassungen vorgenommen werden. Die im
Display-Template definierten Crawled Properties sind durch die Referen-
zierung auch hier verfügbar. Jedoch sollte auch an dieser Stelle der eigene
JavaScript-Code nach dem Body-Tag wie im Display-Template verknüpft
werden. Im Inhaltsbereich werden die geforderten Felder angezeigt:
_#= ctx.CurrentItem.InboxStatusOWSCHCS =#_
_#= $htmlEncode('Kategorie') =#_
_#= ctx.CurrentItem.InboxKategorieOWSCHCS =#_Display-Templates
Innerhalb dieses DIV-Blocks werden die zusätzlichen Aktionen in einem
Drop-down-Feld aufgerufen:
Status bearbeiten
Kunden zuordnen
Kunden erstellen
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
Administration
JavaScript-Befehle mit der ZeichenfolgeDisplay-Templates
CustomActionsScript.js
In der benutzerdefinierten 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 finden kann. Weitaus komplexer, aber
dadurch nicht unbedingt schwerer umzusetzen, sind Funktionen, die ex-
terne Systeme beispielsweise mittels eines REST Service aufrufen und be-
Administration
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.
www.sharepoint-kompendium.de 151
SPK2_14.indb 151 04.06.14 12:04Display-Templates
Fazit
Es 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.
Workflows 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
Administration
[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=office.15%29.aspx
152
SPK2_14.indb 152 04.06.14 12:04Das umfassende Kompendium
rund um SharePoint!
Business Solutions
Management
Administration
Development
Jetzt 4 Ausgaben im Jahr
abonnieren und sparen!
www.sharepoint-kompendium.de
19_Guenther.indd 165 04.06.14 15:36Sie können auch lesen
