• Save
Spsemea   j query
Upcoming SlideShare
Loading in...5
×
 

Spsemea j query

on

  • 766 views

 

Statistics

Views

Total Views
766
Views on SlideShare
766
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

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…
Post Comment
Edit your comment

Spsemea   j query Spsemea j query Presentation Transcript

  • jQuery – What I Wish I Would Have Known When I Started…
    Mark Rackley – Solutions Architect
    Email: mrackley@gmail.com
    Blog: http://www.sharepointhillbilly.com
    Twitter: http://www.twitter.com/mrackley
  • Agenda
    jQuery Overview
    jQuery & SharePoint – What’s the Point?
    Deployment, Maintenance, Upgrades
    SPServices
    Development & Debugging
    Examples
    2
  • 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)
    View slide
  • What Skills do I need?
    JavaScript (duh)
    CSS
    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
    View slide
  • 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”
  • jQuery makes your SharePoint applications USABLE
  • 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
    Confirmed…
  • 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.
  • 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
  • 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.
  • 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
    Busted…
    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 $()
    You don’t have to use $(document).ready()
    Use $() directly
    $(‘#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’);
  • 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()
  • Development Basics
    $(‘#element’).addClass(“className”);
    $(‘#element’).removeClass(“className”);
    $(‘#element’).attr(“attributeName”);
    $(‘#element’).attr(“attributeName”,”attributeValue”);
    SharePoint Form Fields
    $(‘input[title=“Title”]’).val();
    $(‘select[title=“Title”]’).val();
    GET O’REILLY’S JQUERY POCKET REFERENCE
    http://oreilly.com/catalog/0636920016182
  • More Dev Basics
    Each loops
    $('table[class="myTable"]').each(
    function () {
    $('#' + this.id).hide();
    }
    );
    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
  • SPServicesGetListItems
  • SPServicesUpdateListItems
  • 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");
  • 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();
  • 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
  • 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+
  • 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
  • How to get it…
    jQuery
    http://jquery.com/
    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/
  • More jQuery Resources
    jQuery Pocket Reference
    http://oreilly.com/catalog/0636920016182
    CSS Pocket Refernce
    http://oreilly.com/catalog/9780596515058/
  • Housekeeping
    Please remember to submit your session evaluation forms after each session you attend to increase your chances at the raffle
    Follow SharePoint Saturday St. Louis on Twitter @spsstl and hashtag #spsstl
  • Thanks to Our Sponsors!
    Gold Sponsors
    Silver Sponsors
    Raffle Sponsors
  • Questions?
    Mark Rackley
    mrackley@gmail.com
    www.twitter.com/mrackley
    www.sharepointhillbilly.com
    32