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

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. 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. What does it do?
 Uses managed properties
 Uses HTML and JavaScript to display content
DNV GL © 2014
DRAFT
22 August 2014
3

4. Logical structure (image borrowed with permission )
DNV GL © 2014
DRAFT
22 August 2014
4

5. Where are they used?
DNV GL © 2014
DRAFT
22 August 2014
5

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. Where are the templates located?
 Located in each site collection
– /_catalogs/masterpage/Display Templates
DNV GL © 2014
DRAFT
22 August 2014
7

8. DNV GL © 2014
DRAFT
22 August 2014
Gotcha’s
 Remember to publish and approve
8

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. 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. 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. 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. 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. 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. 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