In deze blogpost ga ik uitleggen hoe je door middel van een Display Template een Accordion kan maken. Ik ga daar de Accordion van Unify voor gebruiken. Dat is een leuke, ruimtebesparende oplossing en meteen geschikt voor mobiele devices. Unify is gebaseerd op Bootstrap, wat een veel gebruikt responsive platform is, een aanrader.
We gaan de Accordion baseren op het Search Results Web Part. Hij komt er uiteindelijk zo uit te zien:
Start
De eerste stap die we nemen is het downloaden van de Starter Display Templates, die vind je in mijn andere blogpost. Sla de bestanden op onder een duidelijk herkenbare naam. In het geval van de Accordion zou dat iets als 'AccordionControl' en 'AccordionItem' kunnen zijn.
Upload de Display Templates (via de browser) naar Display Templates -> Search, in de Masterpage Gallery (Site Settings -> Web Designer Galleries -> Master pages and page layouts). Als je de bestanden hebt geüpload, zie je dat er vanzelf JS bestanden bij worden gegenereerd. Zo niet, dan is er iets niet goed gegaan.
Je kan ook via de 'New' button in de Display Templates-map nieuwe Display Templates aanmaken. De keuzes 'Control Display Template' en 'Item Display Template' zijn te vinden in de dropdown lijst.
Je kan vanaf nu het beste de Masterpage Gallery mappen (als je dat nog niet hebt gedaan, lees dan hier hoe je dat doet). De betreffende Display Templates kan je vanaf nu direct vanuit de verkenner openen in Notepad++ of een andere editor naar keuze.
Content
De 'vulling' van de Accordion gaan we uit een Custom List halen. In de Custom List hebben we niet veel meer nodig dan wat er standaard al wordt aangemaakt door SharePoint, maar we moeten wel 1 veld extra hebben, namelijk die voor de content van de Accordion items. In deze content willen we elementen zoals images, tabellen, etc. kunnen toevoegen, dus we hebben een Rich Text Field nodig. Er bestaat nog geen veld die representatief is voor ons doel, dus gaan we er zelf één aanmaken. Dat doen we niet in de Custom List, maar we maken het veld aan als Site Column. Waarom? 1. Omdat het dan de site-scope heeft en dus ook buiten onze Custom List gebruikt kan worden en 2. Omdat een zelf aangemaakte Site Column automatisch wordt gemapped naar een (nieuwe) Managed Property en die hebben we nodig om het veld in onze Display Template aan te kunnen roepen.
- Ga naar de Site Columns pagina (Site Settings -> Web Designer Galleries -> Site Columns).
- Klik op Create.
- Geef je Site Column een representatieve naam (ik heb gekozen voor 'Content', ivm de herbruikbaarheid van de column), Selecteer Multiple lines of text, zet de optie Number of lines for editing ruim in (bijvoorbeeld 25) en controleer of de optie Enhanced rich text (Rich text with pictures, tables, and hyperlinks) is geselecteerd.
- Klik op OK.
- Maak nu een Custom List aan en geef deze een repesentatieve naam.
- Ga naar de List Settings (Ribbon -> List -> List Settings).
- Scroll naar beneden naar de Columns section en klik op Add from existing site columns, zoek je zojuist aangemaakte Site Column op en voeg hem toe.
- Maak wat list items aan en vul deze met wat content.
Je ziet je Site Column nu in de lijst staan, default onder 'Custom Columns', tenzij je iets anders hebt ingevuld. Ga nu naar de Managed Properties pagina (https://[JouwDomein].sharepoint.com/_layouts/15/listmanagedproperties.aspx?level=sitecol) en zoek op je column naam. Maak een screenshot van de pagina (dit heb je later nodig ter vergelijking, dit is de makkelijkste manier). Werk je On Premise, dan moet je nu een crawl starten, werk je met SPO, dan zal je nu moeten wachten tot er een crawl wordt uitgevoerd (dit kan tussen de 15 minuten en 24 uur duren). Na de crawl zal je Site Column als Managed Property in de lijst verschijnen. SharePoint geeft een eigen naam aan de Managed Property en persoonlijk vind ik het nogal lastig die te achterhalen. De snelste manier is om je screenshot er weer bij te pakken, terug te gaan naar de Managed Properties pagina, weer te zoeken op je columnnaam en te vergelijken welk veld erbij is gekomen. Noteer/Kopieer de naam van de nieuwe Managed Property, die heb je straks nodig in je Display Template.
Web Part
Om de resultaten te kunnen zien van de aanpassingen die je straks in de Display Templates gaat maken, moeten we eerst het Web Part aanmaken. Zoals eerder vermeldt gebruiken we hiervoor het Search Results Web Part.
- Ga naar de pagina waar je de Accordion wilt plaatsen.
- Voeg een Web part toe aan een Web Part zone naar keuze.
- Kies het Search Results Web Part en klik op Add.
- Ga naar het Edit Web Part menu (zie het pijltje rechts bovenin het Web Part)
- Klik op Change Query
- In het tabje Basics (zorg dat de Quick mode aan staat, dat zie aan het linkje rechts bovenin het tabje Switch to Advanced Mode/Switch to Quick Mode) selecteer je bij Select a query de optie Items matching a Tag (System).
- Bij Restrict by app kies je voor Specify a URL en geef je de volledige url naar je eerder aangemaakte Custom List in.
- Restrict by tag moet blijven staan op Don't restrict by any tag.
- Klik op OK.
- Klik in het Web Part menu op Apply (nog niet op OK!).
- Klik nu op de + bij Display Templates.
- Als eerste zie je nu een dropdown met Results Control Display Template staan. In die dropdown zou je je eigen Control Display Template moeten zien, die je eerder hebt aangemaakt. Selecteer die. (Zie je hem niet? Heb je hem gepubliceerd?)
- Er onder staan twee radiobuttons. Selecteer de onderste waarbij staat: Use a single template to display items.
- Hieronder zie je weer een dropdown menu. Ook hier zou je eigen Item Display Template tussen de opties moeten staan. Selecteer die.
- Klik de + bij Display Templates nu weer dicht.
- klik op de + bij Settings.
- Vink alles uit, behalve Show ranked results (Als we die ook uit zouden zetten, zouden we helemaal geen data zien in het Web Part).
- Het getal bij Number of results per page doet er niet toe, dat regelt jQuery straks. Kan je dus laten staan zoals t staat.
- Klik de + next bij Settings weer dicht.
- Klik de + bij Appearance open.
- Vul bovenin bij title een naam voor je Accordion in.
- Onderin zie je nu Chrome Type staan, met een dropdown menu. Kies de optie Title Only.
- Klik nu op OK en sla de pagina op.
De volgende stap is het maken van de query zodat de juiste gegevens worden opgehaald.
Waarschijnlijk wint wat je nu ziet niet de schoonheidsprijs, maar je zou wel wat content uit de Custom List moeten zien nu. Klik het Web Part Edit menu nog niet weg, want we gaan nu de juiste Display Templates instellen.
De Display Templates zijn nu ingesteld, maar er zijn ook nog wat instellingen die andere dingen weergeven buiten de Templates. Die willen we niet zien, dus dat moeten we nog even uitschakelen.
Standaard laat een SharePoint Web Part nog wat eigen opmaak. Bij de Accordion willen we dat beperken tot alleen de Title, dus dat passen we ook nog even aan.
Zo, dat was het v.w.b. de instellingen. Het lijkt nu nog helemaal niet op een Accordion, dus we gaan aan de slag met de invulling van de Display Templates.
Display Templates
Zoals ik in mijn eerdere blogpost heb vermeld, werken Display Templates met z'n tweeën, één als 'hoesje' voor het geheel (Control Display Template) en de ander voor individuele items (Item Display Template). Laten we beginnen met de eerste.
Control Display Template
De Control Display Template is niet alleen maar de markup voor het Web Part, het bevat ook alle referenties naar CSS en Javascript bestanden. Dat laatste beginnen we mee. Hieronder kan je de betreffende bestanden downloaden (upload ze zelf naar de gewenste locatie in SharePoint):
Open je Control Display Template in Notepad++ (of een andere editor naar keuze) en vervang alles tussen de <script> tags met onderstaande:
$includeScript(this.url, "~sitecollection/[Pad naar het bestand]/jquery.min.js");
$includeCSS(this.url, "~sitecollection/[Pad naar het bestand]/bootstrap.css");
$includeCSS(this.url, "~sitecollection/[Pad naar het bestand]/style.css");
De volgende stap is het inladen en gebruiken van de Bootstrap Javascript. Dat voegen we toe binnen de <!--#_
en _#--> tags, onder de regel var siteURL = SP.PageContextInfo.get_siteAbsoluteUrl();.
Verder maken we een array aan, die de nummer-namen toe gaat voegen aan de Accordion items door middel van een for-loop. Dit is nodig om te bepalen
welk item van de accordion 'expanded' staat en dat de rest dus 'collapsed' is.
AddPostRenderCallback(ctx, function() {
$.getScript(siteURL + "/[pad naar het bestand]/bootstrap.min.js");
var itemNumbers = ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight"];
for (var i = 0; i < ctx["CurrentItems"].length; i++) {
$("a.accordion-toggle").eq(i).attr("href", "#collapse-" + itemNumbers[i]);
$(".panel-collapse").eq(i).attr("id", "collapse-" + itemNumbers[i]);
}
});
We hebben nu alles ingeladen en geprogrammeerd wat we nodig hebben om de Accordion werkend te krijgen. Nu moeten we de Accordion zelf nog maken,
de HTML dus. Voeg als eerste een class 'accordion' aan de allereerste <div> toe (die staat boven de code waarmee we de externe files hebben ingeladen).
Vervang daarna de HTML vanaf de <div> met CSS-class 'container' door onderstaande HTML:
<div class="panel-group acc-v1" id="accordion-1">
</div>
Let op: Laat wel de buitenste <div> (waaraan je de class 'Accordion' hebt toegevoegd) helemaal intact! Als je die weg haalt gaat het stuk.
Als laatste voegen we de code toe die het Item Display Template straks gaat inladen. Zet onderstaande code in de <div> die je zojuist hebt aangemaakt:
_#= ctx.RenderItems(ctx) =#_
Om het geheel af te maken kan je nog een titel invullen tussen de <title> tags. Dat was het v.w.b. de Control Display Template, we gaan nu verder met het Item Display Template.
Item Display Template
In het Item Display Template moeten we als eerste aan gaan geven welke velden we willen ophalen. Dat doen we in de
<mso:ManagedPropertyMapping msdt:dt="string"> tag. Je ziet hierin al wat velden staan. We missen er echter nog één, namelijk het custom Content
veld wat we eerder hebben aangemaakt. We hebben het veld op Site-level aangemaakt, wat betekent dat het na de eerstvolgende crawl automatisch een Managed Property
is geworden. Eerder in deze tutorial heb ik je al een screenshot laten maken van de Managed Properties pagina, nu moet je wederom naar deze pagina gaan en vergelijken
welk veld erbij is gekomen. In mijn geval was dat 'Content1OWSMTXT'. Die Managed Property moet je nu als volgt toevoegen aan het Display Template:
'Content1OWSMTXT':'Content1OWSMTXT'
Zorg ervoor dat deze setjes steeds door een komma gescheiden blijven.
Vervolgens moeten we het 'Content1OWSMTXT' veld aan een Javascript variabele koppelen. Dat doe je binnen de
<!--#_ en _#--> tags, onder de regel var siteURL =
SP.PageContextInfo.get_siteAbsoluteUrl();:
var content = $getItemValue(ctx, "Content1OWSMTXT");
Als laatste voegen we de HTML toe die we per item willen renderen. Vervang alle HTML vanaf de <div> met de CSS-class 'item' door onderstaande:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="collapse-One" href="#collapse-One">
_#= $htmlEncode(title) =#_
</a>
</h4>
</div>
<div id="collapse-One" class="panel-collapse collapse">
<div class="panel-body">
_#= STSHtmlDecode(content.value) =#_
</div>
</div>
</div>
Let op: Laat wel de buitenste <div> intact! Als je die weg haalt gaat het stuk.
zie ook hier weer alle code stukjes die beginnen met '_#='. Hierin worden, via de variabelen, de SharePoint velden aangeroepen.
Dat was m! Als je nu de pagina ververst waarop je de Accordion hebt geplaatst, dan zou hem nu in al zijn glorie moeten kunnen bewonderen ☺
Voor het gemak zijn hier nog voorbeelden van de volledige bestanden te downloaden:
