Farewell XSL,
Welcome Display
Templates
#spsbe33
Elio Struyf

#SPSBE33
Thanks to our
Sponsors
Platinum
Gold
Silver

#SPSBE33
About me
Elio Struyf
SharePoint Consultant @ Xylos
Brander / Developer
eliostruyf
http://estruyf.be/blog

#SPSBE33
Agenda
• The Past & Present
• What are Display Templates?
• Where are they used?
• What to do before you can start
• Creating Display Templates

The Past & Present

#SPSBE33
The Past
SP2007
SP2010
Libraries
CQWP
Show the latest documents

#SPSBE33

#SPSBE33
The Past
SP2007
SP2010
CQWP
Show the latest documents of various site collection
Site Collections
Search Core Results

The Present

#SPSBE33
The Present
SP2013
• CSWP / Search Results WP
• No site collection limitation
• HTML & JavaScript
• Query Builder

#SPSBE33

#SPSBE33
The Present
SP2013
Show the latest documents of various site collection
Site Collections
Crawl
Search CSWP

Welcome
Display Templates

#SPSBE33
What are
Display
Templates?
• Defines the visual layout of your
search results
• Written in HTML & JS
• HTML File  JavaScript File
• Client side rendering

#SPSBE33
What it does
• Retrieves managed metadata
• Displays via HTML and
JavaScriptFile extension Title + Path
Path
Document summary

#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

#SPSBE33
Where are they used?

Can I Start?

#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

#SPSBE33
Supported
Fields
• All fields that can be indexed
• Includes:
http://bit.ly/ZXsxSU
o Lookup fields (manual)
o Choice fields
o Managed Metadata

Let the creation begin

#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

Control Display Template
Let the fun begin

#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");

Item Display template
Demo

#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 =#_

Event Handling
Demo

#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
});

#SPSBE33
Debugging
• Display templates shows
problems
• Firefox Firebug / IE Developer
Tools
4/29/2013 29

Q&A
Feedback via Twitter: #SPSBE33

#SPSBE33
THANK YOU
Elio Struyf
Elio.Struyf@Xylos.com
eliostruyf
http://estruyf.be/blog