Top 10 jQuery Uses in SharePoint 2010

Thank you for joining our webinar! We will begin shortly.

Housekeeping• ‘30 on Thursday’ Series

– Bi-weekly 30 minute webinar series

• Next Webinar: Thursday, February 21st

– Building Charts with Power View - SharePoint 2013 and Excel 2013

• Full Schedule: www.susqtech.com/webinars

Housekeeping

• Today’s Session is being recorded

• Archive of Past Sessions– SusQtech.com/ArchivedWebinars

• Questions - Use the window at right

OnlineCourses

Learn More or Register at SusQtech.com/OnlineTraining

Advanced InfoPath Forms in SharePoint 2010 WebinarFebruary 20, 2013 | Online

Using jQuery in SharePoint 2010 WebinarMarch 28, 2013 | Online

CourseRecordings

SusQtech.com/OnlineTraining

Today’sSession• Topic:

– Top 10 jQuery Uses in SharePoint 2010

• Presenter:– Marc Anderson, SharePoint MVP

• Moderator:– Steve Witt, SusQtech

LET’S GET STARTED!

What Is jQuery?

From the 30 on Thursday webinar description:

“jQuery is a powerful JavaScript library that allows for easy implementation of dynamic user interface components for things like accordion navigation, tabs and image rotators that make website more engaging and usable.”

What Is jQuery?

From the jQuery.com site:“jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.”

Adding jQuery/jQueryUI

Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisitedhttp://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/

10. Simple text changes

$(".ms-socialNotif-text").text("Like This");

9. Add branding effects

• Not just CSS-based• React to user behavior

Fancy checkboxes and radio buttonshttp://www.sympraxisconsulting.com/Demos/Demo%20Pages/FancyCBandRB.aspx

8. Add new behavior to existing controls

$("input[title='Title']").val("Enter the title....");$("input[title='Title']").click(function() { $(this).val("");});

7. Rearrange DOM elements

$().SPServices.SPArrangeChoiceshttp://spservices.codeplex.com/wikipage?title=$().SPServices.SPArrangeChoices

6. Add jQueryUI effects

5. Plugins, plugins, plugins

• Image rotators• Slideshows• Charting• Graphing• Animation• Effects

jQuery Plugin Registry: http://plugins.jquery.com/MetroJS: http://www.drewgreenwell.com/

4. Improve form interactions

• Cascading dropdowns• Display related info• Update multiple lists at the same

time

$().SPServices.SPCascadeDropdowns$().SPServices.SPDisplayRelatedInfo

3. Reduce the number of postbacks

• Use .ajax() to write to underlying lists and libraries

• Satisfy the Facebook generation

2. Improve the out of the box user interface

Display All Related Tasks for a SharePoint Workflow Using jQuery, SPServices, and jQueryUIhttp://sympmarc.com/2011/06/07/display-all-related-tasks-for-a-sharepoint-workflow-using-jquery-spservices-and-jqueryui/

1. Create interactive applications

Questions/Comments

Steve WittSteveW@susqtech.com @splumberjack

www.SusQtech.com/Webinars

Marc Andersonmarc.anderson@sympraxisconsulting.com @sympmarc

ThankYou!