SharePoint & jQuery – What I Wish I Would Have Known When I Started… Mark Rackley – Solutions Architect / SharePoint Practice Lead / Developer Email: email@example.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
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 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 Confirmed…
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’ > $(‘#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 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
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
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 $(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();
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.
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 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/