power to the people: manipulating sharepoint with client-side javascript

Welcome

2

Welcome to SharePoint Saturday Houston

• 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:

Thank you for being a part of the 3rd Annual SharePoint Saturday for the greater

Houston area!

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!

DON’T FORGET…to drop a business card up front!

Prize drawing after the show.

IntroductionsPeter 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

Power to the PeopleManipulating SharePoint with client-side JavaScript

Peter Brunone, MCTSpeter.brunone@improvingenterprises.com

http://weblogs.asp.net/peterbrunone

SERIOUSLY

Don’t forget to put your card in for the drawing.

You’ll wish you had.

Two sides to every (dev) story

Traditionally, this is how it’s been:

Client-Side Manipulation

• Style changes (though clunky)

• UI goodness (also clunky)• You can push a lot of

buttons…

Server-Side Manipulation

• List item CRUD• Security/Permissions• TRUE POWER!• (but mostly reserved for

Visual Studio)

So why develop client-side?

A few reasons:

• No special permissions required• No required packaging• No solution deployment process

= Quicker changes!

Let’s talk about…

• The role of JavaScript from then to now

• The rise of jQuery

• Tool memos and cool demos

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)

JavaScript in SharePoint

Web Services

– (insert mammoth block of code here)

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

JavaScript in SharePoint

Demonstration: Styling, etc. with 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)

Web Services and jQuery

The SPServices JavaScript library

• http://spservices.codeplex.com/• Thank you, Marc Anderson (@sympmarc)!• Packaged web service operations for SP• Runs on top of jQuery

A still more excellent way

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)

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.

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)

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

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.

Using JS with the CSOM

Demonstration: Adding and retrieving list items

The sum of our training

Nothing to see here

(last demo)

Questions?

Power to the PeopleManipulating SharePoint with client-side JavaScript

Peter Brunone, MCTSpeter.brunone@improvingenterprises.com

http://weblogs.asp.net/peterbrunone

28

Thanks to all our Sponsors