jQuery and SharePoint in HarmonyGreg GalipeauEnterprise SharePoint ArchitectGovernmenthttp://greggalipeau.com

Working fulltime with SharePoint since 2003

Started with the 2001 version of SharePoint

Started as .Net developer and learned the correct ways to develop against SharePoint over the last 10+ years

Learned SharePoint Administration, Design, Architecture, Analysis, Power end-user along the way

Certified Microsft MCP, MCAD, MCSD, etc.., etc.. (stopped counting after a while)

Have been a consultant, private employee and currently a government employee

About Me

Greg Galipeauwww.greggalipeau.comTwitter: @ggalipeau

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.” – jquery.com

“jQuery is a multi-browser Javascript Library designed to simplify the client-side-scripting of HTML”- wikipedia.org

In essence – jQuery makes writing Javascript easy

jQuery

Client side – no code to deploy Manipulation of DOM for animation, event

handling, Ajax applications Enables developers to create advanced,

high-level effects Lightweight, high-performance (if done

right) compared to some server side techniques or ASP.Net Ajax

Why Javascript

jQuery UI is reusable UI elements that use the jQuery library

You should understand jQuery UI theming before using this

I always include a jQuery UI reference with jQuery so I can do things like tabbing, accordions, etc…

jQuery vs jQuery UI

Master page reference Either a “local” version or on a CDN<script src=“jquery.js”></script>(the src can be in the 14/layout folder or in a style library in your site)

Or<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js></script>

Feature Helpful when you have multiple master pages

or want to use the out-of-the-box SharePoint master page

Use the AdditionalPageHead Delegate and an .ascx control

Important – used the minified version for Production! Full version is only for dev and debugging

How to include jQuery

Master Page or Feature is preferred method for global implementation on a SharePoint site

Sometimes you don’t have control over this

What to do? Use the Content Editor WebPart Even better

Put the jQuery reference in a Text file Store in a Central Location Reference the Text file from a Content Editor WebPart Export that Content Editor WebPart Add it to your WebPart gallery Now you can drag and drop the jQuery reference

WebPart on any page

Other ways to include jQuery

Don’t use the dollar sign ($) – SharePoint uses this on the calendar. If you use it you will have a CONFLICT anywhere a calendar is

The $() is just shorthand for the word jQuery

$(function() { alert(“hello”);}

Other option = jquery no conflict Var j = jquery.noConflict(); j(function() {

alert(“hello”);}

Jquery Basics - $()

=

jQuery(function() {

alert(“hello”);

}

IE Developer toolbar Has come a long way Already part of IE (unless you have an old

version) I use to be a Firebug guy – I’ve been turned to

the Toolbar Lets you set breakpoints in javascript to debug

on the client side Lets you select html elements to change css

on the client side

Debugging

DarksideMicrosoftToolbar

- Hiding and Showing elements on the page using jQuery

- Using jQuery Ajax and HttpHandlers to create high performance, great looking functionality

- Easy SharePoint Tabs (if time)

Demo Time

jQuery

Thanks to our sponsors!

Questions? Evaluations?

SharePint!!!

5335 Wisconsin Avenue NW6th FloorWashington, DC 200156pm - 8pm

Want to know more? Following me on Twitter?

@ggalipeau Reading my blog?

http://greggalipeau.com