Logo Design Pros Portfolio Brochure | Logo Design Pros reviews
SUGUK Cambridge - Display Templates & JSLink for IT Pros
-
Upload
paul-hunt -
Category
Technology
-
view
204 -
download
2
description
Transcript of SUGUK Cambridge - Display Templates & JSLink for IT Pros
![Page 1: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/1.jpg)
Using JSLink and Display Templates with the List View Web Part for ITProsPaul Hunt@CimaresJuly 15th, 2014SUGUK Cambridge
![Page 2: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/2.jpg)
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
![Page 3: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/3.jpg)
What is this session all about?• The List View Web Part
![Page 4: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/4.jpg)
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 5: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/5.jpg)
IT Pro?Developer?Power User?End/Business User?Other?
![Page 6: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/6.jpg)
What did we used to do?
![Page 7: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/7.jpg)
What did we used to do?• We used SPD and the Design View
We did conditional formatting Played with colours Injected Hyperlinks
![Page 8: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/8.jpg)
What did we used to do?• But
No design view anymore!
![Page 9: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/9.jpg)
What did we used to do?• We used XSLT Overrides (Still exist, but
deprecated!)
![Page 10: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/10.jpg)
What did we used to do?• We used XSLT Overrides (Still exist, but
deprecated!) Which took boring list data views
![Page 11: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/11.jpg)
What did we used to do?• We used XSLT Overrides (Still exist, but
deprecated!) And transformed them into engaging visual representations
![Page 12: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/12.jpg)
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 13: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/13.jpg)
So why the focus on Client Side Rendering?
![Page 14: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/14.jpg)
• 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 15: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/15.jpg)
• 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 16: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/16.jpg)
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 17: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/17.jpg)
Exactly what is a JavaScript Display Template?
![Page 18: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/18.jpg)
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 19: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/19.jpg)
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.
![Page 20: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/20.jpg)
Not all display templates are created equally
![Page 21: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/21.jpg)
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
21
![Page 22: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/22.jpg)
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 23: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/23.jpg)
Page Lifecycle – The Foundations
![Page 24: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/24.jpg)
Page lifecycle – The Foundations• SharePoint outputs JSLink in the Header of the
page This registers our Display Template
![Page 25: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/25.jpg)
Page lifecycle – The Foundations• SharePoint LVWP outputs the list data into the
page JSON Object Format
![Page 26: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/26.jpg)
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 27: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/27.jpg)
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 28: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/28.jpg)
###CALLOUT
Internal Name Pain!Click to insert photo.
![Page 29: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/29.jpg)
###CALLOUT – Internal Name Pain
The_x0020_number_x0020_of_x0020_
![Page 30: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/30.jpg)
• 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 31: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/31.jpg)
###CALLOUT – Internal Name Pain• Multiple long field names lose meaning
• The_x0020_number_x0020_of_x0020_
• The_x0020_number_x0020_of_x0020_0
![Page 32: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/32.jpg)
###CALLOUT – Internal Name Pain• Creating your fields carefully will save you this
pain!
Create Rename
![Page 33: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/33.jpg)
###CALLOUT – Internal Name Pain• I’m not a Dev, why do I care?
![Page 34: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/34.jpg)
###CALLOUT – Internal Name Pain• I’m not a Dev, why do I care?• Your Developers (if you have them) will love
you!
![Page 35: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/35.jpg)
Anatomy of a List View Display Template
![Page 36: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/36.jpg)
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
![Page 37: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/37.jpg)
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 38: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/38.jpg)
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 39: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/39.jpg)
Anatomy of a List View Display Template• Call the function we defined when the page
loads.
![Page 40: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/40.jpg)
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 41: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/41.jpg)
Anatomy of a Field Rendering Display Template
• The render function is similar to the list view item function
![Page 42: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/42.jpg)
How do we use them with List Views?• First we need to upload/create them in the
MasterPage gallery
![Page 43: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/43.jpg)
How do we use them with List Views?• Set some metadata
![Page 44: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/44.jpg)
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 45: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/45.jpg)
DEMO - Adding JSLink to a web part.
Adding JSLink Demo
![Page 46: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/46.jpg)
How do we troubleshoot?• IE Developers Toolbar (Other debuggers exist!)
![Page 47: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/47.jpg)
How do we troubleshoot?• Fiddler – HTTP Proxy
![Page 48: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/48.jpg)
How do we troubleshoot?• Fiddler – HTTP Proxy
![Page 49: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/49.jpg)
DEMO - Troubleshooting in IE with the Developer Toolbar
http://bit.ly/12kMPvr
![Page 50: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/50.jpg)
There has to be a catch?• Minimal Download Strategy• Multiple list views on a page• Changing SharePoint functionality
![Page 51: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/51.jpg)
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 52: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/52.jpg)
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 53: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/53.jpg)
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 54: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/54.jpg)
Display Template Demos
![Page 55: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/55.jpg)
Questions?
![Page 57: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/57.jpg)
57Call 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 58: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/58.jpg)
Don’t forget SharePint!
• SHARE·PINT: [SHAIR-PAHYNT]Noun1. An assembly or meeting in relation to Microsoft SharePoint, accompanied with an alcoholic beverage.
![Page 59: SUGUK Cambridge - Display Templates & JSLink for IT Pros](https://reader035.fdocuments.us/reader035/viewer/2022070300/540d7b2d8d7f728d7e8b4964/html5/thumbnails/59.jpg)
Thank you!