“NO FEATURE” SOLUTIONS IN

SHAREPOINT VIA JQUERY

Intro – Mike Huguet

App Dev Evangelist for

BRDNUG leader, http://brdnug.org

.NET & SharePoint Architect, Presenter

MS P & P SP 2010 Advisory Member

http://twitter.com/mhuguet

http://geekswithblogs.com/mikehuguet

Agenda

What is jQuery anyway?

See some cool stuff

What skills does it take?

Best practices

IT IS CODE!

What is jQuery?

`

Open source JavaScript library, jquery.com

Development accelerator, simplifies JavaScript

Tons of documentation & samples

Extensible JavaScript framework (plug-in model)

Thousands of plug-ins in plug-in database

DOM element selections, traversal, &

manipulation(cross browser)

CSS manipulation

AJAX

General utilities (i.e.-”each”)

Fluent syntax

User Interface

C’mon, SharePoint Remember?

Client side script + markup, just an include in HTML

Works well in CEWP

Allows for endless “no feature” extension

possibilities

Not SP Edition or Version specific

SPServices library wraps SP Services (Mark

Anderson)

SP 2010 client-side object model (CSOM)

Winning Combination

CEWP or Page

Lists & Libraries

• Customize forms

• Creative navigation

• Fancy dashboards

• Adding sizzle to pages

Showcase Time!

Customize Forms

http://www.sympraxisconsulting.com/Demos/Demo%20Pages/CascadingDropdowns.aspx

http://www.sympraxisconsulting.com/Demos/Demo%20Pages/FancyCBandRB.aspx

http://www.sympraxisconsulting.com/Demos/Demo%20Pages/SPAutocomplete.aspx

Creative Navigation

http://www.sympraxisconsulting.com/demos/Demo%20Pages/QuickLaunchAccordion.aspx

Fancy Dashboards

http://keith-wood.name/gChart.html

Adding Sizzle to Pages

http://www.sympraxisconsulting.com/Demos/Demo

%20Pages/jQueryAnimatedBanner.aspx

Do I have what it takes?

Do I have the skills?

HTML

CSS

JavaScript

SharePoint Designer

Search engine skills

Best Practices

Where do I put those files?

Same Site or Site

Collection

Centralized Resource

Site

Externally hosted

Feature

Simple Re-usable

What about the other files?

HTML fragments in doc libs w/ versioning

CSS in doc libs w/versioning

Images in picture or doc libs

Where do I put the script tag?

CEWP PageMaster Page

Simple Re-usable

Other Best Practices

Test before updating jQuery source files

Document & comment your solution

Limit usage of generated SP element names

Be warned that your solution may not be forward

compatible

Version your files

Key Takeaways

jQuery has many abilities to extend all versions &

editions of SharePoint

jQuery is still coding

Check out SPServices

mike.huguet@sparkhound.com

Questions

References

http://www.sharepointjoel.com/Lists/Posts/Post.asp

x?ID=178

http://sympmarc.com/

http://nothingbutsharepoint.com

http://spservices.codeplex.com