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

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

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

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

33. Diagnostic Template

34. Ultimate diagnostic display template

35. Reference Mikael Svenson: http://elst.es/1oTLk4jhttp://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/1eClIBQhttp://elst.es/1eClIBQ Provisioning Display Templates - http://elst.es/1iGspnc - http://elst.es/1hhpqBjhttp://elst.es/1iGspnc http://elst.es/1hhpqBj What is Required for Display Templates - http://elst.es/1fr8RoVhttp://elst.es/1fr8RoV Showing Alternating Rows - http://elst.es/1gE7oIlhttp://elst.es/1gE7oIl Replacing the OOTB Small Search Input Box - http://elst.es/1eGeJYy http://elst.es/1eGeJYy Ultimate Diagnostic Display Template - http://elst.es/1fnOyZRhttp://elst.es/1fnOyZR References

53. THANK YOU