Breaking Down Display Templates in SharePoint 2013

Eric Overfield
SharePoint Advocate and Enthusiast
PixelMill
http://pxml.ly/EO-SP-DisplayTemplates
Display Templates
Breaking Down

Introduction – Eric Overfield
 Founder and SharePoint Branding/UI Lead, PixelMill
 Speaker, Teacher, Advocate
 Author, SharePoint Community Organizer
 Located in Davis, CA
ericoverfield.com
@EricOverfield
Order Your Copy
http://pxml.ly/zsqykd
Co-author: “Pro SharePoint 2013 Branding and Responsive
Web Development” (Apress – June 12th, 2013)
Co-author: “Black Magic Solutions for
White Hat SharePoint” (August, 2013)

What You Will Learn
 What are Display Templates
 Where we use Display Templates
 Types of Display Templates
 How to create our own Display Templates
@EricOverfield - pixelmill.com

What are
Display Templates

Display Templates in a Nut Shell
 JavaScript based templates for rendering content
 Based on Client Side Rendering (CSR)
 HTML/JS rendering occurs at client side, not server side
 Replaces the need for XSLT!
 We work with HTML files, SharePoint handles most JS
 SharePoint 2013 / SharePoint Online rendering engine

Where we use
Display Templates

Display Templates are Now Everywhere
 Refiners
 Content Search Web Part
 Certain System Pages
 i.e. CSWP Query Builder, Reports, eDiscovery
 Search Results and Hover Panels

Display Template Alternatives?
 XSLT still available for server side rendering
 Must be set by exporting a Content Search Webpart
 Set “AlwaysRenderOnServer” property to true
 Sample XSLT can be found in:
/_catalogs/masterpage/Display Templates/Server Style Sheets
 Content Query Web Part still uses XSLT

Types of
Display Templates

Control Templates and Item Templates
 Control Templates (Similar to ContentQueryMain.xsl)
 Used once per query, i.e. a general wrapper
 Item Templates (Similar to ItemStyle.xsl)
 Used once per result

Finding Display Templates
 /_catalogs/masterpage/Display Templates
 Stored in Master Page Gallery
 Custom Display Template may be stored anywhere in MPG
 Just have to properly set Content Types and Properties
 Each Display Template includes a .html and a .js file
 Only customize the .html file
 Unless you choose to live dangerously…

Finding
Display Templates
Demo

Create Our Own
Display Templates

Creating a Custom Display Template
 Copy, paste and rename only the .html file
 SharePoint will handle the .js for you
 Always start from an existing Display Template
 Modify at least the <title /> tag
 Place all custom code* after the first <div>

Creating a Custom
Display Template
Demo

Display Template
Components

Breaking Down Control Templates
 <html>
 <title /> (“name” of display template)
 <body>
 <div> (only place custom code after first div)
 Include scripts / links to custom CSS
 Additional pre-rendering JavaScript including post render binding
 AddPostRenderCallback() or ctx.OnPostRender.push()
 Finally your custom display code (HTML and JavaScript)

Breaking Down Item Templates
 <html>
 <title /> (“name” of display template)
 <mso:ManagedPropertyMapping />
‘JS Reference Name’{Display Name}:’Manager Property list’;
i.e. 'Picture URL'{Picture URL}:'PublishingImage;PictureURL;'
 <body>
 <div> (only place custom code after first div)
 Additional pre-rendering JavaScript
 Finally your custom item display code (HTML and JavaScript)

Custom Control and Item
Display Templates
Demo

Search Results and Display Templates

Search Results and Display Templates
 Display Templates used for
 Refinement panels
 Search Input control
 Search results and result types
 Hover panels
 With results types, set specific item templates per item type

Search Results, Hover Panels,
Refinement Panels and
Display Templates
Demo

Debugging Display Templates
 Use browser developer toolbar or Visual Studio
 I prefer console.log(), or set breakpoints
 Binding to Visual Studio is great for long debug sessions

Debugging
Display Templates
Demo

Important JavaScript Reference
 AddPostRenderCallback(ctx, function () {});
 $getItemValue(ctx, "JS Reference Name");
 $includeScript(this.url, "~sitecollection/…/?.js");
 $includeCSS(this.url, "~sitecollection/…/?.css");
 ctx.ClientControl.get_numberOfItems(); (per page)
 ctx.DataProvider.get_totalRows(); (total rows)
 $isNull(object), $isEmptyString(string)

A Quick Review
 What are Display Templates
 Where we use Display Templates
 Types of Display Templates
 How to create our own Display Templates

Special Thanks
Corey Roth (Outstanding session from SPC 2014)
http://pxml.ly/2DF48QX
Marc Anderson (Inspiration)
http://pxml.ly/2F6U9hH
Elio Struyf (Accordion/Tab Display Template Demo Concept)
http://pxml.ly/2KDNB3R

Resources
SharePoint 2013 Design Manager display templates (MSDN)
http://pxml.ly/26P96C
Ultimate Diagnostic Display Template (CSWP) – on GitHub
http://pxml.ly/A3ANNG
Display template reference in SharePoint Server 2013 (TechNet)
http://pxml.ly/2KDNNKP
4 tips for using jQuery with SharePoint Display Templates
http://pxml.ly/3ZAD2GA
10 SharePoint display template tips and tricks
http://pxml.ly/MBVWT34
The Anatomy of SharePoint 2013 Display Templates
http://pxml.ly/U8YU94X
Useful JavaScript to know when working with SharePoint Display Templates
http://pxml.ly/ZE87BNW
Demo Source files on GitHub
http://pxml.ly/cDGtygL

Thank You
Eric Overfield
@EricOverfield
ericoverfield.com
Order Your Copy
http://pxml.ly/zsqykd
“Pro SharePoint 2013 Branding and Responsive Web Development”
(Apress – June 12th, 2013)
http://pxml.ly/EO-SP-DisplayTemplates
Display Templates
Breaking Down

Breaking Down Display Templates in SharePoint 2013

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (19)

Plus de Eric Overfield

Plus de Eric Overfield (18)

Dernier

Dernier (20)

Breaking Down Display Templates in SharePoint 2013

Notes de l'éditeur