SlideShare a Scribd company logo
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
Ad

Recommended

Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
Advanced SharePoint 2010 and 2013 Web Part Development by Rob Windsor - SPTec...
SPTechCon
 
Advanced SharePoint Web Part Development
Advanced SharePoint Web Part Development
Rob Windsor
 
Integrating SharePoint 2010 and Visual Studio Lightswitch
Integrating SharePoint 2010 and Visual Studio Lightswitch
Rob Windsor
 
SharePoint 2010 Application Development Overview
SharePoint 2010 Application Development Overview
Rob Windsor
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
Advanced Asp.Net Concepts And Constructs
Advanced Asp.Net Concepts And Constructs
Manny Siddiqui MCS, MBA, PMP
 
Tutorial, Part 2: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 2: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon
 
SharePoint 2010 Client-side Object Model
SharePoint 2010 Client-side Object Model
Phil Wicklund
 
Practical management of development & QA environments for SharePoint 2013
Practical management of development & QA environments for SharePoint 2013
SharePointRadi
 
Developing Apps for SharePoint Store
Developing Apps for SharePoint Store
Kashif Imran
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien
 
Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST API
Rob Windsor
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
SharePoint Saturday NY
 
Web forms in ASP.net
Web forms in ASP.net
Madhuri Kavade
 
Tutorial asp.net
Tutorial asp.net
Vivek K. Singh
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Fabio Franzini
 
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris O'Brien
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object Model
InnoTech
 
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien
 
Understanding and programming the SharePoint REST API
Understanding and programming the SharePoint REST API
Chris Beckett
 
SharePoint 2010 Client Object Model
SharePoint 2010 Client Object Model
G. Scott Singleton
 
Getting Started with SharePoint Development
Getting Started with SharePoint Development
Chakkaradeep Chandran
 
Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012
daniel plocker
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 

More Related Content

What's hot (20)

Practical management of development & QA environments for SharePoint 2013
Practical management of development & QA environments for SharePoint 2013
SharePointRadi
 
Developing Apps for SharePoint Store
Developing Apps for SharePoint Store
Kashif Imran
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien
 
Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST API
Rob Windsor
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
SharePoint Saturday NY
 
Web forms in ASP.net
Web forms in ASP.net
Madhuri Kavade
 
Tutorial asp.net
Tutorial asp.net
Vivek K. Singh
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
ASP.NET Lecture 1
ASP.NET Lecture 1
Julie Iskander
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Fabio Franzini
 
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris O'Brien
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object Model
InnoTech
 
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien
 
Understanding and programming the SharePoint REST API
Understanding and programming the SharePoint REST API
Chris Beckett
 
SharePoint 2010 Client Object Model
SharePoint 2010 Client Object Model
G. Scott Singleton
 
Getting Started with SharePoint Development
Getting Started with SharePoint Development
Chakkaradeep Chandran
 
Practical management of development & QA environments for SharePoint 2013
Practical management of development & QA environments for SharePoint 2013
SharePointRadi
 
Developing Apps for SharePoint Store
Developing Apps for SharePoint Store
Kashif Imran
 
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien - Modern SharePoint development: techniques for moving code off...
Chris O'Brien
 
Introduction to the SharePoint Client Object Model and REST API
Introduction to the SharePoint Client Object Model and REST API
Rob Windsor
 
SPTechCon 2014 How to develop and debug client side code in SharePoint
SPTechCon 2014 How to develop and debug client side code in SharePoint
Mark Rackley
 
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
Lyudmila Zharova: Developing Solutions for SharePoint 2010 Using the Client O...
SharePoint Saturday NY
 
Introduction to Client Side Dev in SharePoint Workshop
Introduction to Client Side Dev in SharePoint Workshop
Mark Rackley
 
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClass
European Collaboration Summit
 
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Codemotion 2013 - Designing complex applications using html5 and knockoutjs
Fabio Franzini
 
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
Tutorial, Part 4: SharePoint 101: Jump-Starting the Developer by Rob Windsor ...
SPTechCon
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
Fabio Franzini
 
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris OBrien - Weaving Enterprise Solutions into Office Products
Chris O'Brien
 
SharePoint 2013 Javascript Object Model
SharePoint 2013 Javascript Object Model
InnoTech
 
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien - Comparing SharePoint add-ins (apps) with Office 365 apps
Chris O'Brien
 
Understanding and programming the SharePoint REST API
Understanding and programming the SharePoint REST API
Chris Beckett
 
SharePoint 2010 Client Object Model
SharePoint 2010 Client Object Model
G. Scott Singleton
 
Getting Started with SharePoint Development
Getting Started with SharePoint Development
Chakkaradeep Chandran
 

Similar to JavaScript and jQuery for SharePoint Developers (20)

Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012
daniel plocker
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
Regroove
 
Built to last javascript for enterprise
Built to last javascript for enterprise
Marjan Nikolovski
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
Java scriptforjavadev part2a
Java scriptforjavadev part2a
Makarand Bhatambarekar
 
SharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
SharePoint Saturday Atlanta 2015
SharePoint Saturday Atlanta 2015
Pushkar Chivate
 
JavaScript Misunderstood
JavaScript Misunderstood
Bhavya Siddappa
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
oazabir
 
Learn from my Mistakes - Building Better Solutions in SPFx
Learn from my Mistakes - Building Better Solutions in SPFx
Thomas Daly
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScript
PeterBrunone
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
Brian Culver
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
The SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
German introduction to sp framework
German introduction to sp framework
Bob German
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
Mark Rackley
 
JS Essence
JS Essence
Uladzimir Piatryka
 
Client Object Model - SharePoint Extreme 2012
Client Object Model - SharePoint Extreme 2012
daniel plocker
 
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Mark Rackley
 
SharePoint and the User Interface with JavaScript
SharePoint and the User Interface with JavaScript
Regroove
 
Built to last javascript for enterprise
Built to last javascript for enterprise
Marjan Nikolovski
 
SPSDenver - SharePoint & jQuery - What I wish I would have known
SPSDenver - SharePoint & jQuery - What I wish I would have known
Mark Rackley
 
SharePoint and jQuery Essentials
SharePoint and jQuery Essentials
Mark Rackley
 
SharePoint Saturday Atlanta 2015
SharePoint Saturday Atlanta 2015
Pushkar Chivate
 
JavaScript Misunderstood
JavaScript Misunderstood
Bhavya Siddappa
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 
7 tips for javascript rich ajax websites
7 tips for javascript rich ajax websites
oazabir
 
Learn from my Mistakes - Building Better Solutions in SPFx
Learn from my Mistakes - Building Better Solutions in SPFx
Thomas Daly
 
Power to the People: Manipulating SharePoint with Client-Side JavaScript
Power to the People: Manipulating SharePoint with Client-Side JavaScript
PeterBrunone
 
Real World SharePoint Framework and Azure Services
Real World SharePoint Framework and Azure Services
Brian Culver
 
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
The SharePoint and jQuery Guide by Mark Rackley - SPTechCon
SPTechCon
 
The SharePoint & jQuery Guide
The SharePoint & jQuery Guide
Mark Rackley
 
German introduction to sp framework
German introduction to sp framework
Bob German
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have kno...
Mark Rackley
 
Ad

Recently uploaded (20)

Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
Security Tips for Enterprise Azure Solutions
Security Tips for Enterprise Azure Solutions
Michele Leroux Bustamante
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC and Open Hackathons Monthly Highlights June 2025
OpenACC
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Securing Account Lifecycles in the Age of Deepfakes.pptx
Securing Account Lifecycles in the Age of Deepfakes.pptx
FIDO Alliance
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptx
FIDO Alliance
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance Seminar State of Passkeys.pptx
FIDO Alliance
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Murdledescargadarkweb.pdfvolumen1 100 elementary
Murdledescargadarkweb.pdfvolumen1 100 elementary
JorgeSemperteguiMont
 
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
“Key Requirements to Successfully Implement Generative AI in Edge Devices—Opt...
Edge AI and Vision Alliance
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
Ad

JavaScript and jQuery for SharePoint Developers

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