JavaScript and jQuery for SharePoint Developers

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

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)

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

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

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

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

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();
}
}
}

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);
});

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>");

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

JavaScript and jQuery for SharePoint Developers

More Related Content

What's hot (20)

Similar to JavaScript and jQuery for SharePoint Developers (20)

Recently uploaded (20)

JavaScript and jQuery for SharePoint Developers