JavaScript and jQuery for SharePoint Developers

  • 452 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
452
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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