In mijn vorige blogpost heb ik al een introductie geschreven over Display Templates. Deze blogpost is meer een verzameling van kleine dingetjes waar ik tegenaan ben gelopen tijdens het werken met de Display Templates.
Soorten Display Templates
Er zijn verschillende soorten display templates en voor iedere soort zijn er al standaard een aantal verschillende aangemaakt in SharePoint. Het loont dus de moeite om eerst even te checken of er niet al een geschikt template bestaat voor wat je wilt bereiken (Zelf heb ik altijd wel wat te zeuren, dus ik maak toch wel weer eigen templates ☺). Als je ook maar iets afwijkt van de standaard, wijzig dan niet het standaard Template, maar kopieer hem en maak een nieuwe aan.
Je vindt hier een overzicht van soorten en standaard Display Templates.
Managed Properties
Managed Properties zijn de SharePoint velden die je uit kan lezen in de Display Templates. Deze zijn er in alle soorten en maten en daarmee zijn er allerlei verschillende methoden om ze weer te geven. Daarover later in deze blogpost meer.
Er zijn in SharePoint veel meer properties dan alleen de Managed properties, deze heten Crawled Properties. Je kunt die echter niet direct uitlezen in een Display Template. Je moet ze eerst mappen naar een (bestaande of zelf aangemaakte) Managed Property. Hoe je dat doet lees je hier.
Omdat ik in SharePoint Online werk en dus geen Central Admin heb, hier nog even de link naar de Managed Properties lijst:
https://[JouwDomein].sharepoint.com/_layouts/15/listmanagedproperties.aspx?level=sitecol
Managed Properties uitlezen
In de <head> sectie van het Item Display Template Staat een tag <mso:ManagedPropertyMapping msdt:dt="string">. In deze tag moet je de Managed Properties
definiëren die je uit wilt lezen. Dit ziet er ongeveer zo uit:
<mso:ManagedPropertyMapping msdt:dt="string">'Link URL'{Link URL}:'Path','Line 1 code'{Line
1}:'Title','Line 2 code'{Line 2}:'Description'</mso:ManagedPropertyMapping>
De definitie van een Managed Property is als volgt:
'Property Display Name'{Property Name}:'Managed Property Name'
- Property Display Name is volgens Microsoft de naam van de Property die
te zien is in het Web Part bewerkingsmenu wanneer het Display Template is geselecteerd. Persoonlijk snap ik niet wat ze hiermee bedoelen. Ik zie het nergens terug.
Als iemand hier meer van weet, hoor ik het heel graag!
Voor zover ik weet is dit de waarde waarmee je de property aanroept in het script in je Display Template. - Property Name is een identifier die gekoppeld is aan de Managed Property. Deze is zichtbaar als veld in het Web Part bewerkingsmenu onder
'Property Mappings'. Hier kan je ook een andere Manged Property aan datzelfde veld koppelen (dat zie je overigens niet terug in het Display Template, daarin
stel je alleen de default waarde in).
Deze Property Name is dus alleen van waarde als het Web Part de bewerkingsoptie 'Property Mappings' bevat. Is dat niet zo, dan kan je dit ook weglaten en de syntax als volgt gebruiken:
'Property Display Name':'Managed Property Name' - Managed Property Name is de werkelijke Managed Property, zoals het SharePoint systeem hem herkend. Het kunnen één of meer Managed Properties zijn, gescheiden door een puntkomma (;). Tijdens runtime wordt de lijst (die dus één of meerdere items kan bevatten) van links naar rechts uitgelezen en het eerste item dat een waarde van een Managed Property ophaalt, wordt toegepast.
Nadat je een Managed Property hebt gemapped, kan je het uitlezen door in de <body> van het Display Template een variabele (javascript) aan te maken:
<!--#_
Ik heb hier even deels de standaard TwoLine Item Display Template van SharePoint gekopieerd (en een beetje aangepast), omdat hierin het verschil goed duidelijk is.
var title = $getItemValue(ctx, "Line 1 code");
_#-->
Om de waarde van de Managed Property vervolgens weer te geven in je HTML, roep je de variabele aan op deze manier:
_#= variabele =#_
In het geval van Tekst waarden is het verstandig om de volgende syntax aan te houden:
_#= $htmlEncode(variabele) =#_
De htmlEncode zorgt ervoor dat alle special tekens die een script kunnen laten klappen, gecodeerd worden. Zo wordt een quote (') bijvoorbeeld omgezet naar
'.
Neem een kijkje in de standaard Display Templates van SharePoint om te zien wat er allemaal mogelijk is. Ook op deze website staat een hoop waardevolle informatie over scripten in Display Templates.
Afbeeldingen weergeven
De Managed Properties van afbeeldingen en iconen bestaan eigenlijk gewoon uit tekst, namelijk een url. Om dit om te zetten naar een afbeelding moet je de Managed Property dus
aanroepen in de src van een <img> tag. De syntax zou er zo uit kunnen zien:
<img src="_#= variabele =#_" alt="" />
Er zit wel een valkuil in: SharePoint vindt urls die zijn onderbroken met een spatie niet zo leuk… Normaal worden die spaties opgevuld met een %20, maar hier dus niet. Zorg
er dus voor dat je de Picture Library waar je de afbeeldingen uit wilt halen, GEEN spaties in de naam bevatten, of knutsel wat met JavaScript om de spatie te vervangen voor
een %20 (geen idee hoe, niet geprobeerd).
Datums weergeven
Dit is ook een leuke, want je hebt hierin de vrijheid om het door jou gewenst format te gebruiken. Dit zou er bijvoorbeeld zo uit kunnen zien:
_#= variabele.format("d MMMM yyyy") =#_
Maar je kan de datum ook splitsen. Zo heb ik bijvoorbeeld eens een gekleurd vakje gemaakt, met de datum daarin opgeknipt in twee stukken. Zo staan de dag en maand onder elkaar
ipv naast elkaar:
<div class="date-formats">
<span>_#= variabele.format("d") =#_</span> <!-- dag in cijfers -->
<small>_#= variabele.format("MMMM") =#_</small> <!-- maand in woorden -->
</div>
Een overzicht van alle beschikbare formats vind je hier.
File Type Icon uitlezen
Een gevalletje apart, want dit werkt, in ieder geval bij Search Result Display Templates, niet zoals je zou verwachten (mij een raadsel waarom niet, maar het is zo). Het file type icon is het icoontje dat je in bijvoorbeeld document libraries ziet staan als eerste kolom van ieder document. Het kan bijvoorbeeld een MS Word-icoontje zijn, of Excel, PDF, etc.
Om het toch voor elkaar te krijgen, stelen we hem gewoon even van een ContentBySearch Display Template. Dat doe je zo:
-
In de Control Display Template voeg je het volgende script in:
<script>
$includeScript(this.url, "/_layouts/15/search.cbs.js");
</script> -
In het Item Display Template voeg je de volgende regel code toe:
var iconUrl = Srch.ContentBySearch.getIconSourceFromItem(ctx.CurrentItem); -
Roep de variabele aan in een <img> tag:
<img src="_#= $urlHtmlEncodeString(iconURL) =#_" />
En klaar is Kees! Ik heb hierbij overigens geen styling meegenomen, dus het kan zijn dat je dat nog moet fixen. Binnenkort post ik een gedetailleerde tutorial over het maken van een 'Mijn Documenten' Display Template, waarin ik ook het file type icon meeneem.
Dit was het weer even voor nu, hopelijk heb je er wat aan ☺
Prefer to read this in English?
