Using JSLink and Display Temlates with the LVWP
•Download as PPTX, PDF•
1 like•217 views
The document contains contact information for an individual named Paul Hunt who works as a SharePoint Architect and co-organizes a SharePoint user group. It lists his Twitter handle, personal blog and company website. It also mentions that he has been a member of the SharePoint community since 2007 and received his first Microsoft MVP award in January 2016. In his spare time he enjoys woodturning, making pots, pens and artistic pieces.
More Related Content
Similar to Using JSLink and Display Temlates with the LVWP
Similar to Using JSLink and Display Temlates with the LVWP (20)
More from SPC Adriatics
More from SPC Adriatics (20)
Recently uploaded
Recently uploaded (20)
Using JSLink and Display Temlates with the LVWP
- 3. • SharePoint Architect for Trustmarque • Co-organiser of SUGUK London Region • Member of the SharePoint community since 2007 • First time MVP! (Jan 2016) • 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
- 4. • SharePoint Architect for Trustmarque • Co-organiser of SUGUK London Region • Member of the SharePoint community since 2007 • First time MVP (Jan 2016) • 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
- 5. •
- 6. • • • • • • – Though if you used to play in SPD 2010 you’re halfway there! – If you want to know what's achievable without deployed solutions
- 7. IT Pro? Developer? Power User? End/Business User? Other?
- 8. What did we used to do?
- 9. • • • •
- 10. • •
- 11. •
- 12. • •
- 13. • •
- 14. • • • • • All bring additional headaches
- 17. • • Some client machines may struggle with heavy Javascript loads!
- 18. • • • • • •
- 19. Exactly what is a JavaScript Display Template?
- 21. • • • • • • These 4 relate to Search.
- 22. Not all display templates are created equally
- 23. • • • •
- 24. • • • •
- 26. • •
- 27. • •
- 28. • • • Which in turn: – Calls the GetTemplates()
- 29. • • And if everything is in place, our override wins the battle!
- 32. • 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!
- 33. • • The_x0020_number_x0020_of_x0020_ • The_x0020_number_x0020_of_x0020_0
- 34. • Create Rename
- 35. •
- 36. •
- 37. • •
- 38. Anatomy of a List View Display Template
- 39. • • • •
- 40. • For a list of template types see - http://bit.ly/169AbS9
- 41. • • 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
- 42. •
- 43. • • This time there are no headers/footers • We only specify the Base View ID/Field Name
- 44. •
- 45. •
- 46. •
- 47. • • Note the ~token in use – ~sitecollection – ~site – ~layouts – ~sitecollectionlayouts – ~sitelayouts • You can have multiple JSLinks – Join them with |
- 49. •
- 50. •
- 51. •
- 53. • • •
- 54. • • • • • • • Include the relevant JavaScript in your Display Template code
- 55. • • • •
- 56. • • •
- 58. • •
- 59. • • • • • • 59
- 60. @Cimares
Editor's Notes
- I also do woodturning! SharePoint can be a lot like woodturning.. If you don’t pay attention to what you’re doing, it’s easy to make a mistake and go through the bottom of the bowl!
- This session is all about dropping a list view web part on the page and doing something visually with it using the tools that Microsoft provide and no serious custom development. A lot of what you see about display templates on the web is all about the Search Web Parts.. We’re not looking at those today!
- We’re targeting First/Second Tier developers.. That’s the UI and Client side to you and me.. You’ll need to know Javascript, HTML and CSS.. But not a lot, start small and work up!
- Primarily we worked server side Though Marc Anderson and others championed what could be done client side with jQuery and similar
- The design view has now gone. Lots of discussion as to why. Can’t now use (in visual design mode):- the conditional format builder The xPath expression builder Web part connections Web Part filters
- We did use XSLT over rides Difficult to troubleshoot A single wrong character could break the rendering! Very difficult to troubleshoot without access to the ULS logs (Or even with the logs!)
- This example is a project status dashboard, fed from a project list.
- But these bring their own headaches. Deployment, Support Upgrades
- In my opinion it’s about the cloud. MS wants to offer a platform that’s scalable. Moving the customisations as far away from that platform makes sense..
- A large majority of Business and Home PC’s spend a massive amount of their time doing nothing. Several large Grid computing projects rely on this Notably Folding@Home looking at causes of Cancer and other Degenerative diseases. And Seti@Home searching Radio Telescope signals for signs of ET!
- Warning though, Some small format PC’s may struggle. I’ve had personal issues with ARM processor based systems
- Cross-platform: Some browsers have different ways of handling some javascript. The use of jQuery helps alleviate this
- You can find them in the MasterPage catalog /Display Templates subfolder
- Note: I added this page after the Stockholm event in response to a question that was posed to me after the event. List View Display Templates are JavaScript from start to finish. There is no requirement to embed the properties in the same way (But the field you want MUST be in the list view!). Everything you need should be available through the CTX context object passed in when called.
- Before we jump into how a display template is created, a note on Field Naming! Create your fields with a sensible name first and edit afterwards. This creates a short internal name for use in scripts.
- Before we jump into how a display template is created, a note on Field Naming! Create your fields with a sensible name first and edit afterwards. This creates a short internal name for use in scripts.
- Note how the Space in names is encoded for the URL.. The actual internal name is The_x0020_number_x0020_of_x0020_
- Creating with a nice short name, and then renaming, retains the sensible internal name whilst keeping the users happy.
- SharePoint Quick edit, shown here creates all columns with a random 4 character name.. And even that isn’t safe from being encoded as I’ve found out to my cost!
- Note how the Space in names is encoded for the URL.. The actual internal name is The_x0020_number_x0020_of_x0020_
- Note how the Space in names is encoded for the URL.. The actual internal name is The_x0020_number_x0020_of_x0020_
- We’ll go through each step in the next few slides.
- BaseViewID & ListTemplateType both used to match the template required Loaded when the page is first processed.
- This function is called for EACH item the list will render. E.g. If you have a list view with 20 items, this function will run 20 times and each time ctx.CurrentItem will the next item in the list. Note: Fields called in the view MUST be selected when the view is created. Note: Field internal names that include encoded characters will be URL encoded too… A space becomes %5Fx0020%5F which is actually an internal name of _x0020_ (See next couple of slides!)
- We call our register function at the in the main script file. This ensures our functions are called.
- We only base this on BaseViewID, ListTemplateType has no impact The field name is specified in the Templates collection Note: We’re only affecting the View mode here.. But you can do Edit too.
- .
- You can do this directly through the UI, Or in SPD 2013, but they don’t have to be! File system, Asset library… anything works..
- This is good practice.. But not essential..they will work anyway! This just ensures they show up in the right place in Designer mostly!
- You can define List Views with JSLinks, or add them through PowerShell Tokens courtesy of Martin Hatch’s blog ~site – reference to the current SharePoint site (or “Web”) ~sitecollection – reference to the current SharePoint site collection (or “Site”) ~layouts – version specific reference to the web application Layouts folder (so it will automatically swap out /_layouts/14 or /_layouts/15 for you) ~sitecollectionlayouts – reference to the layouts folder in the current site collection (e.g. /sites/team/_layouts/15) ~sitelayouts – reference to the layouts folder in the current site (e.g. /sites/teams/subsite/_layouts/15)
- Open the Developers Toolbar with F12 Switch to the Script tag Select the drop down near the “Start Debugging” button Select our template file Start Debugging
- In the normal flow, IE makes the request directly to SharePoint. Fiddler injects itself as a proxy between your browser requests and the outbound network connection. This allows us to inspect and event alter the requests and responses being made
- If time..one of the other benefits of fiddler is off-line editing. Using auto-responders, fiddler can return a LOCAL file instead of the server file. This can be a local copy of your display template that you are editing, thus NOT affecting the live site, but Working with live data.
- Martin Hatches blog has more details on some of the other breaking issues with Display templates.
- SPCSR – A community source of display templates