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

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 endusersharepoint.com 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!
  • Enhancing the SharePoint user experience with jQuery

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