sharepoint and the user interface with javascript
TRANSCRIPT
SharePoint and the
User Interface with
JavaScript
Colin Phillips :: SharePoint MVP :: itgroove
March 2015
The Magic Glue to Bring
Interactive Pages to Life
Who I am: Colin Phillips
My Background
16+ Years in Technology
Today: SharePoint Consultant and MVP (with itgroove)
Previously:
12 Years Developing Software, IT Infrastructure Projects, Workflows, and Many Other Related Topics
B.Sc. in Computer Science from UVic
My Socialness
Blog: mmman.itgroove.net / Twitter: @itgroove_colin
Where to learn more
What is JavaScript?
• JavaScript (or JS) is a powerful language that has the capacity to do many very simple things
(such as reload a webpage) or can be the basis of entire (typically web-based) applications
• Developed by Brendan Eich of Netscape in the mid-90s, it (along with influence from Microsoft
and their version “JScript") ultimately became the basis of the standard ECMAScript
• Strictly speaking, “JavaScript is an object-based scripting language that is lightweight and cross-
platform. JavaScript is not compiled but interpreted.”
• Supported by a broad coalition of companies - no single person or company controls it
On a side note, I actually met and spent a number of days with Brendan and the Mozilla team in 2001 as
part of attending a conference & being asked to join them at the Netscape campus
Who / Where / Why?
• JavaScript can be used by almost anyone – but that doesn’t mean they should.
• Typically used by front-end web developers to add interactivity to web pages
• Most often combined together with HTML and CSS to create interactive web pages
• "JavaScript is one of the world's most popular programming languages. Virtually
every personal computer in the world has at least one JavaScript interpreter
installed on it and in active use.“
• Rather than asking, “What is the future of JavaScript?” the right thing to say is
JavaScript is the future. Another answer to the same question is JavaScript will
stay relevant as long as people use the Internet.
JavaScript Libraries / Frameworks
• JavaScript is extremely popular and lots of people have made “libraries”
(or “frameworks”) for it - small packages which simplify writing code or
performing a specific function, very well
• Most often open source and combined with HTML & a browser
• Including, but not limited to: (there are lots more)
• Chart.js (and many other charting libraries)
• Dojo Toolkit (web apps, mobile, charting cross-browser)
• ExtJS (data aggregation, dashboards & BI)
• AppJS & App.js (cross-platform desktop / mobile apps with JS/HTML/CSS)
• Kendo UI (Very well constructed, but $ – from Telerik)
Technology and Ghostbusters are amongst
my favourite things
Popular JavaScript Library #1: jQuery
According to Google, “jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling, animation, and
Ajax much simpler with an easy-to-use API that works across a multitude of browsers.”
• jQuery can make lots of (formerly) complex tasks trivial because of the nature of how
it abstracts the complex portions of JavaScript away
• Simply include jQuery in a web page (with a <script> include), then you can start
using the shortcut syntax (like “$(document).ready(alert(‘hi’));”) in a <script> block
• We use jQuery all the time because writing much of the equivalent JavaScript out by
hand is tedious, and cross-browser compatibility is a huge pain in raw JavaScript
Popular JavaScript Library #2: TypeScript
• “TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.” (Like SASS for CSS)
• JavaScript is “loosely typed” – so a variable can act like a string in one statement, a
number in the next statement, a date after that, or even an object
• TS Allows JavaScript to act more like “strongly typed” languages such as C++ or Java
• In other words, a character data type, must operate like a character data type, and not like
anything else – or else you’ll get a compile error
• My own personal opinion is that TypeScript is cool, and probably helpful to some, but I
love how JS is loosely typed, so it’s not as interesting to me
Application Frameworks
• Node.js - Web applications with real-time, two-way connections, where both
the client and server can initiate communication (individual creator)
• AngularJS (by Google)
• Ember.js (spinoff of SproutCore)
• Backbone.js (by developer of CoffeeScript)
• ReactJS (by Facebook & Instagram)
• Many many others
One or a combination of several may
be the best option for your web app.
SharePoint and JavaScript
• In SharePoint 2013, using JavaScript is the only way to perform certain
types of functionality (like Conditional Formatting)
• 2013 introduced a new list/library display override called “JSLink”. You
can use this to create your own / modify an existing view
• Of course, nearly anything you can do outside of SharePoint with
JavaScript can also be done within SharePoint – just not a lot of people
are that adventurous
• JavaScript is a key component of the new SharePoint App model – lots of
modern SharePoint Apps are written with JavaScript and JS Frameworks
Below: JSLink in Action
SharePoint JSLink Code Sample
• At it’s most basic, you’re telling
SharePoint to override it’s default list view
mechanism, and use the custom one you
define instead
• In this case, when the column “MoreText”
is seen, output that column’s text in bold
(using a simple HTML tag <b>)
• For the nerds, yes, it’s just a bunch of
nested objects with some JSON using an
anonymous function (which is called once
SP is ready) – but it can do SO much!
(function () {
// Initialize the variables for overrides objects
var overrideCtx = {}; overrideCtx.Templates = {};
/* Using the Fields override leaves the rest of the rendering intact, but
allows control over one or more specific fields in the existing view – this
is just one of many ways to use the override */
overrideCtx.Templates.Fields = {
'MoreText' : { 'View' : '<b>' + ctx.CurrentItem.MoreText + '</b>' }};
/* Register the template overrides. */
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
CSOM – Client Side Object ModelNow we’re cooking with napalm
• The Client Side Object Model (CSOM) is a collection of methods exposed to programmers to allow
you to speak directly to objects in SharePoint
• In other words, you can do lookups on lists or libraries using JavaScript, add new items, even modify
existing list / library items
• The JSOM – JavaScript Object Model exposes the same objects as the CSOM
• The CSOM is constantly being developed. New API’s are being exposed in Office365 all the time
• The CSOM is an important part of the SharePoint App Model. You use the CSOM to communicate
with SharePoint to retrieve data for your app, then can further manipulate it using JavaScript, or
present that data using HTML/CSS
• The CSOM isn’t exclusively for JavaScript, you can use it with C# & VB.net as well, and many other
languages (even things like Perl, PHP, PowerShell or any language that can speak web services) Yes, this is a real book
And has really good reviews!
Example 1: Visual, Responsive Location Chooser
• All items are defined by a SharePoint list
• Each item has a label (Location X), an
image, and a URL (destination upon click)
• Using the new JSLink technique in SP2013,
we’re able to take that simple information,
and using an HTML template, turn that into
a dynamic, responsive, flowing layout that
presents visually stunning
Example 2: Effective Visual Layout of SharePoint List Data
• Here’s one of the landing pages for the
previous example
• One list entry represents the entire top
portion of the page
• Each of the Properties (in the details) are just
a column in that single list entry
• Again uses the JSLink technique to translate
list content into a powerful visual
representation
Example 3: Self Service Employee HR Dashboard
• Responsive design
• Uses a charting library (JQPlot)
• Some include transitions
• Each “box” is just a webpart
• Some web parts use both back-end
server side logic, while the front end
uses JavaScript for final presentation
Example 4: Custom Mysite Landing Page
• Tabbed interface (on right) allows
the bottom portion of the screen
to be a broken down collection of
details about each user
• Uses the JSLink technique at the
bottom to “inject” an image on
the left, and an “Action” on the
right, otherwise the rest is just
regular list data
Example 5: HR Recruitment Job Posting Mgmt Tool
• Adding large, interactive buttons and
making “sections” interactive (with
status) added greatly the sites’ overall
usability
• Uses the JavaScript CSOM to
dynamically update and query list data
• When each button is clicked
• Upon page load (to update the
button status’)
• And when the site is first created
• Also enforces permissions (on Office
Use Only column)
Comparison of Old to New
Example 6: Company Portal HomePage
• Another example of using the JSLink
technique on SharePoint list data to layout
several webparts
• That’s an interesting cupcake policy
Demo
Things to Show
• Consultant Dashboard
- Conditional Formatting
- Elimination of empty web parts
- Floating ball icons
• Mega / Micro Menus
• Projects Dashboard (Time/money/scope & barometer)
• Time Entry modals
• Client Details drop down (taking you to the client
dashboard)
• Landing page photo rotator
• Collapsible divs
• Tabs
• URL Shortener
• LED Dashboard (with auto refresh)
Summary
• JavaScript has been around for many years and is only getting
stronger – it’ll be around for as long as the web is
• Combined with libraries (like jQuery), you can make some
awesome little tweaks to add a lot of value, for little expense
• In SharePoint:
• The new layout possibilities using JSLink are nearly
endless, and very easy to make into a reality
• The CSOM brings to life a whole world of possibilities, and
is the foundation of SharePoint Apps
• When your users get it, and it’s easy for them, you’ve built it right
Questions?
Contact Info
Colin Phillips
blog: mmman.itgroove.net
Twitter: @itgroove_colin