• Like
  • Save
SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have known...
Upcoming SlideShare
Loading in...5

SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have known...



SharePoint and jQuery Best Practicres

SharePoint and jQuery Best Practicres



Total Views
Views on SlideShare
Embed Views



2 Embeds 5

http://paper.li 4
http://www.docseek.net 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have known... SharePoint Saturday NYC - SharePoint and jQuery, what I wish I would have known... Presentation Transcript

    • SharePoint & jQuery – What I Wish I Would Have Known When I Started…
      Mark Rackley – Solutions Architect / SharePoint Practice Lead / Developer
      Email: mrackley@juniper-strategy.com
      Blog: http://www.sharepointhillbilly.com
      Twitter: http://www.twitter.com/mrackley
    • Agenda
      jQuery Overview
      jQuery & SharePoint – What’s the Point?
      Deployment, Maintenance, Upgrades
      Development & Debugging
    • What is jQuery?
      JavaScript utility library
      Quickly write interactive and USABLE applications
      You don’t have to deploy assemblies (perfect for tightly controlled environments)
    • What Skills do I need?
      JavaScript (duh)
      CSS, XML
      A development background
      It IS code
      Uses development constructs
      If you can’t write code, your ability to do magic will be limited to what you can copy/paste
      CAML, CAML, CAML… Sorry…
      Ability to think outside the box
      Use all the pieces together
    • SharePoint & jQuery? Why?
      Resolves many common SharePoint complaints without having to crack open Visual Studio
    • SharePoint & jQuery? Why?
      “It looks like SharePoint”
    • SharePoint & jQuery? Why?
      “That’s SharePoint?”
    • SharePoint & jQuery? Why?
      “I’m so sorry… SharePoint can’t do that out of the box”
    • SharePoint & jQuery? Why?
      “Sure, no problem”
    • SharePoint & jQuery? Why?
      “That will take 3 weeks???” becomes “2 days? Awesome! I love you… here, please accept this bonus for being such a wonderful developer”
    • jQuery makes your SharePoint applications USABLE
    • Common Myths
      It’s not secure
      Busted… It uses SharePoint’s security. All scripts run with privileges of current user
      It doesn’t perform well
      Plausible… It performs very well if you use it correctly in the right situations
      I can’t elevate privileges if I need to
    • Yeah but…
      I can’t interact with SharePoint Lists and Libraries without screen scraping
      You can call Web Services with JavaScript (SPServices is a wonderful jQuery library that wraps SharePoints Web Service calls)
      It has no real use in my environment because of “x”
      Quickly prototype and tweak web parts before writing in Visual Studio. In fact, in some environments it is the only development option.
    • Deployment options
      Create central script document library for jQuery scripts
      Upload new versions as needed
      Turn on versioning and store multiple versions
      Use metadata to keep track of script information
      Open/Save in SPD for quick turnaround
      Slight performance hit from storing script in Content DB
    • Deployment options
      Store on file system
      Deploy with solution package
      Increased performance of loading from file system
      Lose the ability to version, tag, and update without solution upgrade.
    • Maintenance Best Practice
      BAD MOJO
      DO NOT put your scripts directly in the MasterPage or aspx pages using SPD
      Script must be edited in SPD or new solution has to be deployed with each tweak.
      No Reuse
      *ONE EXCEPTION* loading script in the MasterPage that you want loaded for every page. (you should really deploy MasterPages as solutions)
    • Maintenance Best Practice
      Not as Bad Mojo… but don’t do it.
      Don’t put your script source in the CEWP
      If brilliant user deletes web part, your script is gone.
      No re-use
      No versioning
      In 2010 SharePoint likes to eat your scripts
      Okay.. So, it’s fine for quick prototyping but put it in a script file when you are done!
    • Maintenance Best Practice
      Better practice (Best in some cases)
      Link to scripts in a CEWP
      Easy maintenance
      Maintain scripts in one central location
      Modify script in one place updates every page that uses it.
      Scripts can be checked-out to prevent developers from stepping on top of each other.
    • Maintenance Best Practice
      Best practice? (Maybe in some cases)
      Custom Control linked to script
      Deployed as a solution
      Keeps users out of CEWP
    • Moving Between Environments and Upgrading to 2010
      It just works… (woo hoo)
      Uses list names and not GUIDs so no issues moving from dev to prod
      For the most part works identical in 2007 and 2010 (I’m sure there’s the occasional issue but I’ve never run into it).
      Might want to tweak in 2010 to take advantage of 2010 features (ribbin, modal pop-ups)
    • Okay then…
      jQuery must be the SharePoint Silver Bullet
      Not so fast…
      It does “expose” business logic to user if they dig around
      It executes on the client side and can perform slow if manipulating larges amounts of data
      Be extra careful for external facing applications
      You can’t do EVERYTHING with jQuerylike…
      Timer Jobs
      Workflows (although it can eliminate the need for some)
      Event Handlers
      Elevate Privliges
      Easily interact with all business systems
    • jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely
    • Development Basics
      jQuery methods are executed using jQuery() or $()
      $(document).ready() is your “main()”
      Don’t HAVE to, but easy to quickly locate where script starts
      $(‘#elementID’) to interact with any element
      Divs, tables, rows, cells, inputs, selects.. Etc.. Etc.. Etc…
      <table id=‘myTable’></table>
      $(‘#myTable’).append(‘<tr><td>add a row</td></tr>’);
      $(‘#elementID’).val() gets values of inputs
      <input type=‘text’ id=‘myTextBox’ >
      $(‘#elementID’).val([value]) sets the values of inputs
      $(‘#myTextBox’).val(‘Hello World’);
    • Development Basics
      $(‘#elementID’).html() gets the raw html within an element (great for divs, spans, tables, table cells, etc.)
      <div id=‘myDiv’>Hello World</div>
      $(‘#myDiv’).html() = ‘Hello World’
      $(‘#elementID’).html(“<html text>”) to set raw html
      $(‘#myDiv’).html(‘Hello World! Welcome to SPSSTL!’)
      $(‘#elementID’).hide(), $(‘#elementID’).show(), and $(‘#elementID’).toggle()
    • Development Basics
      SharePoint Form Fields
      CDATA is a life saver
      Wrap values in CDATA tags:
      "<![CDATA[" + data + "]]>"
    • SPServices
      jQuery library to execute SharePoint’s Web Services
      Get List Items
      Add/Update List Items
      Create lists, content types, site columns, etc.
      Create document library folders
      • Create cascading drop down lists
      • Get user groups and permissions
      • Potentially call ANY SharePoint Web Service
    • SPServices
      Works identical in SharePoint 2007 and SharePoint 2010
      Runs with permissions of current user
      Communicate across sites
    • SPServices - FYI
      Use internal field names
      Returned values have “ows_” in front of field names
      Lookup & People fields
      Value returned as “ID;#Value” (1;#Field Value)
      Check for new item ID on item add to make sure item added correctly
      varnewID = $(xData.responseXML).find("[nodeName=z:row]").attr("ows_ID");
    • SPServicesGetListItems
    • SPServicesUpdateListItems
    • Development Tips
      Develop for performance
      Limit rows returned using CAML
      Avoid screen scraping (Use SPServices)
      Don’t call web services until the data is needed.
      Use those ID’s to your advantage
      <td id=‘ListName-4’>
      Attributes are awesome
      <input type="text" title="list title 4" id="4">
      $(‘input[title=“list title 4”]’).val();
    • Writing jQuery
      Pick whatever editor makes you happy…
      SharePoint Designer
      No need to upload scripts
      Visual Studio
      I don’t use it, so can’t speak to it
      Aptana (actual JavaScript IDE)
      Gives you some intellisense
      Good bracket matching which tends to bite you in the butt
    • Debugging… ugh.. It ain’t pretty
      Alerts.. Alerts.. Alerts.. Alerts…
      Developer Tools
      Set breakpoints
      Evaluate expressions and variables inline (like REAL debugging!)
      Firebug for Firefox
      Considered to be best of the free tools out there
      IE Developer Tools
      Comes installed on IE 8+
      console.log (don’t forget to remove before deploying)
    • Debugging… Common Errors
      Usually it means your library didn’t get loaded
      Object Expected
      Object doesn’t support method
      Make sure you don’t load scripts more than once
      Null Object reference
      Check your braces
      Make sure you end lines with “;”
      Check for missing quotes
      When all else fails, delete your script and rebuild it slowly in chunks, testing as you go.
    • DEMOS
    • jQuery& SharePoint
      The Good
      Create impressive, usable applications quickly
      Great for restricted environments
      Can take your SharePoint deployments to the next level
      The Bad
      Can create havoc if you don’t know what you are doing
      Can perform horribly
      Can’t do everything
    • Getting Started…
      A Dummies Guide to SharePoint and jQuery
      Super Awesome 3rd party libraries that integrate well
      Modal dialogs - http://www.ericmmartin.com/projects/simplemodal/
      Calendar - http://arshaw.com/fullcalendar/
      Charts - http://g.raphaeljs.com/
    • More jQuery Resources
      jQuery Pocket Reference
      CSS Pocket Refernce
    • Questions?
      Don’t drink the
      Mark Rackley