Using JSLink and Display Templates with the List View Web Part for ITPros#SPSBE23Paul HuntApril 26th, 2014

Thanks to our sponsors!

Gold

Silver

Who Am I?

• SharePoint Architect for Trinity Expert Systems

• Co-organiser of SUGUK London Region

• Member of the SharePoint community since 2007

• In my spare time I’m a woodturner, making Pots, Pens and artistic pieces!

• Paul Hunt• Twitter: @Cimares• www.myfatblog.co.uk• www.trinityservice.co

.uk

What is this session all about?• The List View Web Part

Who’s this session for?• Primarily First/Second tier developers

ITPros who customised 2010 list views in SPD ITPros that used to write their own XSLT in SP2010 Developers that want to know what's available before opening

VS2012

• On Premises or Office 365 Deployments• Might not be ideal for someone who isn’t comfortable with

JavaScript, HTML and CSS.– Though if you used to play in SPD 2010 you’re halfway there!– If you want to know what's achievable without deployed solutions

IT Pro?Developer?Power User?End/Business User?Other?

What did we used to do?

What did we used to do?• We used SPD and the Design View

We did conditional formatting Played with colours Injected Hyperlinks

What did we used to do?• But

No design view anymore!

What did we used to do?• We used XSLT Overrides (Still exist, but

deprecated!)

What did we used to do?• We used XSLT Overrides (Still exist, but

deprecated!) Which took boring list data views

What did we used to do?• We used XSLT Overrides (Still exist, but

deprecated!) And transformed them into engaging visual representations

What did we used to do?• We used custom code solutions (We still can!)

Custom CAML Rendering Templates Custom List Views Custom Web Parts

• All bring additional headaches

So why the focus on Client Side Rendering?

• It’s client side, moving the impact of customisations off of the web server and onto the often powerful and under utilised client machine

SETI@Home

Folding@Home

So why the focus on Client Side Rendering?

• It’s client side, moving the impact of customisations off of the web server and onto the often powerful and under utilised client machine

• Some client machines may struggle with heavy Javascript loads!

So why the focus on Client Side Rendering?

Specifically why JavaScript, HTML and CSS?• It’s easier to develop..• Much simpler than XSLT• Certainly easier to troubleshoot than XSLT• Likely to have the skills in house• Cross-platform (ish!)

Some frameworks such as jQuery help with this

Exactly what is a JavaScript Display Template?

Exactly what is a JavaScript Display Template?• A small piece of JavaScript code that is called

by the browser AFTER the page has been delivered.

• They are prolific in SharePoint 2013 Some examples

Search Results Field Rendering Search Refiners List Forms List views eDiscovery

There are 5 Content Types that represent display templates.

JavaScript Display TemplateControl Display TemplateGroup Display TemplateItem Display TemplateFilter Display Template

Display Template Content Types

These 4 relate to Search.

Not all display templates are created equally

LVWP Display Templates are JavaScript only.

They do not start life as HTML like Display Templates for search do.

They do not require embedded properties.

CONTEXT (ctx) is king!

LVWP Templates != Search Display Templates

22

We’re just looking at:-• List View Display Templates

These provide the ability to override the rendering of an entire view

• Field Rendering Display Templates These provide the ability to override the rendering of a single field

in a list view

Page Lifecycle – The Foundations

Page lifecycle – The Foundations• SharePoint outputs JSLink in the Header of the

page This registers our Display Template

Page lifecycle – The Foundations• SharePoint LVWP outputs the list data into the

page JSON Object Format

Page lifecycle – The Foundations• And finally after setting things up

Calls the RenderListView() function for the web part.

• Which in turn:– Calls the GetTemplates()

Page lifecycle – The Result• Which compares the Context object to the list

of registered overrides

• And if everything is in place, our override wins the battle!

###CALLOUT

Internal Name Pain!Click to insert photo.

###CALLOUT – Internal Name Pain• Creating your fields carefully will save you pain!

Create Rename

###CALLOUT – Internal Name Pain• Creating your fields carefully will save you pain!

• Internal names get encoded once, then URL encoded when displayed.

• The displayed name The%5Fx0020%5Fnumber%5Fx0020%5Fof%5Fx0020%5F

• Is actually an internal name of: The_x0020_number_x0020_of_x0020_

###CALLOUT – Internal Name Pain• Creating your fields carefully will save you pain!• Multiple long field names lose meaning

• The_x0020_number_x0020_of_x0020_

• The_x0020_number_x0020_of_x0020_0

Anatomy of a List View Display Template

Anatomy of a List View Display Template• Start with an empty .JS (Or copy example

templates)• Define a Function to register the Display

Template• Define the Function called by the Display

Template for each item.• Call the register function

Anatomy of a List View Display Template• Define a Function to register the Display Template

For a list of template types see - http://bit.ly/169AbS9

Anatomy of a List View Display Template• Define the Function called by the Display

Template

• Note the use of ctx.CurrentItem.Title– Any field in the view can be obtained this way– You must use the internal name

• Obtained from the edit column screen– Beware the double encoding issue!

• Or using the browser debugger

Anatomy of a List View Display Template• Call the function we defined when the page

loads.

Anatomy of a Field Rendering Display Template

• All that really changes is the override set-up

• This time there are no headers/footers• We only specify the Base View ID/Field Name

Anatomy of a Field Rendering Display Template

• The render function is similar to the list view item function

How do we use them with List Views?• First we need to upload/create them in the

MasterPage gallery

How do we use them with List Views?• Set some metadata

How do we use them with List Views?• Add a link into the JSLink on the web part• Note the ~token in use

– ~sitecollection– ~site – ~layouts – ~sitecollectionlayouts– ~sitelayouts

• You can have multiple JSLinks– Join them with |

DEMO - Adding JSLink to a web part.

Adding JSLink Demo

How do we troubleshoot?• IE Developers Toolbar (Other debuggers exist!)

How do we troubleshoot?• Fiddler – HTTP Proxy

How do we troubleshoot?• Fiddler – HTTP Proxy

DEMO - Troubleshooting in IE with the Developer Toolbar

http://bit.ly/12kMPvr

There has to be a catch?• Minimal Download Strategy• Multiple list views on a page• Changing SharePoint functionality

There has to be a catch?• Minimal Download Strategy

Our display templates work on page load But fail during a refresh. This is because our JavaScript doesn’t get called a second time

• Two workarounds!• Turn off the Minimal Download Feature in each

Web• Include the relevant JavaScript in your Display Template code

There has to be a catch?• Multiple list views on a page

Because of the way Display Templates are registered, it’s not possible to have two on the page if the list templates are the same.

(E.g. Custom TemplateType = 100) There is a workaround though published on my blog

http://bit.ly/JSLinkIssues

There has to be a catch?• Changing/Breaking SharePoint functionality

For example, overriding the Tasks view breaks SharePoint rendering.

This is fixed in the earlier Field demo with a couple of lines of JavaScript.

Display Template Demos

Questions?

54Call to Action!• Take a look at these sites for more detailed info

• Wes Preston – JS Link a primer - http://bit.ly/102fcNa

• Martin Hatch – JSLink 7 part series - http://bit.ly/Hh5zFk

• My blog Solving the multiple list view issue - http://bit.ly/JSLinkIssues Editing local JS files using fiddler - http://bit.ly/EditUsingFiddler

Don’t forget SharePint!

• SHARE·PINT: [SHAIR-PAHYNT]Noun1. An assembly or meeting in relation to Microsoft SharePoint, accompanied with an alcoholic beverage.

Thank you!