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.

Breaking Down Display Templates in SharePoint 2013

3,780 views

Published on

SharePoint 2013 utilizes search for everything, which is great! But what do you do when you want to customize results? XSLT like we used in the past? Please say no! Along with a huge improvement in search, SharePoint 2013 introduces Display Template to allow us to format results using technologies we already know including HTML and JavaScript.

In this class, we see how SharePoint 2013 uses display templates to render data produced by the Content Search, Search Results, Refinement Web Parts and more. We will look at common out-of-the-box display templates and where they are used. We will then tear a few of these displaytemplates apart and see how they tick, thus giving us the knowledge and power to create interfaces that rival the best websites out there. Display what you want, how you want it.

Published in: Design
  • Be the first to comment

Breaking Down Display Templates in SharePoint 2013

  1. 1. Eric Overfield SharePoint Advocate and Enthusiast PixelMill http://pxml.ly/EO-SP-DisplayTemplates Display Templates Breaking Down
  2. 2. Introduction – Eric Overfield  Founder and SharePoint Branding/UI Lead, PixelMill  Speaker, Teacher, Advocate  Author, SharePoint Community Organizer  Located in Davis, CA ericoverfield.com @EricOverfield Order Your Copy http://pxml.ly/zsqykd Co-author: “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) Co-author: “Black Magic Solutions for White Hat SharePoint” (August, 2013)
  3. 3. What You Will Learn  What are Display Templates  Where we use Display Templates  Types of Display Templates  How to create our own Display Templates @EricOverfield - pixelmill.com
  4. 4. What are Display Templates @EricOverfield - pixelmill.com
  5. 5. Display Templates in a Nut Shell  JavaScript based templates for rendering content @EricOverfield - pixelmill.com  Based on Client Side Rendering (CSR)  HTML/JS rendering occurs at client side, not server side  Replaces the need for XSLT!  We work with HTML files, SharePoint handles most JS  SharePoint 2013 / SharePoint Online rendering engine
  6. 6. @EricOverfield - pixelmill.com Where we use Display Templates
  7. 7. Display Templates are Now Everywhere  Refiners @EricOverfield - pixelmill.com  Content Search Web Part  Certain System Pages  i.e. CSWP Query Builder, Reports, eDiscovery  Search Results and Hover Panels
  8. 8. @EricOverfield - pixelmill.com
  9. 9. Display Template Alternatives?  XSLT still available for server side rendering  Must be set by exporting a Content Search Webpart  Set “AlwaysRenderOnServer” property to true  Sample XSLT can be found in: /_catalogs/masterpage/Display Templates/Server Style Sheets @EricOverfield - pixelmill.com  Content Query Web Part still uses XSLT
  10. 10. @EricOverfield - pixelmill.com Types of Display Templates
  11. 11. Control Templates and Item Templates  Control Templates (Similar to ContentQueryMain.xsl)  Used once per query, i.e. a general wrapper  Item Templates (Similar to ItemStyle.xsl)  Used once per result @EricOverfield - pixelmill.com
  12. 12. Finding Display Templates  /_catalogs/masterpage/Display Templates @EricOverfield - pixelmill.com  Stored in Master Page Gallery  Custom Display Template may be stored anywhere in MPG  Just have to properly set Content Types and Properties  Each Display Template includes a .html and a .js file  Only customize the .html file  Unless you choose to live dangerously…
  13. 13. Finding Display Templates @EricOverfield - pixelmill.com Demo
  14. 14. Create Our Own Display Templates @EricOverfield - pixelmill.com
  15. 15. Creating a Custom Display Template  Copy, paste and rename only the .html file  SharePoint will handle the .js for you @EricOverfield - pixelmill.com  Always start from an existing Display Template  Modify at least the <title /> tag  Place all custom code* after the first <div>
  16. 16. Creating a Custom Display Template @EricOverfield - pixelmill.com Demo
  17. 17. Display Template Components @EricOverfield - pixelmill.com
  18. 18. Breaking Down Control Templates @EricOverfield - pixelmill.com  <html>  <title /> (“name” of display template)  <body>  <div> (only place custom code after first div)  Include scripts / links to custom CSS  Additional pre-rendering JavaScript including post render binding  AddPostRenderCallback() or ctx.OnPostRender.push()  Finally your custom display code (HTML and JavaScript)
  19. 19. Breaking Down Item Templates @EricOverfield - pixelmill.com  <html>  <title /> (“name” of display template)  <mso:ManagedPropertyMapping /> ‘JS Reference Name’{Display Name}:’Manager Property list’; i.e. 'Picture URL'{Picture URL}:'PublishingImage;PictureURL;'  <body>  <div> (only place custom code after first div)  Additional pre-rendering JavaScript  Finally your custom item display code (HTML and JavaScript)
  20. 20. Custom Control and Item Display Templates @EricOverfield - pixelmill.com Demo
  21. 21. Search Results and Display Templates @EricOverfield - pixelmill.com
  22. 22. Search Results and Display Templates @EricOverfield - pixelmill.com  Display Templates used for  Refinement panels  Search Input control  Search results and result types  Hover panels  With results types, set specific item templates per item type
  23. 23. Search Results, Hover Panels, Refinement Panels and Display Templates @EricOverfield - pixelmill.com Demo
  24. 24. Debugging Display Templates @EricOverfield - pixelmill.com  Use browser developer toolbar or Visual Studio  I prefer console.log(), or set breakpoints  Binding to Visual Studio is great for long debug sessions
  25. 25. Debugging Display Templates @EricOverfield - pixelmill.com Demo
  26. 26. Important JavaScript Reference @EricOverfield - pixelmill.com  AddPostRenderCallback(ctx, function () {});  $getItemValue(ctx, "JS Reference Name");  $includeScript(this.url, "~sitecollection/…/?.js");  $includeCSS(this.url, "~sitecollection/…/?.css");  ctx.ClientControl.get_numberOfItems(); (per page)  ctx.DataProvider.get_totalRows(); (total rows)  $isNull(object), $isEmptyString(string)
  27. 27. A Quick Review @EricOverfield - pixelmill.com  What are Display Templates  Where we use Display Templates  Types of Display Templates  How to create our own Display Templates
  28. 28. Special Thanks Corey Roth (Outstanding session from SPC 2014) http://pxml.ly/2DF48QX @EricOverfield - pixelmill.com Marc Anderson (Inspiration) http://pxml.ly/2F6U9hH Elio Struyf (Accordion/Tab Display Template Demo Concept) http://pxml.ly/2KDNB3R
  29. 29. Resources SharePoint 2013 Design Manager display templates (MSDN) http://pxml.ly/26P96C Ultimate Diagnostic Display Template (CSWP) – on GitHub http://pxml.ly/A3ANNG Display template reference in SharePoint Server 2013 (TechNet) http://pxml.ly/2KDNNKP 4 tips for using jQuery with SharePoint Display Templates http://pxml.ly/3ZAD2GA 10 SharePoint display template tips and tricks http://pxml.ly/MBVWT34 The Anatomy of SharePoint 2013 Display Templates http://pxml.ly/U8YU94X @EricOverfield - pixelmill.com Useful JavaScript to know when working with SharePoint Display Templates http://pxml.ly/ZE87BNW Demo Source files on GitHub http://pxml.ly/cDGtygL
  30. 30. Thank You Eric Overfield @EricOverfield ericoverfield.com Order Your Copy http://pxml.ly/zsqykd “Pro SharePoint 2013 Branding and Responsive Web Development” (Apress – June 12th, 2013) http://pxml.ly/EO-SP-DisplayTemplates Display Templates Breaking Down

×