This document discusses using JavaScript and display templates with list view web parts in SharePoint. It begins with an introduction and overview of the presenter. It then discusses how list views used to be customized using SharePoint Designer and XSLT, and why the focus has shifted to client-side rendering using JavaScript, HTML and CSS. The rest of the document explains what JavaScript display templates are, provides examples of the anatomy and usage of list view and field display templates, and discusses techniques for troubleshooting templates.
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
Using JSLink and Display Templates to Customize List Views
1. Using JSLink and Display Templates with
List View Web Parts for ITPros
#SPSSTHLM19
Paul Hunt (@cimares)
January 25th, 2014
SharePoint Saturday
Stockholm
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
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 |
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.
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!
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.