#spslondon - session 2 jslink for it pros

63
Using JSLink and Display Templates with the List View Web Part for ITPros Paul Hunt July 11 th , 2015

Upload: paul-hunt

Post on 06-Aug-2015

418 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: #SPSLondon - Session 2 JSLink for IT Pros

Using JSLink and Display Templates with the List View Web Part for ITProsPaul HuntJuly 11th, 2015

Page 2: #SPSLondon - Session 2 JSLink for IT Pros

Thanks to our Sponsors

Page 3: #SPSLondon - Session 2 JSLink for IT Pros

Who Am I?

• SharePoint Architect for Trustmarque

• 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

Page 4: #SPSLondon - Session 2 JSLink for IT Pros

Who Am I?

• SharePoint Architect for Trustmarque

• 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

Page 5: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 6: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 7: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 8: #SPSLondon - Session 2 JSLink for IT Pros

What did we used to do?

Page 9: #SPSLondon - Session 2 JSLink for IT Pros

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

We did conditional formatting Played with colours Injected Hyperlinks

Page 10: #SPSLondon - Session 2 JSLink for IT Pros

What did we used to do?• But

No design view anymore!

Page 11: #SPSLondon - Session 2 JSLink for IT Pros

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

deprecated!)

Page 12: #SPSLondon - Session 2 JSLink for IT Pros

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

deprecated!) Which took boring list data views

Page 13: #SPSLondon - Session 2 JSLink for IT Pros

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

deprecated!) And transformed them into engaging visual representations

Page 14: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 15: #SPSLondon - Session 2 JSLink for IT Pros

So why the focus on Client Side Rendering?

Page 16: #SPSLondon - Session 2 JSLink for IT Pros

• 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?

Page 17: #SPSLondon - Session 2 JSLink for IT Pros

• 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?

Page 18: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 19: #SPSLondon - Session 2 JSLink for IT Pros

Exactly what is a JavaScript Display Template?

Page 20: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 21: #SPSLondon - Session 2 JSLink for IT Pros

Display Template Content Types• There are 5 Content Types that represent

display templates.

JavaScript Display Template Control Display Template Group Display Template Item Display Template Filter Display Template

These 4 relate to Search.

Page 22: #SPSLondon - Session 2 JSLink for IT Pros

Not all display templates are created equally

Page 23: #SPSLondon - Session 2 JSLink for IT Pros

LVWP Templates != Search Display Templates

• 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!

23

Page 24: #SPSLondon - Session 2 JSLink for IT Pros

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 25: #SPSLondon - Session 2 JSLink for IT Pros

Page Lifecycle – The Foundations

Page 26: #SPSLondon - Session 2 JSLink for IT Pros

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

page This registers our Display Template

Page 27: #SPSLondon - Session 2 JSLink for IT Pros

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

page JSON Object Format

Page 28: #SPSLondon - Session 2 JSLink for IT Pros

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 29: #SPSLondon - Session 2 JSLink for IT Pros

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!

Page 30: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT

Internal Name Pain!Click to insert photo.

Page 31: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT – Internal Name Pain

The_x0020_number_x0020_of_x0020_

Page 32: #SPSLondon - Session 2 JSLink for IT Pros

• Internal names get encoded once, then URL encoded when displayed in the browser adding to the confusion!

• The internal name of: The_x0020_number_x0020_of_x0020_• Is actually displayed in the browser as :- The%5Fx0020%5Fnumber%5Fx0020%5Fof%5Fx0020%5F

• Special characters such as & add to the fun!

###CALLOUT – Internal Name Pain

Page 33: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT – Internal Name Pain• Multiple long field names lose meaning

• The_x0020_number_x0020_of_x0020_

• The_x0020_number_x0020_of_x0020_0

Page 34: #SPSLondon - Session 2 JSLink for IT Pros

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

pain!

Create Rename

Page 35: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT – Internal Name Pain• SharePoint 2013 introduces some new pain

with the quick edit list functionality.

Page 36: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT – Internal Name Pain• I’m not a Dev, why do I care?

Page 37: #SPSLondon - Session 2 JSLink for IT Pros

###CALLOUT – Internal Name Pain• I’m not a Dev, why do I care?• Your Developers (if you have them) will love you!

Page 38: #SPSLondon - Session 2 JSLink for IT Pros

Anatomy of a List View Display Template

Page 39: #SPSLondon - Session 2 JSLink for IT Pros

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 (This is processed

when the DT is loaded)

Page 40: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 41: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 42: #SPSLondon - Session 2 JSLink for IT Pros

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

loads.

Page 43: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 44: #SPSLondon - Session 2 JSLink for IT Pros

Anatomy of a Field Rendering Display Template

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

Page 45: #SPSLondon - Session 2 JSLink for IT Pros

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

MasterPage gallery

Page 46: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 47: #SPSLondon - Session 2 JSLink for IT Pros

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 |

Page 48: #SPSLondon - Session 2 JSLink for IT Pros

DEMO - Adding JSLink to a web part.

Page 49: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 50: #SPSLondon - Session 2 JSLink for IT Pros

How do we troubleshoot?• Fiddler – HTTP Proxy

Page 51: #SPSLondon - Session 2 JSLink for IT Pros

How do we troubleshoot?• Fiddler – HTTP Proxy

Page 52: #SPSLondon - Session 2 JSLink for IT Pros

DEMO - Troubleshooting in IE with the Developer Toolbar

http://bit.ly/12kMPvr

Page 53: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 54: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 55: #SPSLondon - Session 2 JSLink for IT Pros

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

Page 56: #SPSLondon - Session 2 JSLink for IT Pros

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.

Page 57: #SPSLondon - Session 2 JSLink for IT Pros

Display Template Demos

Page 58: #SPSLondon - Session 2 JSLink for IT Pros

Questions?

Page 59: #SPSLondon - Session 2 JSLink for IT Pros

#SPCSR• www.facebook.com/hashspcsr• https://github.com/spcsr

Page 60: #SPSLondon - Session 2 JSLink for IT Pros

60Call 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

Page 61: #SPSLondon - Session 2 JSLink for IT Pros

Thanks to our Sponsors

Page 62: #SPSLondon - Session 2 JSLink for IT Pros

Don’t forget the SharePint

Sponsored by

Imperial College Union Bar6pm - 8pm Beit Quadrangle, Prince Consort RoadOne street up from SPS London

Don’t forget to get Beer Tokens….

Page 63: #SPSLondon - Session 2 JSLink for IT Pros

Don’t forget SharePint!

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