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


Published on

SharePoint and jQuery Best Practicres

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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

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