Post on 26-Jun-2015
description
DNV GL © 2014
DRAFT
22 August 2014 SAFER, SMARTER, GREENER1 DNV GL © 2014
DRAFT
22 August 2014Mikael Svenson
SOFTWARE
SharePoint - Display Templates
Everything you need to know to get started and beyond +/- 50%
DNV GL © 2014
DRAFT
22 August 20142
What are Display Templates?
Defines the visual layout of search results
HTML -> JavaScript file
Client side rendering – meaning it is your browser which renders the markup
On first call all data is included on the page itself, subsequent calls use AJAX
– CSWP can load async on first load as well
DNV GL © 2014
DRAFT
22 August 20143
What does it do?
Uses managed properties
Uses HTML and JavaScript to display content
DNV GL © 2014
DRAFT
22 August 20144
Logical structure (image borrowed with permission )
DNV GL © 2014
DRAFT
22 August 20145
Where are they used?
DNV GL © 2014
DRAFT
22 August 20146
Web parts which use Display Templates
Search Box
Refinement (Control + Item)
Search Result
– Control
– Item
– Group (harder to change)
Content By Search
– Control
– Item
DNV GL © 2014
DRAFT
22 August 20147
Where are the templates located?
Located in each site collection
– /_catalogs/masterpage/Display Templates
DNV GL © 2014
DRAFT
22 August 20148
Gotcha’s
Remember to publish and approve
DNV GL © 2014
DRAFT
22 August 20149
A template may be used for multiple things
Re-use template for Search Result and CSWP
Item_BetterBestBet.html
DNV GL © 2014
DRAFT
22 August 201410
What triggers a Display Template to be used?
Hard coded in web part
– Common mistake
Result Type
– Best practise
Display Template
Trigger Conditions
DNV GL © 2014
DRAFT
22 August 201411
Best Practise for Web Part Setup
Web PartResult Source (Scope)
Result TypeItem
Template
Control
Template
DNV GL © 2014
DRAFT
22 August 201412
Web Part Query Setup
Pick a result source
Define the query as a result source instead
Much easier to change – no page edit required
DNV GL © 2014
DRAFT
22 August 201413
Include custom Script/CSS
Include custom CSS/JS in the control templates
– Executed before results are rendered
Execute JavaScript after your results are rendered
ctx.OnPostRender = [];ctx.OnPostRender.push(function(){<your code>});
DNV GL © 2014
DRAFT
22 August 201414
Mapping Crawled Properties to Managed Properties
Use RefinableXXYY – easier to locate and maintain – and give them aliases
– Decide if it should be a global property (SSA) or for a specific site collection
Best Bet implementation has a managed property which is an exception
– NoRecall
Use in templates<mso:ManagedPropertyMapping msdt:dt="string">'bestbetTitleOWSTEXT':'VerIT.bestbetTitleOWSTEXT','bestbetDescriptionOWSMTXT':'VerIT.bestbetDescriptionOWSMTXT','bestbetUrlOWSTEXT':'VerIT.bestbetUrlOWSTEXT','bestbetImageUrlOWSTEXT':'VerIT.bestbetImageUrlOWSTEXT'</mso:ManagedPropertyMapping>
var bbTitle = $getItemValue(ctx,"bestbetTitleOWSTEXT").value;
For hover panels, be sure to include custom properties in the item template
DNV GL © 2014
DRAFT
22 August 201415
SAFER, SMARTER, GREENER
www.dnvgl.com
References:techmikael.blogspot.comwww.eliostruyf.comwww.dotnetmafia.comgithub.com/SPCSR