Your SlideShare is downloading. ×
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. jQuery – What I Wish I Would Have Known a Year Ago…
    Mark Rackley – Solutions Architect
  • 2. Agenda
    jQuery Overview
    jQuery & SharePoint – What’s the Point?
    Deployment, Maintenance, Upgrades
    Development & Debugging
  • 3. What is jQuery?
    JavaScript utility library - no cross browser issues if you are careful
    Quickly write interactive and USABLE applications
    You don’t have to deploy assemblies (perfect for tightly controlled environments)
  • 4. What Skills do I need?
    JavaScript (duh)
    A development background helps!
    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
  • 5. SharePoint & jQuery? Why?
    Resolves many SharePoint complaints without having to crack open Visual Studio
    “It looks like SharePoint” becomes “That’s SharePoint?”
    “SharePoint can’t do that out of the box” becomes “Sure, no problem”
    “That will take 3 weeks???” becomes “2 days? Awesome! I love you… here, please accept this bonus for being such a wonderful developer”
  • 6. jQuery makes your SharePoint applications USABLE
  • 7. Common Myths
    It’s not secure
    Busted… It uses SharePoint security. All scripts run with privleges 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
  • 8. What about…
    I can’t interact with SharePoint Lists and Libraries
    Busted… 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”
    Busted… Quickly prototype and tweak web parts before writing in Visual Studio. In fact, in some environments it is the only development option.
  • 9. Yeah But… It’s not deployable
    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
    Store on file system
    Deploy with solution package
    Increased performance of loading from file system
  • 10. Okay… but… It’s not maintainable
    Script Placement
    Don’t put your script source in the CEWP
    Don’t hardcode scripts in your MasterPages
    Again… deploy scripts to central script document library or to file system with solution package
    If stored in doc lib, turn on versioning to easily roll-back if needed.
  • 11. 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)
  • 12. Okay then…
    jQuery must be the SharePoint Silver Bullet
    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
  • 13. jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely
  • 14. Development Basics
    jQuery methods are executed using jQuery() or $()
    You don’t have to use $(document).ready()
    Use $() directly
    $(‘#elementID’) to interact with any element
    $(‘#elementID’).val() gets values of inputs
    $(‘#elementID’).val([value]) sets the values of inputs
    $(‘#elementID’).html() gets the raw html within an element (great for divs, spans, tables, table cells, etc.)
    $(‘#elementID’).html(“<html text>”) to set raw html
    $(‘#elementID’).hide() and $(‘#elementID’).show()
  • 15. Development Basics
    vardivs = $(“div”);
    Returns all divs in the document
  • 16. More Dev Basics
    Each loops
    function () {
    $('#' +;
    CDATA is a life saver
    Wrap values in CDATA tags:
    "<![CDATA[" + data + "]]>"
  • 17. 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
    • 18. Get user groups and permissions
    • 19. Potentially call ANY SharePoint Web Service
  • SPServices
    Works identical in SharePoint 2007 and SharePoint 2010
    Runs with permissions of current user
    Communicate across sites
  • 20. SPServicesGetListItems
  • 21. SPServicesUpdateListItems
  • 22. 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");
  • 23. 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">
  • 24. Writing jQuery
    Pick whatever editor makes you happy…
    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
  • 25. 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+
  • 26. 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.
  • 27. DEMOS
  • 28. How to get it…
    Super Awesome 3rd party libraries that integrate well
    Modal dialogs -
    Calendar -
    Charts -
  • 29. More jQuery Resources
    jQuery Pocket Reference
    CSS Pocket Refernce
  • 30. Questions?
    Mark Rackley