sptechcon sfo 2014 - anatomy of a display template
DESCRIPTION
If you’ve enjoyed working with Data View Web Parts (DVWPs) and XSL in the past, SharePoint 2013’s Display Templates may be just the right thing for you. If you consider yourself a front-end coder, they may be just right for you as well. Display Templates are a new way to format and display data in SharePoint 2013 for search results, the Content Search Web Part (CSWP), Refinement Web Parts, and more. Display Templates use HTML and JavaScript rather than XSL to format data on the client-side. We can develop our own Display Templates and combine them with third-party tools to create rich, powerful content rendering to equal the best websites out there. We’ll go through the anatomy of some of the most useful out-of-the-box Display Templates and look at how you can build your own useful customizations.TRANSCRIPT
Anatomy of a Display Template
Marc D Anderson
Who Is Marc?
• Co-Founder and President of Sympraxis Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform.• Over 30 years of experience in technology professional services and software development. Over a wide-ranging career in consulting as well as line manager positions, Marc has proven himself as a problem solver and leader who can solve difficult technology problems for organizations across a wide variety of industries and organization sizes.
• Awarded Microsoft MVP for SharePoint Server 2011-2014
Session Overview
If you’ve enjoyed working with Data View Web Parts (DVWPs) and XSL in the past, SharePoint 2013’s Display Templates may be just the right thing for you. If you consider yourself a front-end coder, they may be just right for you as well. Display Templates are a new way to format and display data in SharePoint 2013 for search results, the Content Search Web Part (CSWP), Refinement Web Parts, and more.
Display Templates use HTML and JavaScript rather than XSL to format data on the client-side. We can develop our own Display Templates and combine them with third-party tools to create rich, powerful content rendering to equal the best websites out there. We’ll go through the anatomy of some of the most useful out-of-the-box Display Templates and look at how you can build your own useful customizations.
Standing on the Shoulders of Giants…
Corey Roth for great blog posts and a stellar SPC14 presentation (#SPC3000)
Benjamin Niaulin and Yohan Belval for allowing me to use several custom Display Template examples from the Sharegate blog
Display Templates
New in SharePoint 2013 JavaScript and HTML driven Documentation is not great, but improving
Client Side Rendering (CSR)
Oft-used acronym with SharePoint 2013
Think of it as HTML, CSS, and JavaScript driven rendering of SharePoint data
Display Templates are an example of CSR
See also: JSLink
Display Templates Used By…
Search-dependent Web Parts Content Search Web Part Search Results Web Part etc.
NOT Content Query Web Part Note that SharePoint uses the same technology (Refiners, Filtering, etc.)
One source of data + many display options = Content Management
“Nirvana”
Content Search Web Parts (CSWPs) New in SharePoint 2013 Display Template driven
Depends on indexing schedule
Continuous crawling helps, but not a panacea
Where Can You Use Display Templates? Any page where you can add a search-driven Web Part
Not just for what we think of as “search”
Types of Display Templates
Content Web Parts – Content Search Web Parts
Filters – Refinement Panel, Search Filtering
Language Files – Localization Search – Search Center component Web Parts
Server Style Sheets System
Core system capabilities(here there be dragons)
Working with Display Templates Display Templates are stored
in the Master Page Gallery: ~sitecollection/_catalogs/masterpage/
Display Templates
Can access via Design Manager, SharePoint Designer, or Mapped Drive
Find a Display Template that is most similar to what you want
Copy the existing HTML file and edit that copy
Working with Display Templates When you create a display
template by copying the HTML file for an existing display template in the Display Templates folder in the Master Page Gallery: A .js file that has the same name is
created in the location where you copied the HTML file.
All markup required by SharePoint Server 2013 is added to the .js file so that the display template displays correctly.
The HTML file and the .js file are associated, so that any later edits to the HTML file are synched to the .js file when the HTML file is saved.
Source: SharePoint 2013 Design Manager display templates (MSDN)http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx
Working with Display Templates Edit the HTML file in the editor of your choice (Dreamweaver, SublimeText, whatever)
Upload or simply save in place
A little tough to work with because the script is set in comments
Moves processing from the server to the client, so be prudent
Display Templates Often Work in Pairs
Two parts: Control and Item Think of Control as the “wrapper” and
Item as the code which is repeated per item in the result set
Use Control and Item templates in different combinations to meet your needsImage Source: SharePoint 2013 Design Manager display templates (MSDN)
http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx
High Level Overview
Full HTML document (HTML, HEAD, BODY)
Declarations: What data do you want to retrieve?
Script: Processes the data Markup: How should we display the
content?
Con
trol
_bla
nk.
htm
l
Declarations in Display Templates Title mso:ManagedPropertyMapp
ing maps from managed properties to “slots”
Mso:MasterPageDescription contains the description shown in selectors
Item
_Pic
ture
3Li
nes.
htm
l
JavaScript in Display Templates JavaScript
setup code Script goes
inside<!--#_and_#-->blocks
ctx contains the current context
Resource: Useful JavaScript to know when working with SharePoint Display Templates (#SPC3000) by Corey Roth http://dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspx
Con
trol
_Lis
t. h
tml
Debugging Tips: Diagnostic Display Template Shows the raw data coming back from the query
Great for making sure you have the data you intend
Helps ensure you have mapped the correct properties
Shows which mapped property “matched”
Debugging Tips: Debugging Tools
Just like any client side work, it’s very important to understand the DOM Inspector tools
Debugging client side is absolutely possible, but may not be what you are used to
Demos
Useful Links
MicrosoftSharePoint 2013 Design Manager display templates (MSDN) http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspxDisplay template reference in SharePoint Server 2013 http://technet.microsoft.com/en-us/library/jj944947.aspx
Corey RothUseful JavaScript to know when working with SharePoint Display Templates (#SPC3000) http://dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspx4 tips for using jQuery with SharePoint Display Templateshttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/13/for-tips-for-using-jquery-with-sharepoint-display-templates.aspxChanging the look of Search using Display Templates and CSRhttp://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC3000
Sharegate Display Template ExamplesAnimated Menu Display Template (Benjamin Niaulin)http://en.share-gate.com/blog/sharepoint-2013-animated-menu-search-display-templateImage Slider Display Template (Yohan Belval)http://en.share-gate.com/blog/image-slider-with-sharepoint-2013-search-results
Contact Information
Email [email protected]
Twitter @sympmarc
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
Books http://sympmarc.com/books
The Middle Tier Manifesto
http://bit.ly/middletier