Display Templates zijn op zichzelf staande bestanden waarin Managed Properties (SharePoint velden, zoals Title, Description, etc) worden uitgelezen en HTML, CSS en JavaScript kan worden verwerkt. Deze bestandjes worden vervolgens gerenderd in een of meerdere pagina's van je SharePoint site. Je gebruikt ze om de weergave van Web Parts te bepalen. Ze bestaan uit twee HTML-bestanden en bij ieder van deze bestanden wordt automatisch een JS-bestand gegenereerd en gekoppeld. Met deze JS-bestanden doe je zelf niets, dat gaat allemaal automatisch.
Het eerste HTML bestand is de Control Display Template en de tweede is het Item Display Template. De Control Display Template bepaalt de algemene structuur van hoe de resultaten worden gepresenteerd in het Web Part (zoals lijsten, lijsten met paginering, sliders, etc). Bijvoorbeeld een <ul> waar je <li>'s in wilt gaan renderen. Daarnaast wordt het gebruikt om JavaScript en CSS bestanden in te laden.
Het Item Display Template bepaalt hoe elk resultaat in de set wordt weergegeven (zoals lijst items, afbeeldingen, tekst, etc). Dat zou dan dus een <li> (inc inhoud) zijn als we het bovenstaande voorbeeld aanhouden. Één <li>? Ja, het is een template, dus er gaat straks een lus doorheen die steeds diezelfde <li> gebruikt om het geheel op te bouwen. De Web Part instellingen bepalen hoeveel items dat zijn, Display Templates gaan daar niet over.
De reden dat er twee losse (Control en Item) bestanden zijn in plaats van alles in één, is dat je Control- en Item templates willekeurig kan combineren. Het zijn dus niet persé vaste setjes. Het kan heel goed zijn dat je voor dezelfde Control Display Template, meerdere Item Display Templates maakt, die bijvoorbeeld weer steeds andere SharePoint velden (Managed Properties) aanroepen, maar wel dezelfde JS/CSS en (container)markup gebruiken.
Leuk verhaal, maar hoe werkt dit nou in de praktijk?
Laten we beginnen bij het begin. Omdat ik zelf gebruik heb gemaakt van een SharePoint Online omgeving (waar je dus niet wilt deployen vanuit Visual Studio), ga ik daar in deze
blogpost ook even vanuit. We gaan zodoende gebruik maken van de SharePoint Design Manager en Notepad++.
Persoonlijk vind ik de 'Search Results' methode het makkelijkst werken. Dat is slechts één en hetzelfde Web Part (namelijk het Search Results Web Part), waar je
letterlijk en figuurlijk alle kanten mee op kan. Je plaatst dan dus voor ieder Web Part dat je wilt hebben op je pagina, een Search Results Web Part met een eigen query en laat
de Display Templates bepalen hoe en wat er zichtbaar is. Zo kan hetzelfde Web Part er telkens compleet anders uitzien en andere data weergeven.
Nou moet ik toegeven dat ik nog niet van alle soorten Display Templates heb bekeken hoe en waar ze worden toegepast en of er in sommige gevallen dus betere alternatieven zijn
dan Search Results. Wat ik wel zeker weet is dat Search Results in ieder geval goed werkt voor wat ik wilde bereiken.
Start
Je vindt de Search Results Display Templates hier:
https://[JouwDomein].sharepoint.com/_catalogs/masterpage/Display%20Templates/Search/
Dit gaat op SiteCollection niveau, dus als je een onderliggende SiteCollection hebt, zou het pad er zo uitzien:
https://[JouwDomein].sharepoint.com/sites/[JouwSiteCollection]/_catalogs/masterpage/Display%20Templates/Search/
Map Network Drive
Het werkt t makkelijkst om de Masterpage Gallery te mappen naar je computer, zodat je deze vanuit de verkenner kan openen. Lees
hier hoe.
Let op dat: Je IE moet gebruiken, je bij het inloggen het 'ingelogd blijven' vinkje AAN moet zetten, je SharePoint domein/site aan je trusted sites toe moet voegen en
je een willekeurige library moet openen dmv de 'Open in Explorer' optie in de ribbon (alleen mogelijk met IE). Na die stappen zou je moeten kunnen mappen. Zo lang als
dat je ingelogd bent op de site, kan je via de verkenner de MP Gallery benaderen. Log je uit, dan kan je er niet meer bij. In de MP Gallery navigeer je naar
Display Templates -> Search voor de juiste locatie.
Starter Display Templates
Via de links hieronder kan je 'kale' Starter Templates downloaden om mee te beginnen. De Control bevat een heading en een container voor de items, de Item Template toont
de Title en Description.
Inderdaad, de JS files ontbreken. Klopt, die maakte SharePoint namelijk zelf aan, als je bovenstaande bestanden upload naar de Display Template Gallery. Je moet dit dan wel via de SharePoint user interface doen (dus via de browser).
Hoe nu verder?
Omdat het een heeeeel erg lange lap tekst wordt als ik de verschillende uitwerkingen allemaal in deze blogpost ga beschrijven, heb ik losse blogposts gemaakt voor een aantal
individuele uitwerkingen:
- Display Templates: Een scherm-brede slider maken
- Display Templates: Een Accordion maken
- Display Templates: Een 'Laatste Nieuws' web part maken Binnekort online
- Display Templates: Een evenementen/agenda overzicht maken Binnenkort online
Dan heb ik nog een blogpost met tips & tricks. Natuurlijk ben ik zelf tegen issues aangelopen waarmee ik heb geworsteld om het op te lossen. Om jullie dit leed te besparen
staan in deze blogpost de oplossingen van deze issues en best practices om problemen te voorkomen.
Wat ook heel interessant is, is deze pagina. Je leest hier uitgebreid over het hoe en waarom en de opbouw van Display Templates.
Want to read this in English?
Geen opmerkingen:
Een reactie posten