Your SlideShare is downloading. ×
Enhancing the SharePoint user experience with jQuery
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Enhancing the SharePoint user experience with jQuery


Published on

Published in: Technology

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide
  • What is jQuery?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.What does that mean to you?You can reduce the amount of time it takes to add rich-features to your SharePoint application using minimal lines of code.  Since it's javascript it is client-side and increases the speed of execution without having the typical page refresh associated with a page postback.  You can begin to reduce the gap between internet application and windows client application giving your user a better experience.
  • jQuery was created by John ResigIt's open source and licensed under MIT and GPL so it's flexible and available to use in your different environments including productionIt's CSS3 compliant and also supports version 1, 2 and basic XPathIt's cross-browser compatible.  It works in the major versions of browsers including IE 6+, FF 2+, Opera 9+ and Safari 2+.It has a small footprint.  When you use the minified file and use Gzip compression it is around 19KB.  If you're not running compression then it is around 57KB. Definitely get it compressed.  Another option is to reference the Google hosted versionIt is being used right now in the web sites of some major corporations including BOA, Google and Dell.  You can see an expanded list on the jQuery website
  • Selectors - select all elements with <p> tag - select all elements with id ”tagName” - select all elements with class “className”
  • Ways to add to reference to SharePoint1. Add to a single pageYou can use a page editor and add it to the head section or put a Content Editor Web Part on the page.Contains the functionality2. Add to master pageaccessible on any page that uses that master pageFewer places to make changes3. Use the AdditionalPageHead Delegate ControlMake sure loaded by all SharePoint pages since the out of the box pages all contain delegate controlHave to create a ASCX file and place in the 12TEMPLATECONTROLTEMPLATES folder of every Front End Web Server.The feature can be scoped to any level so when it is activated all pages will have the script tag included in the HEAD section
  • 1. Updating Quick launch with expand/collapse - One thing that is missing out of the box is the ability to expand and collapse the Quick launch navigation area.  2.Dynamic people search - Retrieve results dynamically after certain number of characters entered in search box
  • Summary There are lots of good examples out on the web including the officailjQuery website.  Others like Jan Tielens and have plenty to look at as well.  New content is being added all the time to the plugins library that you can download and use in your environment.  It's so easy that pretty soon you'll be writing you own plugins to share with others!
  • Transcript

    • 1. Enhancing the SharePoint User Experience with jQuery
      Brian Wilson
    • 2. What is jQuery?
      Simple JavaScript
      Reduces lines of code
      Cross-browser compliant
      You don’t have to worry about writing tons of code to handle each browser
    • 3. jQueryOverview
      Created by John Resig
      Open Source
      Small footprint
      19KB – Minified and Gzipped
      CSS3 Compliant
      Major company websites using it
    • 4. jQueryBasics
      User community generated
      Thousands of different functions created
    • 5. Plugins
    • 6. More Basics
      Use the document ready handler
      Formal - $(document).ready(function() {});
      Short - $(function() {});
      Child selector
      p > a – direct child of p elements
      Attribute selector
      p[myAttr] – all elements with myAttr attribute
      :nth-child(n) – returns nth child
      :even and :odd
    • 7. Deploying jQuery in SharePoint
      Add <script> to page you want to reference
      You can also add a CEWP to a page
      Able to control the scope and who has access
      Adding to multiple locations can be tedious to keep track of
      Add to master page
      Easy to reference on any page referencing the master page
      Have to add to each master page
      Use AdditionalPageHead delegate control
      Create a feature
      Turn jQuery reference on/off for entire site
      Best option for deployment
    • 8. demo
    • 9. Summary
      Easy to use
      Tons of free content
      Jan Tielens – Basic overview and simple examples – good examples
      Supported by Microsoft and included with future releases of Visual Studio
      jQuery in Action – Bibeault/Katz
    • 10. Questions
      Email questions to
      Twitter - @bcwilsonttu
      Blog -