• Like
SPSSTHLM - Using JSLink and Display Templates for ITPros
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

SPSSTHLM - Using JSLink and Display Templates for ITPros

  • 1,206 views
Published

These are the slides from my session at SharePoint Saturday Stockholm, where I look at JavaScript Display Templates and how ITPros doing first and second tier development can use the JSLink …

These are the slides from my session at SharePoint Saturday Stockholm, where I look at JavaScript Display Templates and how ITPros doing first and second tier development can use the JSLink functionality to implement them.

This session focussed on List View Web Parts and looked at the way we previously visualised data in old version of SharePoint and how we would approach that now in SharePoint 2013.

Please note: The upload of the pptx is failing for some reason, so I've added the slides as a PDF which doesn't include the notes on some of the slides. if you do have any questions, please reach out to me on twitter (@cimares) with any questions.

Published in Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,206
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
20
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Using JSLink and Display Templates with List View Web Parts for ITPros #SPSSTHLM19 Paul Hunt (@cimares) January 25th, 2014 SharePoint Saturday Stockholm
  • 2. Gold SharePint Bronze Raffle
  • 3. 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
  • 4. What is this session all about? • The List View Web Part
  • 5. 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
  • 6. What did we used to do? • We used SPD and the Design View  We did conditional formatting  Played with colours  Injected Hyperlinks
  • 7. What did we used to do? • But  No design view anymore!
  • 8. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)
  • 9. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)  Which took boring list data views
  • 10. What did we used to do? • We used XSLT Overrides (Still exist, but deprecated!)  And transformed them into engaging visual representations
  • 11. 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
  • 12. So why the focus on Client Side Rendering?
  • 13. 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
  • 14. 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!
  • 15. 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
  • 16. 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
  • 17. LVWP Templates != Search Display Templates 17 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! •
  • 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. Anatomy of a List View Display Template Start with an empty .JS (Or copy my examples) • Define a Function to register the Display Template • Define the Function called by the Display Template for each item. • Call the register function •
  • 20. 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
  • 21. 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
  • 22. Anatomy of a List View Display Template • Call the function we defined when the page loads.
  • 23. 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
  • 24. Anatomy of a Field Rendering Display Template • The render function is similar to the list view
  • 25. How do we use them with List Views? • First we need to upload/create them in the MasterPage gallery
  • 26. How do we use them with List Views? • Set some metadata
  • 27. 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 |
  • 28. Adding JSLink Demo
  • 29. How do we troubleshoot? • IE Developers Toolbar (Other debuggers exist!)
  • 30. How do we troubleshoot? • Fiddler – HTTP Proxy
  • 31. How do we troubleshoot? • Fiddler – HTTP Proxy
  • 32. Troubleshooting in IE with the F12 Dashboard http://bit.ly/12kMPvr
  • 33. There has to be a catch? Minimal Download Strategy • Multiple list views on a page • Changing SharePoint functionality •
  • 34. 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
  • 35. 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/136e0e3
  • 36. 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.
  • 37. Page lifecycle • SharePoint outputs JSLink in the Header of the page  This registers our Display Template
  • 38. Page lifecycle • SharePoint LVWP outputs the list data into the page  JSON Object Format
  • 39. Page lifecycle • And finally after setting things up  Calls the RenderListView() function for the web part. • Which in turn: – Calls the GetTemplates()
  • 40. Page lifecycle • Which compares the Context object to the list of registered overrides • And if everything is in place, our override wins the battle!
  • 41. Display Template Demos
  • 42. Questions?
  • 43. 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 43
  • 44. Don’t forget SharePint! • SHARE·PINT: [SHAIR-PAHYNT] Noun 1. An assembly or meeting in relation to Microsoft SharePoint, accompanied with an alcoholic beverage.