Upload
wendy-neal
View
2.785
Download
0
Embed Size (px)
Citation preview
Online Conference
June 17th and 18th 2015
WWW.COLLAB365.EVENTS
Enhance the Usability of Your SharePoint Site with JSLink
Wendy NealOctober 7, 2015
WWW.COLLAB365.EVENTS
Wendy NealSharePoint Evangelist
Email : [email protected] Twitter : @SharePointWendyFacebook : facebook.com/wendynealblogLinkedIn : linkedin.com/in/wendynealGoogle+ : plus.google.com/+WendyNeal
Cedar Rapids, Iowa, USAWebsite:• http://wendy-neal.com
Contributing Author:• CMSWire• ITUnity• SharePoint-Community.net
Contact Details
WWW.COLLAB365.EVENTS
AgendaBrief Usability Overview
What is JSLink?
Awesome Things You Can Do With JSLink
DEMO
WWW.COLLAB365.EVENTS
Rule #1: Don’t Make Me ThinkAccording to Steve Krug, websites should be:• Self-evident• Obvious• Self-explanatory• Should not cause users
confusion or to think
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
WWW.COLLAB365.EVENTS
What is JSLink?A web part property that allows you to link JavaScript file(s) to a pageObjects 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 partsSite ColumnContent Type
WWW.COLLAB365.EVENTS
Setting JSLink Property in UI
Expand the Miscellaneous section in web part propertiesReference to JS file must begin with URL Token (e.g. ~site)Can reference multiple JS files (separated by pipe character)
WWW.COLLAB365.EVENTS
URL TokensToken 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
WWW.COLLAB365.EVENTS
Best PracticesCreate reusable Site Collection JS file if possibleAvoid polluting the JS global namespaceCall your function explicitly (not self executing)
WWW.COLLAB365.EVENTS
Tasks List - View• Color code
Reminder Date• Add a Priority
icon• Hide Priority
column header• Color code
Context• Hide Color
column
WWW.COLLAB365.EVENTS
Context List – Add/Edit• Add color picker to text field - http://jscolor.com/
WWW.COLLAB365.EVENTS
Projects List – View• Color code entire
row based on status
• Percent Complete slider
WWW.COLLAB365.EVENTS
Projects List – Edit• Read-only controls in edit mode• Percent Complete input slider
WWW.COLLAB365.EVENTS
Referenceshttps://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.htmlhttps://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a#contenthttp://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Viewshttp://sharepoint-community.net/profiles/blogs/using-jslink-to-implement-delete-buttons-for-list-viewhttp://jscolor.com/http://www.slideshare.net/MuawiyahShannak/sharepoint-2013-clientside-rendering-csr-jslink-templates?next_slideshow=1http://www.sharepointbreak.com/2015/04/13/newform-and-editform-simple-custom-field-rendering-with-jslink-in-sharepoint-2013/