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

 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

Brief Usability Overview

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?

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 PropertyField definitionCustom codePowerShellUser interface

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

Awesome Things You CanDo With JSLink

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

Projects List – Add• Auto-populate Category field from query string

WWW.COLLAB365.EVENTS

Suppliers List – View• Delete icons

WWW.COLLAB365.EVENTS

Suppliers List – Add/Edit• Email field validator

WWW.COLLAB365.EVENTS

Announcements List – View• Trim long body text and add More link

WWW.COLLAB365.EVENTS

Team Sales List – View• Color code

negative numbers

WWW.COLLAB365.EVENTS

DEMO

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/

WWW.COLLAB365.EVENTS

Stay tuned for more great sessions …

Thanks for watching!