Everything you need to know to get started and beyond +/- 50% 
Mikael Svenson 
22 August 2014 
DNV GL © 2014 
DRAFT 
22 Au...
What are Display Templates? 
 Defines the visual layout of search results 
 HTML -> JavaScript file 
 Client side rende...
What does it do? 
 Uses managed properties 
 Uses HTML and JavaScript to display content 
DNV GL © 2014 
DRAFT 
22 Augus...
Logical structure (image borrowed with permission ) 
DNV GL © 2014 
DRAFT 
22 August 2014 
4
Where are they used? 
DNV GL © 2014 
DRAFT 
22 August 2014 
5
Web parts which use Display Templates 
DNV GL © 2014 
DRAFT 
22 August 2014 
 Search Box 
 Refinement (Control + Item) 
...
Where are the templates located? 
 Located in each site collection 
– /_catalogs/masterpage/Display Templates 
DNV GL © 2...
DNV GL © 2014 
DRAFT 
22 August 2014 
Gotcha’s 
 Remember to publish and approve 
8
A template may be used for multiple things 
 Re-use template for Search Result and CSWP 
DNV GL © 2014 
DRAFT 
22 August ...
What triggers a Display Template to be used? 
 Hard coded in web part 
– Common mistake 
Trigger Conditions 
DNV GL © 201...
Best Practise for Web Part Setup 
DNV GL © 2014 
DRAFT 
22 August 2014 
11 
Web Part 
Result 
Source 
(Scope) 
Result Type...
Web Part Query Setup 
DNV GL © 2014 
DRAFT 
22 August 2014 
12 
Pick a result source 
Define the query as a 
result source...
Include custom Script/CSS 
 Include custom CSS/JS in the control templates 
– Executed before results are rendered 
 Exe...
Mapping Crawled Properties to Managed Properties 
 Use RefinableXXYY – easier to locate and maintain – and give them alia...
References: 
techmikael.blogspot.com 
www.eliostruyf.com 
www.dotnetmafia.com 
github.com/SPCSR 
SAFER, SMARTER, GREENER 
...
Upcoming SlideShare
Loading in...5
×

SharePoint - Display Templates Overview

149

Published on

Everything you need to know to get started and beyond +/- 50%

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
149
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SharePoint - Display Templates Overview

  1. 1. Everything you need to know to get started and beyond +/- 50% Mikael Svenson 22 August 2014 DNV GL © 2014 DRAFT 22 August 2014 SAFER, SMARTER, GREENER SOFTWARE SharePoint - Display Templates 1
  2. 2. 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 2014 2
  3. 3. What does it do?  Uses managed properties  Uses HTML and JavaScript to display content DNV GL © 2014 DRAFT 22 August 2014 3
  4. 4. Logical structure (image borrowed with permission ) DNV GL © 2014 DRAFT 22 August 2014 4
  5. 5. Where are they used? DNV GL © 2014 DRAFT 22 August 2014 5
  6. 6. Web parts which use Display Templates DNV GL © 2014 DRAFT 22 August 2014  Search Box  Refinement (Control + Item)  Search Result – Control – Item – Group (harder to change)  Content By Search – Control – Item 6
  7. 7. Where are the templates located?  Located in each site collection – /_catalogs/masterpage/Display Templates DNV GL © 2014 DRAFT 22 August 2014 7
  8. 8. DNV GL © 2014 DRAFT 22 August 2014 Gotcha’s  Remember to publish and approve 8
  9. 9. A template may be used for multiple things  Re-use template for Search Result and CSWP DNV GL © 2014 DRAFT 22 August 2014 9
  10. 10. What triggers a Display Template to be used?  Hard coded in web part – Common mistake Trigger Conditions DNV GL © 2014 DRAFT 22 August 2014  Result Type – Best practise 10 Display Template
  11. 11. Best Practise for Web Part Setup DNV GL © 2014 DRAFT 22 August 2014 11 Web Part Result Source (Scope) Result Type Item Template Control Template
  12. 12. Web Part Query Setup DNV GL © 2014 DRAFT 22 August 2014 12 Pick a result source Define the query as a result source instead Much easier to change – no page edit required
  13. 13. Include custom Script/CSS  Include custom CSS/JS in the control templates – Executed before results are rendered  Execute JavaScript after your results are rendered DNV GL © 2014 DRAFT 22 August 2014 13 ctx.OnPostRender = []; ctx.OnPostRender.push(function(){ <your code> });
  14. 14. 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 DNV GL © 2014 DRAFT 22 August 2014 – NoRecall  Use in templates <mso:ManagedPropertyMapping msdt:dt="string">'bestbetTitleOWSTEXT':'VerIT.bestbetTitleOWSTEXT','bestbetDescriptionOWSMTXT':'VerIT. bestbetDescriptionOWSMTXT','bestbetUrlOWSTEXT':'VerIT.bestbetUrlOWSTEXT','bestbetImageUrlOWSTEXT':'Ver IT.bestbetImageUrlOWSTEXT'</mso:ManagedPropertyMapping> var bbTitle = $getItemValue(ctx,"bestbetTitleOWSTEXT").value;  For hover panels, be sure to include custom properties in the item template 14
  15. 15. References: techmikael.blogspot.com www.eliostruyf.com www.dotnetmafia.com github.com/SPCSR SAFER, SMARTER, GREENER DNV GL © 2014 DRAFT 22 August 2014 www.dnvgl.com 15
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×