Your SlideShare is downloading. ×
jQuery – What I Wish I Would Have Known When I Started… <br />Mark Rackley – Solutions Architect<br />Email: mrackley@gmai...
Agenda<br />jQuery Overview<br />jQuery & SharePoint – What’s the Point?<br />Deployment, Maintenance, Upgrades<br />SPSer...
What is jQuery?<br />JavaScript utility library - no cross browser issues if you are careful<br />Quickly write interactiv...
What Skills do I need?<br />JavaScript (duh)<br />CSS<br />A development background helps!<br />It IS code<br />Uses devel...
SharePoint & jQuery? Why?<br />Resolves many SharePoint complaints without having to crack open Visual Studio<br />“It loo...
jQuery makes your SharePoint applications USABLE<br />
Common Myths<br />It’s not secure<br />Busted… It uses SharePoint security. All scripts run with privleges of current user...
What about…<br />I can’t interact with SharePoint Lists and Libraries<br />Busted… You can call Web Services with JavaScri...
Yeah But… It’s not deployable<br />Create central script document library for jQuery scripts<br />Upload new versions as n...
Okay… but… It’s not maintainable<br />Script Placement<br />Don’t put your script source in the CEWP<br />Don’t hardcode s...
Moving Between Environments and Upgrading to 2010<br />It just works… (woo hoo)<br />Uses list names and not GUIDs so no i...
Okay then…<br />jQuery must be the SharePoint Silver Bullet<br />Busted…<br />It does “expose” business logic to user if t...
jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely<br />
Development Basics<br />jQuery methods are executed using jQuery() or $()<br />You don’t have to use $(document).ready() <...
Development Basics<br />$(‘#elementID’).html() gets the raw html within an element (great for divs, spans, tables, table c...
Development Basics<br />$(‘#element’).addClass(“className”);<br />$(‘#element’).removeClass(“className”);<br />$(‘#element...
More Dev Basics<br />Each loops<br />$('table[class="myTable"]').each(<br />		function () {<br />			$('#' + this.id).hide(...
SPServices<br />jQuery library to execute SharePoint’s Web Services<br />Get List Items<br />Add/Update List Items<br />Cr...
Get user groups and permissions
Potentially call ANY SharePoint Web Service</li></li></ul><li>SPServices<br />Works identical in SharePoint 2007 and Share...
SPServicesGetListItems<br />
SPServicesUpdateListItems<br />
SPServices - FYI<br />Use internal field names <br />Returned values have “ows_” in front of field names<br />$(this).attr...
Development Tips<br />Develop for performance<br />Limit rows returned using CAML<br />Avoid screen scraping (Use SPServic...
Writing jQuery<br />Pick whatever editor makes you happy…<br />SharePoint Designer<br />No need to upload scripts<br />Vis...
Debugging… ugh.. It ain’t pretty<br />Alerts.. Alerts.. Alerts.. Alerts…<br />Developer Tools<br />Set breakpoints<br />Ev...
Debugging… Common Errors<br />Usually it means your library didn’t get loaded<br />Object Expected<br />Object doesn’t sup...
DEMOS<br />
How to get it…<br />jQuery<br />http://jquery.com/<br />SPServices<br />http://spservices.codeplex.com<br />Super Awesome ...
More jQuery Resources<br />jQuery Pocket Reference<br />http://oreilly.com/catalog/0636920016182<br />CSS Pocket Refernce<...
Housekeeping<br />Please remember to submit your session evaluation forms after each session you attend to increase your c...
Thanks to Our Sponsors!<br />Gold Sponsors<br />Silver Sponsors<br />Raffle Sponsors<br />
Upcoming SlideShare
Loading in...5
×

SharePoint Saturday St. Louis - SharePoint & jQuery

1,359

Published on

Learn best practices from using jQuery in your SharePoint environment.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,359
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "SharePoint Saturday St. Louis - SharePoint & jQuery"

  1. 1. jQuery – What I Wish I Would Have Known When I Started… <br />Mark Rackley – Solutions Architect<br />Email: mrackley@gmail.com<br />Blog: http://www.sharepointhillbilly.com<br />Twitter: http://www.twitter.com/mrackley<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 - no cross browser issues if you are careful<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<br />A development background helps!<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 SharePoint complaints without having to crack open Visual Studio<br />“It looks like SharePoint” becomes “That’s SharePoint?”<br />“SharePoint can’t do that out of the box” becomes “Sure, no problem”<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 />
  6. 6. jQuery makes your SharePoint applications USABLE<br />
  7. 7. Common Myths<br />It’s not secure<br />Busted… It uses SharePoint security. All scripts run with privleges 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 />
  8. 8. What about…<br />I can’t interact with SharePoint Lists and Libraries<br />Busted… 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 />Busted… Quickly prototype and tweak web parts before writing in Visual Studio. In fact, in some environments it is the only development option. <br />
  9. 9. Yeah But… It’s not deployable<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 />Store on file system<br />Deploy with solution package<br />Increased performance of loading from file system<br />
  10. 10. Okay… but… It’s not maintainable<br />Script Placement<br />Don’t put your script source in the CEWP<br />Don’t hardcode scripts in your MasterPages<br />Again… deploy scripts to central script document library or to file system with solution package<br />If stored in doc lib, turn on versioning to easily roll-back if needed. <br />
  11. 11. 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 />
  12. 12. Okay then…<br />jQuery must be the SharePoint Silver Bullet<br />Busted…<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 />
  13. 13. jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely<br />
  14. 14. Development Basics<br />jQuery methods are executed using jQuery() or $()<br />You don’t have to use $(document).ready() <br />Use $() directly<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 />
  15. 15. 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 />
  16. 16. Development Basics<br />$(‘#element’).addClass(“className”);<br />$(‘#element’).removeClass(“className”);<br />$(‘#element’).attr(“attributeName”);<br />$(‘#element’).attr(“attributeName”,”attributeValue”);<br />SharePoint Form Fields<br />$(‘input[title=“Title”]’).val();<br />$(‘select[title=“Title”]’).val();<br />GET O’REILLY’S JQUERY POCKET REFERENCE<br />http://oreilly.com/catalog/0636920016182<br />
  17. 17. More Dev Basics<br />Each loops<br />$('table[class="myTable"]').each(<br /> function () {<br /> $('#' + this.id).hide();<br /> }<br />);<br />CDATA is a life saver<br />Wrap values in CDATA tags:<br />"<![CDATA[" + data + "]]>"<br />
  18. 18. 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
  19. 19. Get user groups and permissions
  20. 20. 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 />
  21. 21. SPServicesGetListItems<br />
  22. 22. SPServicesUpdateListItems<br />
  23. 23. 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 />
  24. 24. 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 />
  25. 25. 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 />
  26. 26. 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 />
  27. 27. 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 />
  28. 28. DEMOS<br />
  29. 29. How to get it…<br />jQuery<br />http://jquery.com/<br />SPServices<br />http://spservices.codeplex.com<br />Super Awesome 3rd party libraries that integrate well<br />Modal dialogs - http://www.ericmmartin.com/projects/simplemodal/<br />Calendar - http://arshaw.com/fullcalendar/<br />Charts - http://g.raphaeljs.com/<br />
  30. 30. More jQuery Resources<br />jQuery Pocket Reference<br />http://oreilly.com/catalog/0636920016182<br />CSS Pocket Refernce<br />http://oreilly.com/catalog/9780596515058/<br />
  31. 31. Housekeeping<br />Please remember to submit your session evaluation forms after each session you attend to increase your chances at the raffle<br />Follow SharePoint Saturday St. Louis on Twitter @spsstl and hashtag #spsstl<br />
  32. 32. Thanks to Our Sponsors!<br />Gold Sponsors<br />Silver Sponsors<br />Raffle Sponsors<br />
  33. 33. Questions?<br />Mark Rackley<br />mrackley@gmail.com<br />www.twitter.com/mrackley<br />www.sharepointhillbilly.com<br />32<br />

×