First delivered at SharePoint Saturday Houston, this presentation provides a brief background of the use of JavaScript in SharePoint before forging ahead into the capabilities of jQuery and the Client-Side Object Model.

1. Welcome

2. Welcome to SharePoint Saturday Houston
Thank you for being a part of the 3rd
Annual SharePoint Saturday for the greater
Houston area!
• Please turn off all electronic devices or set them to vibrate.
• If you must take a phone call, please do so in the hall so as not
to disturb others.
• Thanks to our Title Sponsor: And our Platinum Sponsors:
2

3. Information
• Speaker presentation slides will be available at
SharePointSaturday.org/Houston within a week
• Keep checking website for future events
• The Houston SharePoint User Group at
www.h-spug.org, will be having it’s May meeting
Wednesday May 24th. Please be sure to join us!
• Have a great day!
3

5. DON’T FORGET
…to drop a business card up front!
Prize drawing after the show.

6. Introductions
Peter Brunone (that’s me)
• peter.brunone@improvingenterprises.com
• http://weblogs.asp.net/PeterBrunone
In my life, I have:
• Ridden a unicycle
• Learned to play the tuba
• Become an avid fan of both Doctor Who and Doctor McNinja
• Not yet gotten on Twitter joined Twitter during this presentation

7. Power to the People
Manipulating SharePoint
with client-side JavaScript
Peter Brunone, MCTS
peter.brunone@improvingenterprises.com
http://weblogs.asp.net/peterbrunone

8. SERIOUSLY
Don’t forget to put your card in for
the drawing.
You’ll wish you had.

9. Two sides to every (dev) story
Traditionally, this is how it’s been:
Client-Side Manipulation Server-Side Manipulation
• Style changes (though • List item CRUD
clunky) • Security/Permissions
• UI goodness (also clunky) • TRUE POWER!
• You can push a lot of • (but mostly reserved for
buttons… Visual Studio)

10. So why develop client-side?
A few reasons:
• No special permissions required
• No required packaging
• No solution deployment process
= Quicker changes!

11. Let’s talk about…
• The role of JavaScript from then to now
• The rise of jQuery
• Tool memos and cool demos

12. JavaScript in SharePoint
(a brief history)
In the beginning, there was… not much.
• SP 1 – wait, there was a SharePoint v1?
• WSS 2.0 (SharePoint 2003) – FrontPage
– Web Services!
• WSS 3.0 (MOSS 2007) – SP Designer
– Web Services – a few more options
– Hack the Content Editor WebPart (CEWP)

13. JavaScript in SharePoint
Web Services
– (insert mammoth block of code here)

14. JavaScript in SharePoint
…and then along came jQuery!
– http://jquery.com
– A JavaScript library that abstracts out a ton of
basic (and not-so-basic) functions
– Largely affects the markup in the browser
– …BUT has some great built-in AJAX help for
calling server resources

15. JavaScript in SharePoint
Demonstration: Styling, etc. with jQuery

16. Web Services and jQuery
$(document).ready(function() {
var soapEnvelope =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>
<soapenv:Body>
<GetListCollection xmlns='http://schemas.microsoft.com/sharepoint/soap/'>
</GetListCollection>
</soapenv:Body>
</soapenv:Envelope>";
$.ajax({
url: "http://yoursite/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: getListNames,
contentType: "text/xml; charset="utf-8""
});
});
function getListNames(xData, status) {
$(xData.responseXML).find("List").each(function() {
$("#data").append("<div>" + $(this).attr("Title") + "</div>");
});
}
A lot less code, but still a bit of XML to track.
(Do I want to have to know what a “SOAP Envelope” is?)
(Special thanks to Jan Tielens for the code sample)

17. A still more excellent way
The SPServices JavaScript library
• http://spservices.codeplex.com/
• Thank you, Marc Anderson (@sympmarc)!
• Packaged web service operations for SP
• Runs on top of jQuery

18. What’s new in 2010?
All hail the Client-Side Object Model!
• Managed code (VB, C#, anything that
compiles for the .NET CLR)
• Silverlight
• JavaScript (ECMAScript)

19. Managed Code
Pros:
• Very powerful.
• Easy point of entry for .NET developers
Cons:
• Need .NET framework (proper version) on all
target machines
• Oh, and Visual Studio. You must compile.

20. Silverlight
Pros:
• It’s cool.
• Broader target base -- no .NET install required
Cons:
• Still not completely accepted
• Users must install a plug-in
• Another dev platform to learn (school is boring)

21. JavaScript
Pros:
• Almost universally accepted – mature tech
• Platform independent (OOTB browser support)
Cons:
• Not all SP CSOM functionality is available
• Object types differ (JS is a loosely-typed language)
– Some obscure methods replace

22. Using JS with the CSOM
All objects are derived from the SharePoint Object Model
What you need:
• SP.js
• The SharePoint default master page (trust me)
• FormDigest element – it’s for your own safety, ma’am.

23. Using JS with the CSOM
Demonstration: Adding and retrieving list items

24. The sum of our training

25. Nothing to see here
(last demo)

26. Questions?

27. Power to the People
Manipulating SharePoint
with client-side JavaScript
Peter Brunone, MCTS
peter.brunone@improvingenterprises.com
http://weblogs.asp.net/peterbrunone

28. Thanks to all our Sponsors
28