Your SlideShare is downloading. ×
JavaScript and jQuery for SharePoint Developers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript and jQuery for SharePoint Developers


Published on

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 …

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.

Published in: Technology

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. JavaScript and jQuery for SharePoint Developers Rob Windsor @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); }); (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 @robwindsor