SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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
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
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
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
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
});
31.
#SPSBE33
THANK YOU
Elio Struyf
Elio.Struyf@Xylos.com
eliostruyf
http://estruyf.be/blog
Editor's Notes
Template may not be modified Twitter hashtag: #spsbe for all sessions
Client-side rendering is what you wantBy default the Content Search Web Part uses client-side rendering. Using JavaScript-based Display Templates it allows you to build rich and dynamic experiences. With nothing more than the standard capabilities provided with SharePoint 2013 you can easily turn static content aggregations into interactive overviews that can be filtered using refiners to help users find the content that they are looking for.Another benefit of using client-side rendering is less performance impact on the server. Because the rendering happens in the browser, SharePoint can now spend less time on building up pages and have them served faster what leads to increased perceived performance.Despite all those benefits there are still scenarios when you might need to use server-side rendering instead.