Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy

4,293 views

Published on

Slides from the Collab365 Conference presented on October 7, 2015.

Published in: Technology
  • Be the first to comment

Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy

  1. 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Enhance the Usability of Your SharePoint Site with JSLink
  2. 2. WWW.COLLAB365.EVENTS Wendy Neal SharePoint Evangelist Email : wendy.neal@outlook.com Twitter : @SharePointWendy Facebook : facebook.com/wendynealblog LinkedIn : linkedin.com/in/wendyneal Google+ : plus.google.com/+WendyNeal Cedar Rapids, Iowa, USA Website: • http://wendy-neal.com Contributing Author: • CMSWire • ITUnity • SharePoint-Community.net Contact Details
  3. 3. WWW.COLLAB365.EVENTS Agenda Brief Usability Overview What is JSLink? Awesome Things You Can Do With JSLink DEMO
  4. 4. WWW.COLLAB365.EVENTS Brief Usability Overview
  5. 5. WWW.COLLAB365.EVENTS Rule #1: Don’t Make Me Think According to Steve Krug, websites should be: • Self-evident • Obvious • Self-explanatory • Should not cause users confusion or to think
  6. 6. WWW.COLLAB365.EVENTS What Makes Users Frustrated? • Inconsistent navigation • Too many primary nav links • Active links not highlighted • Too many mouse clicks • Can’t find what you’re looking for • Cluttered (balance between text, images, whitespace) • Too many words on page • Left/right scrolling • Performance (site is slow) • Not evident whether form was submitted successfully • It isn’t clear what you’re supposed to do/focus on • Unclear error messages
  7. 7. WWW.COLLAB365.EVENTS What is JSLink?
  8. 8. WWW.COLLAB365.EVENTS What is JSLink? • A web part property that allows you to link JavaScript file(s) to a page • Objects that have a JSLink property: – List Views (some exceptions, e.g. Calendar View) – List Forms (New, Edit, View forms) – List View and List Form web parts – Site Column – Content Type
  9. 9. WWW.COLLAB365.EVENTS Setting JSLink Property • Field definition • Custom code • PowerShell • User interface
  10. 10. WWW.COLLAB365.EVENTS Setting JSLink Property in UI • Expand the Miscellaneous section in web part properties • Reference to JS file must begin with URL Token (e.g. ~site) • Can reference multiple JS files (separated by pipe character)
  11. 11. WWW.COLLAB365.EVENTS URL Tokens Token Location ~site Reference to the current SharePoint site ~sitecollection Reference to the current SharePoint site collection ~layouts Reference to the web application Layouts folder (on-premises only) – e.g. /_layouts/15 ~sitecollectionlayouts Reference to the Layouts folder in the current site collection (on premises only) – e.g. /sites/team/_layouts/15 ~sitelayouts Reference to the Layouts folder in the current site (on premises only) – e.g. /sites/teams/subsite/_layouts/15
  12. 12. WWW.COLLAB365.EVENTS Best Practices • Create reusable Site Collection JS file if possible • Avoid polluting the JS global namespace • Call your function explicitly (not self executing)
  13. 13. WWW.COLLAB365.EVENTS Awesome Things You Can Do With JSLink
  14. 14. WWW.COLLAB365.EVENTS Tasks List - View • Color code Reminder Date • Add a Priority icon • Hide Priority column header • Color code Context • Hide Color column
  15. 15. WWW.COLLAB365.EVENTS Context List – Add/Edit • Add color picker to text field - http://jscolor.com/
  16. 16. WWW.COLLAB365.EVENTS Projects List – View • Color code entire row based on status • Percent Complete slider
  17. 17. WWW.COLLAB365.EVENTS Projects List – Edit • Read-only controls in edit mode • Percent Complete input slider
  18. 18. WWW.COLLAB365.EVENTS Projects List – Add • Auto-populate Category field from query string
  19. 19. WWW.COLLAB365.EVENTS Suppliers List – View • Delete icons
  20. 20. WWW.COLLAB365.EVENTS Suppliers List – Add/Edit • Email field validator
  21. 21. WWW.COLLAB365.EVENTS Announcements List – View • Trim long body text and add More link
  22. 22. WWW.COLLAB365.EVENTS Team Sales List – View • Color code negative numbers
  23. 23. WWW.COLLAB365.EVENTS DEMO
  24. 24. WWW.COLLAB365.EVENTS References • https://devspoint.wordpress.com/2014/06/16/js-link-avoid-polluting-the-global-namespace/ • http://www.martinhatch.com/2013/08/jslink-and-display-templates-part-1.html • https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a#content • http://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views • http://sharepoint-community.net/profiles/blogs/using-jslink-to-implement-delete-buttons- for-list-view • http://jscolor.com/ • http://www.slideshare.net/MuawiyahShannak/sharepoint-2013-clientside-rendering-csr- jslink-templates?next_slideshow=1 • http://www.sharepointbreak.com/2015/04/13/newform-and-editform-simple-custom-field- rendering-with-jslink-in-sharepoint-2013/
  25. 25. WWW.COLLAB365.EVENTS Stay tuned for more great sessions … Thanks for watching!

×