Successfully reported this slideshow.
Using JSLink and Display Templates
with the List View Web Part for ITPros
Paul Hunt
@Cimares
July 15th, 2014
SUGUK Cambrid...
Who Am I?
• SharePoint Architect for
Trinity Expert Systems
• Co-organiser of SUGUK
London Region
• Member of the SharePoi...
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 t...
What did we used to do?
• We used SPD and the Design View
 We did conditional formatting
 Played with colours
 Injected...
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 visua...
What did we used to do?
• We used custom code solutions (We still can!)
 Custom CAML Rendering Templates
 Custom List Vi...
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 utilis...
• It’s client side, moving the impact of customisations off of the web server
and onto the often powerful and under utilis...
Specifically why JavaScript, HTML and CSS?
• It’s easier to develop..
• Much simpler than XSLT
• Certainly easier to troub...
Exactly what is a JavaScript Display Template?
• A small piece of JavaScript code that is called by the
browser AFTER the ...
These 4 relate to Search.
21
We’re just looking at:-
• List View Display Templates
 These provide the ability to override the rendering of an entire v...
Page Lifecycle – The Foundations
Page lifecycle – The Foundations
• SharePoint outputs JSLink in the Header of the page
 This registers our Display Templa...
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 p...
Page lifecycle – The Result
• Which compares the Context object to the list of
registered overrides
• And if everything is...
###CALLOUT – Internal Name Pain
The_x0020_number_x0020_of_x0020_
• Internal names get encoded once, then URL encoded when displayed in
the browser adding to the confusion!
• The internal ...
###CALLOUT – Internal Name Pain
• Multiple long field names lose meaning
• The_x0020_number_x0020_of_x0020_ • The_x0020_nu...
###CALLOUT – Internal Name Pain
• Creating your fields carefully will save you this pain!
###CALLOUT – Internal Name Pain
• I’m not a Dev, why do I care?
###CALLOUT – Internal Name Pain
• I’m not a Dev, why do I care?
• Your Developers (if you have them) will love you!
Anatomy of a List View Display Template
• Start with an empty .JS (Or copy example templates)
• Define a Function to regis...
Anatomy of a List View Display Template
• Define a Function to register the Display Template
For a list of template types ...
Anatomy of a List View Display Template
• Define the Function called by the Display Template
• Note the use of ctx.Current...
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 he...
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
– ~sitecollectio...
How do we troubleshoot?
• IE Developers Toolbar (Other debuggers exist!)
How do we troubleshoot?
• Fiddler – HTTP Proxy
How do we troubleshoot?
• Fiddler – HTTP Proxy
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...
There has to be a catch?
• Multiple list views on a page
 Because of the way Display Templates are registered, it’s not p...
There has to be a catch?
• Changing/Breaking SharePoint functionality
 For example, overriding the Tasks view breaks Shar...
Questions?
www.facebook.com/hashspcsr
Call to Action!
• Take a look at these sites for more detailed info
• Wes Preston – JS Link a primer - http://bit.ly/102fc...
Don’t forget SharePint!
• SHARE·PINT: [SHAIR-PAHYNT]
Noun
1. An assembly or meeting in relation to Microsoft
SharePoint, a...
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
Upcoming SlideShare
Loading in …5
×

SUGUK Cambridge - Display Templates & JSLink for IT Pros

692 views

Published on

This is another evolution of my Display Templates session. A few of the slides have been updated. The key differences between each session however is the demos.

These slides do contain the links called out during the session however.

Published in: Technology
  • Be the first to comment

SUGUK Cambridge - Display Templates & JSLink for IT Pros

  1. 1. Using JSLink and Display Templates with the List View Web Part for ITPros Paul Hunt @Cimares July 15th, 2014 SUGUK Cambridge
  2. 2. 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
  3. 3. What is this session all about? • The List View Web Part
  4. 4. 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
  5. 5. What did we used to do? • We used SPD and the Design View  We did conditional formatting  Played with colours  Injected Hyperlinks
  6. 6. What did we used to do? • But  No design view anymore!
  7. 7. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)
  8. 8. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)  Which took boring list data views
  9. 9. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)  And transformed them into engaging visual representations
  10. 10. 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
  11. 11. So why the focus on Client Side Rendering?
  12. 12. • 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?
  13. 13. • 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?
  14. 14. 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
  15. 15. 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
  16. 16. These 4 relate to Search.
  17. 17. 21
  18. 18. 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
  19. 19. Page Lifecycle – The Foundations
  20. 20. Page lifecycle – The Foundations • SharePoint outputs JSLink in the Header of the page  This registers our Display Template
  21. 21. Page lifecycle – The Foundations • SharePoint LVWP outputs the list data into the page  JSON Object Format
  22. 22. Page lifecycle – The Foundations • And finally after setting things up  Calls the RenderListView() function for the web part. • Which in turn: – Calls the GetTemplates()
  23. 23. 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!
  24. 24. ###CALLOUT – Internal Name Pain The_x0020_number_x0020_of_x0020_
  25. 25. • 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
  26. 26. ###CALLOUT – Internal Name Pain • Multiple long field names lose meaning • The_x0020_number_x0020_of_x0020_ • The_x0020_number_x0020_of_x0020_0
  27. 27. ###CALLOUT – Internal Name Pain • Creating your fields carefully will save you this pain!
  28. 28. ###CALLOUT – Internal Name Pain • I’m not a Dev, why do I care?
  29. 29. ###CALLOUT – Internal Name Pain • I’m not a Dev, why do I care? • Your Developers (if you have them) will love you!
  30. 30. 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
  31. 31. 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
  32. 32. 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
  33. 33. Anatomy of a List View Display Template • Call the function we defined when the page loads.
  34. 34. 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
  35. 35. Anatomy of a Field Rendering Display Template • The render function is similar to the list view item function
  36. 36. How do we use them with List Views? • First we need to upload/create them in the MasterPage gallery
  37. 37. How do we use them with List Views? • Set some metadata
  38. 38. 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 |
  39. 39. How do we troubleshoot? • IE Developers Toolbar (Other debuggers exist!)
  40. 40. How do we troubleshoot? • Fiddler – HTTP Proxy
  41. 41. How do we troubleshoot? • Fiddler – HTTP Proxy
  42. 42. http://bit.ly/12kMPvr
  43. 43. There has to be a catch? • Minimal Download Strategy • Multiple list views on a page • Changing SharePoint functionality
  44. 44. 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
  45. 45. 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
  46. 46. 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.
  47. 47. Questions?
  48. 48. www.facebook.com/hashspcsr
  49. 49. Call 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 57
  50. 50. Don’t forget SharePint! • SHARE·PINT: [SHAIR-PAHYNT] Noun 1. An assembly or meeting in relation to Microsoft SharePoint, accompanied with an alcoholic beverage.

×