Slide 1

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