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

  • 1,853 views
Uploaded on

SharePoint and jQuery Best Practicres

SharePoint and jQuery Best Practicres

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,853
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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
  • 2. Agenda
    jQuery Overview
    jQuery & SharePoint – What’s the Point?
    Deployment, Maintenance, Upgrades
    SPServices
    Development & Debugging
    Examples
    2
  • 3. What is jQuery?
    JavaScript utility library
    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)
    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
  • 5. SharePoint & jQuery? Why?
    Resolves many common SharePoint complaints without having to crack open Visual Studio
  • 6. SharePoint & jQuery? Why?
    “It looks like SharePoint”
  • 7. SharePoint & jQuery? Why?
    “That’s SharePoint?”
  • 8. SharePoint & jQuery? Why?
    “I’m so sorry… SharePoint can’t do that out of the box”
  • 9. SharePoint & jQuery? Why?
    “Sure, no problem”
  • 10. 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”
  • 11. jQuery makes your SharePoint applications USABLE
  • 12. 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
    Confirmed…
  • 13. 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.
  • 14. 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
  • 15. 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.
  • 16. 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)
  • 17. 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!
  • 18. 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.
  • 19. Maintenance Best Practice
    Best practice? (Maybe in some cases)
    Custom Control linked to script
    Deployed as a solution
    Keeps users out of CEWP
  • 20. 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)
  • 21. 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
  • 22. jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely
  • 23. 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’ >
    $(‘#myTextBox’).val();
    $(‘#elementID’).val([value]) sets the values of inputs
    $(‘#myTextBox’).val(‘Hello World’);
  • 24. 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()
    $(‘#myDiv’).hide()
    $(‘#myDiv’).show()
    $(‘#myDiv’).toggle()
  • 25. Development Basics
    SharePoint Form Fields
    $(‘input[title=“Title”]’).val();
    $(‘select[title=“Title”]’).val();
    CDATA is a life saver
    Wrap values in CDATA tags:
    "<![CDATA[" + data + "]]>"
    GET O’REILLY’S JQUERY POCKET REFERENCE
    http://oreilly.com/catalog/0636920016182
  • 26. 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
    • 27. Get user groups and permissions
    • 28. Potentially call ANY SharePoint Web Service
  • SPServices
    Works identical in SharePoint 2007 and SharePoint 2010
    Runs with permissions of current user
    Communicate across sites
  • 29. SPServices - FYI
    Use internal field names
    Returned values have “ows_” in front of field names
    $(this).attr("ows_Title");
    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");
  • 30. SPServicesGetListItems
  • 31. SPServicesUpdateListItems
  • 32. 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">
    $('#4').attr("title");
    $(‘input[title=“list title 4”]’).val();
  • 33. 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
    NotePad++
    Good bracket matching which tends to bite you in the butt
  • 34. 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)
  • 35. 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.
  • 36. DEMOS
  • 37. 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
  • 38. Getting Started…
    A Dummies Guide to SharePoint and jQuery
    http://bit.ly/jQueryForDummies
    SPServices
    http://spservices.codeplex.com
    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/
  • 39. More jQuery Resources
    jQuery Pocket Reference
    http://oreilly.com/catalog/0636920016182
    CSS Pocket Refernce
    http://oreilly.com/catalog/9780596515058/
  • 40. Questions?
    Don’t drink the
    haterade…
    Mark Rackley
    mrackley@juniper-strategy.com
    www.twitter.com/mrackley
    www.sharepointhillbilly.com
    39