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