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

507
views

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
507
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
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

×