Marc D Anderson
Anatomy of a Display Template
Who Is Marc?
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
•
•
•
•
•
•
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 needs
Image Source: SharePoint 2013 Design Manager display templates (MSDN)
http://msdn.microsoft.com/en-us/library/office/jj945138(v=office.15).aspx
Control_blank. html
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?
• Title
• mso:ManagedPropertyMapping
maps from managed properties to
“slots”
• Mso:MasterPageDescription
contains the description shown in
selectors
Item_Picture3Lines. html
Declarations in Display Templates
• JavaScript setup
code
• Script goes inside
<!--#_
and
_#-->
blocks
Control_List. html
JavaScript in Display Templates
• 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-templatesspc3000-spc14.aspx
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
Microsoft
SharePoint 2013 Design Manager display templates (MSDN) http://msdn.microsoft.com/enus/library/office/jj945138(v=office.15).aspx
Display template reference in SharePoint Server 2013 http://technet.microsoft.com/en-us/library/jj944947.aspx
Corey Roth
Useful JavaScript to know when working with SharePoint Display Templates (#SPC3000)
http://dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepointdisplay-templates-spc3000-spc14.aspx
4 tips for using jQuery with SharePoint Display Templates
http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/13/for-tips-for-using-jquery-with-sharepointdisplay-templates.aspx
Changing the look of Search using Display Templates and CSR
http://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC3000
Sharegate Display Template Examples
Animated Menu Display Template (Benjamin Niaulin)
http://en.share-gate.com/blog/sharepoint-2013-animated-menu-search-display-template
Image Slider Display Template (Yohan Belval)
http://en.share-gate.com/blog/image-slider-with-sharepoint-2013-search-results
Contact Information
Email marc.anderson@sympraxisconsulting.com
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