biwug presenation-spsbe33
TRANSCRIPT
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
SP2010CQWP
Show the latest documents of various site collections
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 collections
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 TemplateLet 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.slider.pack.js");
$includeCSS(this.url, "/_layouts/15/images/Nivo/Themes/Default/default.css");$includeCSS(this.url, "/_layouts/15/images/Nivo/nivo-slider.css");
Item Display templateDemo
#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 HandlingDemo
#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
• Diagnostic Display Template4/29/2013 29
Q&AFeedback via Twitter: #SPSBE33
