Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy
•Download as PPTX, PDF•
2 likes•5,632 views
This document summarizes an online conference session about enhancing the usability of SharePoint sites using JSLink. The session will include a brief overview of usability principles, an introduction to what JSLink is and how it can be used, demonstrations of ways to customize and enhance lists and forms using JSLink, and references for further information. The demo portion will feature examples of using JSLink to add things like color coding, icons, and formatting to tasks, projects, and other lists in SharePoint.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy
Similar to Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy (20)
Recently uploaded
Recently uploaded (20)
Enhance the Usability of Your SharePoint Site with JSLink #Collab365 #C365114 by @SharePointWendy
- 1. Online Conference June 17th and 18th 2015 WWW.COLLAB365.EVENTS Enhance the Usability of Your SharePoint Site with JSLink
- 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. WWW.COLLAB365.EVENTS Agenda Brief Usability Overview What is JSLink? Awesome Things You Can Do With JSLink DEMO
- 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. 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
- 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. WWW.COLLAB365.EVENTS Setting JSLink Property • Field definition • Custom code • PowerShell • User interface
- 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. 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. 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. WWW.COLLAB365.EVENTS Awesome Things You Can Do With JSLink
- 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. WWW.COLLAB365.EVENTS Context List – Add/Edit • Add color picker to text field - http://jscolor.com/
- 16. WWW.COLLAB365.EVENTS Projects List – View • Color code entire row based on status • Percent Complete slider
- 17. WWW.COLLAB365.EVENTS Projects List – Edit • Read-only controls in edit mode • Percent Complete input slider
- 18. WWW.COLLAB365.EVENTS Projects List – Add • Auto-populate Category field from query string
- 19. WWW.COLLAB365.EVENTS Suppliers List – View • Delete icons
- 20. WWW.COLLAB365.EVENTS Suppliers List – Add/Edit • Email field validator
- 21. WWW.COLLAB365.EVENTS Announcements List – View • Trim long body text and add More link
- 22. WWW.COLLAB365.EVENTS Team Sales List – View • Color code negative numbers
- 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. WWW.COLLAB365.EVENTS Stay tuned for more great sessions … Thanks for watching!
Editor's Notes
- Hello and welcome to Collab365! I’m super excited to be here today talking about how you can enhance the usability of your SharePoint site with JSLink. Now typically when you think of SharePoint site usability, JSLink doesn’t come to mind! How this session came about was as I was working on my GTD Dashboard site template solution for the SPBiz conference, many of the changes I made to enhance the look & feel and usability of the template were done using JavaScript and JSLink, so I decided to expand upon that for this session.
- My name is Wendy Neal, I’m from the Cedar Rapids, IA area and by trade I am a .Net and SharePoint developer, however I’d also call myself an Evangelist because I like to talk about and encourage the use of SharePoint to whoever will listen. I evangelize SharePoint on my personal blog as well as a few other industry and community websites.
- I only have a couple slides on usability. The main thing I want to point out is the #1 rule of web site usability, and that is “Don’t Make Me Think”. This is also the name of a great book on usability by Steve Krug. It’s a really light read, not filled with boring usability theory or things like that. It really contains a bunch of common sense tips that, once you read it will make you say, that’s really obvious, but you may not think about every day.
- What are some of the things that make web site users frustrated? This isn’t an exhaustive list, but some of the more common things that can frustrate your users, or at least make them think. And the effects can be cumulative, meaning that one small thing that frustrates a user may not seem like a big deal, but many small things will add up over time. Now not all of these apply to the solutions that I’m going to demo later, but the ones highlighted here – Too many mouse clicks, Cluttered, Too many words on page, and Not clear what you’re supposed to focus on – I will demo how some simple JavaScript can help with these in certain situations.
- Next we’re going to take a look at some pretty cool things you can do with client side scripting and JSLink.
- That wraps up this session for the Collab355 conference. I know there are a lot of great sessions being presented in this timeslot, and I really appreciate you tuning in! I’m Wendy Neal, and thanks for watching!