Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Farewell XSL, Welcome Display Templates SPSNL

835 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Farewell XSL, Welcome Display Templates SPSNL

  1. 1. Farewell XSL, Welcome Display Templates
  2. 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. 3.  The Past & Present  What are Display Templates?  What to do before we start  Creating Display Templates  Troubleshooting  Tips & Tricks
  4. 4. The Past SharePoint 2007 / 2010
  5. 5. Showing the latest documents Libraries CQWP
  6. 6. Show the latest documents of various site collections CQWP Site Collections Search Core Results
  7. 7. Just again another day with XSL
  8. 8. Here & now Office 365 / SharePoint 2013
  9. 9. HTML Comment - JS
  10. 10. Office 365 – SharePoint 2013 CSWP  Enterprise Licence – Office 365 E3 & E4
  11. 11. Show the latest documents of various site collections Site Collections Crawl Search CSWP
  12. 12. 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
  13. 13. Query Builder
  14. 14. Let’s welcome display templates
  15. 15. What are Display Templates?
  16. 16. What does it do? File extension Title + Path Path Document summary
  17. 17. 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.
  18. 18. Where are they used?
  19. 19. Before we start
  20. 20. What to do before we start?
  21. 21. Creation process
  22. 22. Creating a Display Template
  23. 23. The end result
  24. 24. Control Display Template
  25. 25. Control Template Recap
  26. 26. Item Display Template
  27. 27. Item Template Recap
  28. 28. Event Handling
  29. 29. Event Handling Recap
  30. 30. Troubleshooting
  31. 31. 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>
  32. 32. Diagnostic Template
  33. 33. Ultimate diagnostic display template
  34. 34. 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
  35. 35. SharePoint 2007
  36. 36. SharePoint 2010
  37. 37. Display Template Messages
  38. 38. Tips & Tricks
  39. 39. Only do your changes in the HTML files  Doing changes in JavaScript could end up in corrupt files Tip 1
  40. 40. Do not modify OOTB display templates, create a copy instead  Remember the ItemStyle.xsl, we were all guilty Tip 2
  41. 41. Searching where they are located?  Do not make it hard, place them in your own project folders. Tip 3
  42. 42. If you’re writing lots of code  Do it in a separated JavaScript file, that way you can easier debug your solutions Tip 4
  43. 43. 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
  44. 44. Check the values and types you retrieve  This could save you debugging time Tip 6
  45. 45. 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
  46. 46. Want to do DOM changes via JavaScript?  Use the AddPostRenderCallback method Tip 8
  47. 47. Keep in mind that it is CSR (client side rendering)  Keep it clean  Keep it fast Tip 9
  48. 48. Learn to getting used to JavaScript  Very easy to start experimenting  Frameworks like jQuery could simplify the process Tip 10
  49. 49. #SPCSR https://github.com/SPCSR
  50. 50. Questions?
  51. 51. 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
  52. 52. THANK YOU

×