1 / 53

Farewell XSL, Welcome Display Templates

Elio Struyf. Farewell XSL, Welcome Display Templates. Elio Struyf. ”I’m a SharePoint consultant with a passion for branding and development”. SharePoint Consultant Xylos Belgium. Contact @eliostruyf www.eliostruyf.com info@estruyf.be. Agenda. The Past & Present

kelsie-wilkinson
Download Presentation

Farewell XSL, Welcome Display Templates

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Elio Struyf Farewell XSL, Welcome Display Templates

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

  3. Agenda 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 latestdocuments CQWP Libraries

  6. Show the latest documents of various site collections CQWP Search CoreResults Site Collections

  7. Just again another day with XSL

  8. Here & now Office 365 / SharePoint 2013

  9. JS Comment - HTML

  10. Office 365 – SharePoint 2013 • New: Content Search Web Part • Updated: Search Results Web Part • No site collectionlimitation • HTML & JavaScript CSWP  Enterprise Licence – Office 365 E3 & E4

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

  12. Comparison Content Query WP • Site collectionlimitation • XSLT • Instant results • Server Side Rendering • Client Performance • Minor / major versions ContentSearch WP • No site collectionlimitation • Display Templates • Requires a crawl • Client Side Rendering • Server Performance • Onlymajorversions

  13. Query Builder

  14. Let’s welcome display templates

  15. What are Display Templates? • Defines the visual layout of search results • HTML File  JavaScript File • Client side rendering

  16. What does it do? • Uses managed properties • Displays via HTML and JavaScript Title + Path File extension Document summary Path

  17. Logical structure Web Part Specifieswhich query and templates willbeused. Control Template Provides the overall layouthowyou want to present the results. Ex: list, list withpaging, slideshow. Item Template Defineshow the item itselfneedstoberendered.

  18. Where are they used?

  19. Before we start

  20. What to do before we start? • Create content • Crawl content • Define the managed properties / or use the auto-created ones • Crawl content again

  21. Creation process

  22. Creating a Display Template • Mapping the master page gallery • Path: /_catalogs/masterpage/Display Templates/ • Best to start with an existing template • Use an editor of your choice

  23. The end result

  24. Control Display Template

  25. Control Template Recap Load custom CSS files $includeCSS(this.url, "~sitecollection/_catalogs/masterpage/SPSNL/css/slider.css"); Load custom JavaScript files $includeScript(this.url, "~sitecollection/_catalogs/masterpage/SPSNL/js/slider.js "); Write JavaScript as comments in the HTML file <!--#_ _#--> Write your HTML mark-up inside the first <div>

  26. Item Display Template

  27. Item Template Recap Property Mapping <mso:ManagedPropertyMappingmsdt:dt="string"> ‘Property Name JS' {Property Display Name}:'Managed Property' 'Picture URL'{Picture URL}:'PublishingImage'</mso:ManagedPropertyMapping> Getpropertyvalue varpictureURL = $getItemValue(ctx, 'Picture URL'); Using the variable _#= pictureURL =#_

  28. Event Handling

  29. Event Handling Recap UseAddPostRenderCallback / OnPostRendertoensurethat control and item HTML content is loaded AddPostRenderCallback(ctx, function(){ // Write here your JavaScript code }); ctx.OnPostRender = []; ctx.OnPostRender.push(function () { // or write it in here });

  30. Troubleshooting

  31. Getting to know the values <xsl:templatename=”Debug”match=”Row[@Style='Debug']”mode=”itemstyle”> <xsl:for-eachselect=”@*”> Property Name: <xsl:value-ofselect=”name()” /><br /> Value: <xsl:value-ofselect=”.” /><br/> </xsl:for-each> </xsl:template>

  32. Diagnostic Template

  33. Ultimate diagnostic display template

  34. Ultimate diagnostic display template Office 365 or future on-premises updates var folder = list.RootFolder; var props = folder.Properties; props["vti_indexedpropertykeys"] = "UAB1AGIAbABpAHMAaABpAG4AZwBDAGEAdABhAGwAbwBnAFMAZQB0AHQAaQBuAGcAcwA=|SQBzAFAAdQBiAGwAaQBzAGgAaQBuAGcAQwBhAHQAYQBsAG8AZwA=|"; props["IsPublishingCatalog"] = "True"; folder.Update(); BASE64: PublishingCatalogSettings|IsPublishingCatalog Reference MikaelSvenson: http://elst.es/1oTLk4j

  35. SharePoint 2007

  36. SharePoint 2010

  37. Display Template Messages Firefox Firebug / IE Developer Tools / …

  38. Tips & Tricks

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

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

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

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

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

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

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

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

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

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

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

More Related