More Related Content


Biwug presenation-spsbe33

  1. Farewell XSL, Welcome Display Templates #spsbe33 Elio Struyf
  2. #SPSBE33 Thanks to our Sponsors Platinum Gold Silver
  3. #SPSBE33 About me Elio Struyf SharePoint Consultant @ Xylos Brander / Developer eliostruyf
  4. #SPSBE33 Agenda • The Past & Present • What are Display Templates? • Where are they used? • What to do before you can start • Creating Display Templates
  5. The Past & Present
  6. #SPSBE33 The Past SP2007 SP2010 Libraries CQWP Show the latest documents
  7. #SPSBE33
  8. #SPSBE33 The Past SP2007 SP2010 CQWP Show the latest documents of various site collection Site Collections Search Core Results
  9. The Present
  10. #SPSBE33 The Present SP2013 • CSWP / Search Results WP • No site collection limitation • HTML & JavaScript • Query Builder
  11. #SPSBE33
  12. #SPSBE33 The Present SP2013 Show the latest documents of various site collection Site Collections Crawl Search CSWP
  13. Welcome Display Templates
  14. #SPSBE33 What are Display Templates? • Defines the visual layout of your search results • Written in HTML & JS • HTML File  JavaScript File • Client side rendering
  15. #SPSBE33 What it does • Retrieves managed metadata • Displays via HTML and JavaScriptFile extension Title + Path Path Document summary
  16. #SPSBE33 Control Template Provides the overall layout how you want to present the results. Ex: list, list with paging, slideshow. Item Template Defines how the item itself needs to be rendered. Web Part Specifies which query and templates will be used. Logical Structure – Content Search WP
  17. #SPSBE33 Where are they used?
  18. Can I Start?
  19. #SPSBE33 What to do before you can start 1. Create content 2. Crawl content 3. Define managed properties / or use the auto-created ones 4. Crawl content again
  20. #SPSBE33 Supported Fields • All fields that can be indexed • Includes: o Lookup fields (manual) o Choice fields o Managed Metadata
  21. Let the creation begin
  22. #SPSBE33 Creating a display template • Map the master page gallery • /_catalogs/masterpage/Display Templates/ • Use one of the existing templates • Use an editor of your choice 4/29/2013 22
  23. Control Display Template Let the fun begin
  24. #SPSBE33 Control Template – Recap Load custom JavaScript files Load custom CSS files Write your HTML markup inside the first <div> $includeScript(this.url, "/_layouts/15/images/Nivo/jquery.nivo.slid "); $includeCSS(this.url, "/_layouts/15/images/Nivo/Themes/Default/ ss"); $includeCSS(this.url, "/_layouts/15/images/Nivo/nivo-slider.css");
  25. Item Display template Demo
  26. #SPSBE33 Item Template – Recap Property Mapping: Get property value Use the variable <mso:ManagedPropertyMapping msdt:dt="string"> ‘Property Name JS' {Property Display Name}:'Managed Property' 'Picture URL'{Picture URL}:'PublishingImage' </mso:ManagedPropertyMapping> var pictureURL = $getItemValue(ctx, 'Picture URL'); _#= pictureURL =#_
  27. Event Handling Demo
  28. #SPSBE33 Event Handling – Recap Use OnPostRender to ensure that control and item HTML content is loadedctx.OnPostRender = []; ctx.OnPostRender.push(function () { // Write here your JavaScript code });
  29. #SPSBE33 Debugging • Display templates shows problems • Firefox Firebug / IE Developer Tools 4/29/2013 29
  30. Q&A Feedback via Twitter: #SPSBE33
  31. #SPSBE33 THANK YOU Elio Struyf eliostruyf

Editor's Notes

  1. Template may not be modified Twitter hashtag: #spsbe for all sessions
  2. Client-side rendering is what you wantBy default the Content Search Web Part uses client-side rendering. Using JavaScript-based Display Templates it allows you to build rich and dynamic experiences. With nothing more than the standard capabilities provided with SharePoint 2013 you can easily turn static content aggregations into interactive overviews that can be filtered using refiners to help users find the content that they are looking for.Another benefit of using client-side rendering is less performance impact on the server. Because the rendering happens in the browser, SharePoint can now spend less time on building up pages and have them served faster what leads to increased perceived performance.Despite all those benefits there are still scenarios when you might need to use server-side rendering instead.
  3. http://sp2013app:2013/Pages/Products.aspx
  4. http://sp2013app/Search/Pages/results.aspx#k=ContentTypeId%3A0x0100660CF76371114F2AB72BD63111D9045801*
  5. http://sp2013app/SitePages/Display%20Templates%20Field%20Tests.aspx
  6. http://sp2013app/SitePages/Slideshow.aspx
  7. Please use a picture of yourself in a mountain/cloudscene