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
http://estruyf.be/blog

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:
http://bit.ly/ZXsxSU
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
Elio.Struyf@Xylos.com
eliostruyf
http://estruyf.be/blog