If you’re a SharePoint developer you either are doing JavaScript development now or you will be doing JavaScript development in the near future. There has been an increased focus on client-side development with each of the recent versions of SharePoint and now, with the introduction of the SharePoint 2013 App model, understanding client-side development is a must. In this session, we`ll look at JavaScript development from a SharePoint perspective. In addition to effective use of JavaScript and jQuery in your applications, we`ll look where you can deploy JavaScript files and how to reference those files in your pages and web parts.

1. JavaScript and jQuery for
SharePoint Developers
Rob Windsor
rwindsor@portalsolutions.net
@robwindsor

2. About Me
• Senior SharePoint Architect with Portal Solutions
• Technical Contributor to the Pluralsight On-Demand Library
• Microsoft MVP, MCPD, MCT
• Founder and Past-President of the North Toronto .NET UG
• Co-author of Prof. Visual Basic 2012 and .NET 4.5 (Wrox)

3. Deploying JavaScript Files
• Content Delivery Network (CDN)
 Works with all project types
• Under Layouts folder
 Farm Solutions
• Virtual File System
 Virtual folder or document library
 Sandbox Solutions or Apps

4. Referencing JavaScript Files
• During page load:
 <script> tag
 ScriptLink control
• On demand:
 ExecuteOrDelayUntilScriptLoaded
 jQuery.getScript
• Feature activation:
 CustomAction
 Applies to entire site collection

5. Visual Studio Intellisense
• No Intellisense unless using <script> tag
• Visual Studio 2010
 ASPX or ASCX files
 Reference debug version of script using <script> tag
 Wrap in #if compiler directive so ignored in compiled page/control
 JavaScript files
 Use script reference
 /// <reference path=“<path or url to script file" />
• Visual Studio 2012
 Add _references.js file to project
 Must be in Scripts folder at root of project
 Add script reference
 References apply across project

6. JavaScript Global Namespace
• JavaScript namespaces implemented as objects
• Concept similar to namespaces in .NET
• Global namespace
 Variable and functions go here by default
 Easily “polluted”
 Keep your code out of here using:
 Nested functions
 Custom namespaces and classes

7. Classing Things Up
• JavaScript objects can simulate namespaces and classes
 Also addresses global namespace issue
 Feels more familiar to devs used to working in managed code
• This example uses the module pattern
// namespace
window.Pluralsight = window.Pluralsight || {};
// class
Pluralsight.Demo04 = function () {
// internal
var context = SP.ClientContext.get_current();
function getUserName() {
}
// public
return {
initialize: function () {
getUserName();
}
}
}

8. jQuery Promises
• Simplify asynchronous operations
function getUserName() {
var def = new jQuery.Deferred();
var user = context.get_web().get_currentUser();
context.load(user);
context.executeQueryAsync(onGetUserNameSuccess,
onGetUserNameFail);
function onGetUserNameSuccess() {
def.resolve(user.get_title());
}
function onGetUserNameFail(sender, args) {
def.reject(args.get_message());
}
return def.promise();
}
var page = new Pluralsight.Demo06();
var call = page.getUserName();
call.done(function (userName) {
var message = jQuery('#message');
message.text('Hello ' + userName);
});
call.fail(function (errorMessage) {
alert('Failed to get user name. Error:' +
errorMessage);
});

9. Data-binding using Templates
• Many template library options
 jQuery Templates, jsRender, Knockout
• Use “script” to define template
• Get data
• Bind data to template
<script id="products-template"
type="text/x-jsrender">
{{for #data}}
<tr>
<td>{{>#data.Title}}</td>
<td>{{>#data.UnitsInStock}}</td>
</tr>
{{/for}}
</script>
message.append("<table>");
var template = jQuery("#products-template");
message.append(template.render(result2[0].d));
message.append("</table>");

10. Thank You
• Big thanks to the organizers, sponsors and you for making
this event possible
• Please fill out your evaluation
• Please keep in touch
rwindsor@portalsolutions.net
@robwindsor
msmvps.com/blogs/windsor