The document discusses the transition from using XSL templates to display search results in SharePoint 2010 to using display templates in SharePoint 2013. It provides an overview of what display templates are and how they can be used to display search results across site collections without limitations. The document then covers how to create display templates, including control and item templates, and how to add event handling and debugging. It concludes with some tips for working with display templates such as only modifying HTML and keeping JavaScript clean and fast.

1. Farewell XSL,
Welcome Display Templates

2. ”I’m a SharePoint consultant
with a passion for branding
and development”
Elio Struyf
SharePoint Consultant
Xylos
Belgium
Contact
@eliostruyf
www.eliostruyf.com
info@estruyf.be

3.  The Past & Present
 What are Display Templates?
 What to do before we start
 Creating Display Templates
 Troubleshooting
 Tips & Tricks

4. The Past
SharePoint 2007 / 2010

5. Showing the latest documents
Libraries
CQWP

7. Show the latest documents of
various site collections
CQWP
Site Collections
Search Core Results

8. Just again another day with XSL

9. Here & now
Office 365 / SharePoint 2013

10. HTML
Comment - JS

11. Office 365 – SharePoint 2013
CSWP  Enterprise Licence – Office 365 E3 & E4

12. Show the latest documents of
various site collections
Site Collections
Crawl
Search CSWP

13. Comparison
Content Query WP
• Site collection limitation
• XSLT
• Instant results
• Server Side Rendering
• Client Performance
• Minor / major versions
Content Search WP
• No site collection limitation
• Display Templates
• Requires a crawl
• Client Side Rendering
• Server Performance
• Only major versions

14. Query Builder

15. Let’s welcome display templates

16. What are Display Templates?

17. What does it do?
File extension Title + Path
Path
Document summary

18. Logical structure
Specifies which query
and templates will be
used.
Provides the overall layout how
you want to present the results.
Ex: list, list with paging, slideshow.
Defines how the item
itself needs to be
rendered.

19. Where are they used?

20. Before we start

21. What to do before we start?

22. Creation process

23. Creating a Display Template

24. The end result

25. Control Display Template

26. Control Template Recap

27. Item Display Template

28. Item Template Recap

29. Event Handling

30. Event Handling Recap

31. Troubleshooting

32. Getting to know the values
<xsl:template name=”Debug” match=”Row[@Style='Debug']” mode=”itemstyle”>
<xsl:for-each select=”@*”>
<xsl:value-of select=”name()” /><br />
xsl:value-of select=”.” /><br />
</xsl:for-each>
</xsl:template>

33. Diagnostic Template

34. Ultimate diagnostic display template

35. Ultimate diagnostic display template
Reference Mikael Svenson: http://elst.es/1oTLk4j
var folder = list.RootFolder;
var props = folder.Properties;
props["vti_indexedpropertykeys"] =
"UAB1AGIAbABpAHMAaABpAG4AZwBDAGEAdABhAGwAbwBnAFMAZQB0AHQAaQBuAGcAcwA
=|SQBzAFAAdQBiAGwAaQBzAGgAaQBuAGcAQwBhAHQAYQBsAG8AZwA=|";
props["IsPublishingCatalog"] = "True";
folder.Update();
BASE64: PublishingCatalogSettings|IsPublishingCatalog

36. SharePoint 2007

37. SharePoint 2010

38. Display Template Messages

39. Tips & Tricks

40. Only do your changes in the HTML files
 Doing changes in JavaScript could end up in
corrupt files
Tip 1

41. Do not modify OOTB display templates, create a
copy instead
 Remember the ItemStyle.xsl, we were all guilty
Tip 2

42. Searching where they are located?
 Do not make it hard, place them in your own
project folders.
Tip 3

43. If you’re writing lots of code
 Do it in a separated JavaScript file, that way you
can easier debug your solutions
Tip 4

44. Provisioning of display templates?
HTML
 Only publishing site
 Conversion takes time
 Needs extra coding
JS
 Quick and easy
 Leave the HTML in TFS
Tip 5

45. Check the values and types you retrieve
 This could save you debugging time
Tip 6

46. Dare to open the JS files to check syntax errors
 Because everything is written in HTML
comments, it’s hard to see syntax errors
Tip 7

47. Want to do DOM changes via JavaScript?
 Use the AddPostRenderCallback method
Tip 8

48. Keep in mind that it is CSR (client side rendering)
 Keep it clean
 Keep it fast
Tip 9

49. Learn to getting used to JavaScript
 Very easy to start experimenting
 Frameworks like jQuery could simplify the
process
Tip 10

50. #SPCSR
https://github.com/SPCSR

51. Questions?

52. Clean Search Results WP Display Templates - http://elst.es/1eClIBQ
Provisioning Display Templates - http://elst.es/1iGspnc -
http://elst.es/1hhpqBj
What is Required for Display Templates - http://elst.es/1fr8RoV
Showing Alternating Rows - http://elst.es/1gE7oIl
Replacing the OOTB Small Search Input Box - http://elst.es/1eGeJYy
Ultimate Diagnostic Display Template - http://elst.es/1fnOyZR
References

53. THANK YOU