JavaScript and jQuery for SharePoint Developers Rob Windsor [email protected] @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 and 2013 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 [email protected] @robwindsor msmvps.com/blogs/windsor