• Save
Enhancing the SharePoint user experience with jQuery
Upcoming SlideShare
Loading in...5
×
 

Enhancing the SharePoint user experience with jQuery

on

  • 2,317 views

 

Statistics

Views

Total Views
2,317
Views on SlideShare
2,293
Embed Views
24

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 24

http://www.slideshare.net 16
http://www.linkedin.com 7
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 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 Enhancing the SharePoint user experience with jQuery Presentation Transcript

  • Enhancing the SharePoint User Experience with jQuery
    Brian Wilson
  • What is jQuery?
    Simple JavaScript
    Client-side
    Fast
    Reduces lines of code
    Cross-browser compliant
    You don’t have to worry about writing tons of code to handle each browser
  • jQueryOverview
    Created by John Resig
    Open Source
    Small footprint
    19KB – Minified and Gzipped
    CSS3 Compliant
    Major company websites using it
  • jQueryBasics
    Selectors
    $(“p”)
    $(“#tagName”)
    $(“.className”)
    Animations
    .show()
    .hide()
    .fadeIn()
    .fadeOut()
    .slideUp()
    .slideDown()
    Plugins
    User community generated
    Thousands of different functions created
  • Plugins
  • 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
    :first
    :nth-child(n) – returns nth child
    :even and :odd
  • 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
  • demo
  • Summary
    Easy to use
    Tons of free content
    Jan Tielens – Basic overview and simple examples
    www.endusersharepoint.com – good examples
    Supported by Microsoft and included with future releases of Visual Studio
    Books
    jQuery in Action – Bibeault/Katz
  • Questions
    Email questions to bwilson@idarchitects.com
    Twitter - @bcwilsonttu
    Blog - http://businesstechinfo.blogspot.com/