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.
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
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
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)
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
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
27. Power to the People
Manipulating SharePoint
with client-side JavaScript
Peter Brunone, MCTS
peter.brunone@improvingenterprises.com
http://weblogs.asp.net/peterbrunone