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

Design

ericoverfield pixelmill

com4display templates

js sharepoint

comwhat aredisplay templates

html file sharepoint

display template folder

branding sharepoint

rendering content