using js link and display templates
DESCRIPTION
My session slides from SharePoint Saturday UK IT Pro track. See my blog for more details and the demonstration videos. http://www.myfatblog.co.uk/index.php/2013/11/sharepoint-saturday-uk-wrap-up/TRANSCRIPT
![Page 1: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/1.jpg)
Using JSLink & Display Templates with List View Web PartsPresented by Paul Hunt
SharePoint Saturday UK - 2013
![Page 2: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/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
![Page 3: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/3.jpg)
Copyright © Trinity
3Thanks to our Sponsors
![Page 4: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/4.jpg)
SharePoint User Group UK - SUGUK
• Established in 2006• Now in it’s seventh year!• Local user groups in each
major region of the UK• Over 9000 members.• The largest SharePoint user
group in the world!
SUGUKSharePoint User Group UK
Visit the stand in the exhibition stallOr go to www.suguk.org!
![Page 5: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/5.jpg)
What is this session all about?
• The List View Web Part
![Page 6: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/6.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 7: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/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: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/8.jpg)
What did we used to do?
• But– No design view anymore!
![Page 9: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/9.jpg)
What did we used to do?
• We used XSLT Overrides (Still exist, but deprecated!)
![Page 10: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/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: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/11.jpg)
What did we used to do?
• We used XSLT Overrides (Still exist, but deprecated!)– And transformed them into visual representations
![Page 12: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/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: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/13.jpg)
So why the focus on Client Side Rendering?
![Page 14: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/14.jpg)
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
![Page 15: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/15.jpg)
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!
![Page 16: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/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: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/17.jpg)
Exactly what is a 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 18: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/18.jpg)
We’re just looking at:-
• Field Rendering Display Templates– These provide the ability to override the rendering of a single field in a list
view
• List View Display Templates– These provide the ability to override the rendering of an entire view
![Page 19: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/19.jpg)
Anatomy of a List View Display Template
• Define a Function to register the Display Template• Define the Function called by the Display Template for each
item.• Call the register function
![Page 20: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/20.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 21: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/21.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
![Page 22: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/22.jpg)
Anatomy of a List View Display Template
• Call the function we defined when the page loads.
![Page 23: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/23.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 24: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/24.jpg)
Anatomy of a Field Rendering Display Template
• The render function is similar to the list view
![Page 25: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/25.jpg)
How do we use them with List Views?
• First we need to upload/create them in the MasterPage gallery
![Page 26: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/26.jpg)
How do we use them with List Views?
• Set some metadata
![Page 27: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/27.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 28: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/28.jpg)
Adding JSLink Demo
![Page 29: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/29.jpg)
How do we troubleshoot?
• IE Developers Toolbar (Other debuggers exist!)
![Page 30: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/30.jpg)
How do we troubleshoot?
• Fiddler – HTTP Proxy
![Page 31: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/31.jpg)
How do we troubleshoot?
• Fiddler – HTTP Proxy
![Page 32: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/32.jpg)
Troubleshooting in IE with the F12 Dashboard
http://bit.ly/12kMPvr
![Page 33: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/33.jpg)
There has to be a catch?
• Minimal Download Strategy• Multiple list views on a page• Changing SharePoint functionality
![Page 34: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/34.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 35: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/35.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/136e0e3
![Page 36: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/36.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 37: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/37.jpg)
Page lifecycle
• SharePoint outputs JSLink in the Header of the page– This registers our Display Template
![Page 38: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/38.jpg)
Page lifecycle
• SharePoint LVWP outputs the list data into the page– JSON Object Format
![Page 39: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/39.jpg)
Page lifecycle
• And finally after setting things up– Calls the RenderListView() function for the web part.
• Which in turn:– Calls the GetTemplates()
![Page 40: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/40.jpg)
Page lifecycle
• Which compares the Context object to the list of registered overrides
• And if everything is in place, our override wins!
![Page 41: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/41.jpg)
Case Study Demos
![Page 42: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/42.jpg)
Questions?
![Page 43: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/43.jpg)
43Call 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/136e0e3
![Page 44: Using js link and display templates](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554bebfbb4c9055a368b4ecd/html5/thumbnails/44.jpg)
Thanks for listening! – Don’t forget SharePint!
• SHARE·PINT: [SHAIR-PAHYNT]Noun1. An assembly or meeting in relation to Microsoft SharePoint, accompanied with an alcoholic beverage.