Upload
eric-overfield
View
841
Download
0
Tags:
Embed Size (px)
Citation preview
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
Display Templates in a Nut Shell
JavaScript based templates for rendering content
@EricOverfield - pixelmill.com
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
Display Templates are Now Everywhere
Refiners
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
Content Query Web Part still uses XSLT
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
@EricOverfield - pixelmill.com
Finding Display Templates
/_catalogs/masterpage/Display Templates
@EricOverfield - pixelmill.com
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…
Creating a Custom Display Template
Copy, paste and rename only the .html file
SharePoint will handle the .js for you
@EricOverfield - pixelmill.com
Always start from an existing Display Template
Modify at least the <title /> tag
Place all custom code* after the first <div>
Breaking Down Control Templates
@EricOverfield - pixelmill.com
<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
@EricOverfield - pixelmill.com
<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)
Search Results and Display Templates
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
Demo
Debugging Display Templates
@EricOverfield - pixelmill.com
Use browser developer toolbar or Visual Studio
I prefer console.log(), or set breakpoints
Binding to Visual Studio is great for long debug sessions
Important JavaScript Reference
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
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
@EricOverfield - pixelmill.com
Useful JavaScript to know when working with SharePoint Display Templates
http://pxml.ly/ZE87BNW
Demo Source files on GitHub
http://pxml.ly/cDGtygL