• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to using jQuery with SharePoint
 

Introduction to using jQuery with SharePoint

on

  • 14,885 views

Presented at SharePoint User Group Singapore, 10 March 2011

Presented at SharePoint User Group Singapore, 10 March 2011

Statistics

Views

Total Views
14,885
Views on SlideShare
14,825
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

11 of 1 previous next

  • 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