• Save
Introduction to using jQuery with SharePoint
Upcoming SlideShare
Loading in...5
×
 

Introduction to using jQuery with SharePoint

on

  • 15,214 views

Presented at SharePoint User Group Singapore, 10 March 2011

Presented at SharePoint User Group Singapore, 10 March 2011

Statistics

Views

Total Views
15,214
Views on SlideShare
15,154
Embed Views
60

Actions

Likes
2
Downloads
0
Comments
1

2 Embeds 60

http://www.modery.net 57
http://www.linkedin.com 3

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…
  • Nice, polished, useful. Well done.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction to using jQuery with SharePoint Introduction to using jQuery with SharePoint Presentation Transcript

  • Introduction to using jQuery with SharePoint
  • About Me
    Working fulltime with SharePoint since2007
    2 Asia-Pacific wide rollouts, involved inall kinds of things:
    Planning, Governance, Branding, Requirements Gathering, Solution Implementation, Training, Workflows, ...
    Not Administrator, not Developer, but:Consultant, Trainer, Designer, Power User, „Developer Light“, Analyst, Architect, ...If it‘s SharePoint, I‘m doing it! (or at least involved...)
    Rene Modery
    Web Program Manager
  • What is this session about?
    What is jQuery
    Some jQuery Basics
    Selection, Modification, Events, AJAX
    How can jQuery be used within SharePoint
    Demos, Demos, Demos!
    DEMO
  • © Information
    Most demo contents are inspired by or directly taken from other people of the great community (Original sources will be indicated!), incl.:
    Marc D. Anderson
    Jason MacKenzie
    WaldekMastykarz
    Alexander Bautz
    Key Point:The SharePoint and jQuery communities are awesome!
  • 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.” (jquery.com)
    Select elements, do things!
  • What can it do?
    DEMO
  • What do I need to know?
    JavaScript
    HTML & CSS
    Some CAML
  • Development Support Tools
    Editors
    Notepad++
    SharePoint Designer
    Visual Studio
    Debuggers
    IE Developer Tools + Fiddler (proxy)
    Firebug + FireQuery + FireFinder
  • jQuery Basics – Include
    Reference jquery.js within your page
    Either a “local” version or on a CDN
    <script src="jquery.js"></script>or<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    Full version (for development and debugging!) & minified (production!) available
  • jQuery Basics – $()
    Place your code within jQuery(document).ready()
    Code gets executed when DOM is ready
    jQuery(document).ready(function() { alert("hallo");});
    $(document).ready() or short form $() can also be used:
    $(function() { alert("hallo");});
    DEMO
  • jQuery Basics - Selection
    Multiple options to select elements, can also be combined
    DEMO
  • jQuery Basics – Manipulation
    DEMO
  • jQuery - AJAX
    Different ways to make AJAX calls with jQuery
  • jQuery & SharePoint –Why & When?
    Why?
    Easy to implement!
    Quick results!
    Many possibilities – UI, web services, extending DVWP, …
    When?
    No managed code allowed
    No developer available
    Managed code development more costly & resource intensive
  • Adding jQuery to SharePoint
    Add call to jquery.js into Content Editor WebPart (CEWP) or Master Page
    Add your own code into a CEWP or (better!) into a file stored in a central location
  • Selecting SharePoint Elements
    Use IE Developer Tools / Firebug to find IDs, classes, etc
    DEMO
  • Example: Content Modification - KPIs
    Simple content modification: select element, replace it
    DEMO
  • Example: Slideshow
    Show pictures from Image Library with fade effect
    DEMO
    Original code by WaldekMastykarzhttp://blog.mastykarz.nl/images-slideshow-sharepoint-2007-jquery/
  • Example: Column Visibility
    Show/hide columns in a list/library dynamically
    Original code from Alexander Bautz, http://www.endusersharepoint.com/2010/04/23/sharepoint-toggle-column-visibility-in-list-view/
    DEMO
  • Calling SharePoint Webservices
    Prepare SOAP envelope
    Call Webservice
    Process results
    1
    2
    3
    DEMO
    Example from: Professional SharePoint 2010 Branding and User Interface Design
  • SPServices
    “This is a jQuery library which abstracts SharePoint's Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities” (spservices.codeplex.com) :
    Web ServicesCheck SPServices documentation for detailed list
    Form EnhancementsEnhance forms with cascading dropdowns, related info, unique value, …
    UtilitiesGet current site, get current user, get query string, …
  • SPServices – Related Data
    Use $().SPServices.SPDisplayRelatedInfoif you want to display related data for fields when filling a form.
    DEMO
  • SPServices – Cascading Dropdowns
    Create a relationship between two or more dropdown selections
    DEMO
  • Providing Filter Dropdowns
    Using SPServices to fetch query parameters as well as the current site (NOT the whole URL!)
    Using jQuery to load and display SharePoint’s filters
    DEMO
  • What did we cover today?
    This much!
    There’s so much more to learn and do!
  • Where can I find out more?
    Official Site: http://www.jquery.com
    SPServices: http://spservices.codeplex.com
    Great overview of articles, books, etc: http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery
    Marc D Anderson’s Blog at http://sympmarc.com
    Chris O’Brien’s Blog at http://www.sharepointnutsandbolts.com/2010/10/sp2010-ajax-part-1-boiling-jquery-down.html
    Examples: http://www.nothingbutsharepoint.com