• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript and jQuery for SharePoint Developers
 

JavaScript and jQuery for SharePoint Developers

on

  • 766 views

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.

Statistics

Views

Total Views
766
Views on SlideShare
766
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    JavaScript and jQuery for SharePoint Developers JavaScript and jQuery for SharePoint Developers Presentation Transcript

    • 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