#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
3 likes707 views
This document provides an overview of jQuery and how it can be used with SharePoint. It discusses how jQuery can be used to resolve common SharePoint issues and make applications more usable. It addresses common myths about jQuery and provides tips for development, debugging, and deployment of jQuery code in SharePoint. Examples of using jQuery with SharePoint are also demonstrated.
![Development BasicsjQuery methods are executed using jQuery() or $()You don’t have to use $(document).ready() Use $() directly$(‘#elementID’) to interact with any element$(‘#elementID’).val() gets values of inputs$(‘#elementID’).val([value]) sets the values of inputs$(‘#elementID’).html() gets the raw html within an element (great for divs, spans, tables, table cells, etc.)$(‘#elementID’).html(“<html text>”) to set raw html$(‘#elementID’).hide() and $(‘#elementID’).show()](https://image.slidesharecdn.com/spsemea-jquery-110122143027-phpapp01/85/SPSEMEA-SharePoint-jQuery-What-I-wish-I-would-have-known-a-year-ago-14-320.jpg)
![More Dev BasicsEach loops$('table[class="myTable"]').each( function () { $('#' + this.id).hide(); });CDATA is a life saverWrap values in CDATA tags:"<![CDATA[" + data + "]]>"](https://image.slidesharecdn.com/spsemea-jquery-110122143027-phpapp01/85/SPSEMEA-SharePoint-jQuery-What-I-wish-I-would-have-known-a-year-ago-16-320.jpg)
![SPServices - FYIUse internal field names Returned values have “ows_” in front of field names$(this).attr("ows_Title");Lookup & People fieldsValue returned as “ID;#Value” (1;#Field Value)Check for new item ID on item add to make sure item added correctlyvarnewID = $(xData.responseXML).find("[nodeName=z:row]").attr("ows_ID");](https://image.slidesharecdn.com/spsemea-jquery-110122143027-phpapp01/85/SPSEMEA-SharePoint-jQuery-What-I-wish-I-would-have-known-a-year-ago-22-320.jpg)
#SPSEMEA SharePoint & jQuery - What I wish I would have known a year ago..
- 1. jQuery – What I Wish I Would Have Known a Year Ago… Mark Rackley – Solutions ArchitectEmail: mrackley@gmail.comBlog: http://www.sharepointhillbilly.comTwitter: http://www.twitter.com/mrackley
- 2. AgendajQuery OverviewjQuery & SharePoint – What’s the Point?Deployment, Maintenance, UpgradesSPServicesDevelopment & DebuggingExamples2
- 3. What is jQuery?JavaScript utility library - no cross browser issues if you are carefulQuickly write interactive and USABLE applicationsYou don’t have to deploy assemblies (perfect for tightly controlled environments)
- 4. What Skills do I need?JavaScript (duh)CSSA development background helps!It IS codeUses development constructsIf you can’t write code, your ability to do magic will be limited to what you can copy/pasteCAML, CAML, CAML… Sorry…Ability to think outside the boxUse all the pieces together
- 5. 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”
- 6. jQuery makes your SharePoint applications USABLE
- 7. Common MythsIt’s not secureBusted… It uses SharePoint security. All scripts run with privleges of current userIt doesn’t perform wellPlausible… It performs very well if you use it correctly in the right situationsI can’t elevate privileges if I need toConfirmed…
- 8. What about…I can’t interact with SharePoint Lists and LibrariesBusted… 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.
- 9. Yeah But… It’s not deployableCreate central script document library for jQuery scriptsUpload new versions as neededTurn on versioning and store multiple versionsUse metadata to keep track of script informationStore on file systemDeploy with solution packageIncreased performance of loading from file system
- 10. Okay… but… It’s not maintainableScript PlacementDon’t put your script source in the CEWPDon’t hardcode scripts in your MasterPagesAgain… deploy scripts to central script document library or to file system with solution packageIf stored in doc lib, turn on versioning to easily roll-back if needed.
- 11. Moving Between Environments and Upgrading to 2010It just works… (woo hoo)Uses list names and not GUIDs so no issues moving from dev to prodFor 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)
- 12. Okay then…jQuery must be the SharePoint Silver BulletBusted…It does “expose” business logic to user if they dig aroundIt executes on the client side and can perform slow if manipulating larges amounts of dataBe extra careful for external facing applicationsYou can’t do EVERYTHING with jQuerylike…Timer JobsWorkflows (although it can eliminate the need for some)Event HandlersElevate PrivligesEasily interact with all business systems
- 13. jQuery is another tool for the SharePoint Developer’s toolkitUnderstand the limitationsUse it wisely
- 14. Development BasicsjQuery methods are executed using jQuery() or $()You don’t have to use $(document).ready() Use $() directly$(‘#elementID’) to interact with any element$(‘#elementID’).val() gets values of inputs$(‘#elementID’).val([value]) sets the values of inputs$(‘#elementID’).html() gets the raw html within an element (great for divs, spans, tables, table cells, etc.)$(‘#elementID’).html(“<html text>”) to set raw html$(‘#elementID’).hide() and $(‘#elementID’).show()
- 15. Development Basicsvardivs = $(“div”);Returns all divs in the document$(‘#element’).addClass(“className”);$(‘#element’).removeClass(“className”);$(‘#element’).attr(“attributeName”);$(‘#element’).attr(“attributeName”,”attributeValue”);GET O’REILLY’S JQUERY POCKET REFERENCEhttp://oreilly.com/catalog/0636920016182
- 16. More Dev BasicsEach loops$('table[class="myTable"]').each( function () { $('#' + this.id).hide(); });CDATA is a life saverWrap values in CDATA tags:"<![CDATA[" + data + "]]>"
- 17. SPServicesjQuery library to execute SharePoint’s Web ServicesGet List ItemsAdd/Update List ItemsCreate lists, content types, site columns, etc.Create document library foldersCreate cascading drop down lists
- 18. Get user groups and permissions
- 19. Potentially call ANY SharePoint Web ServiceSPServicesWorks identical in SharePoint 2007 and SharePoint 2010Runs with permissions of current userCommunicate across sites
- 22. SPServices - FYIUse internal field names Returned values have “ows_” in front of field names$(this).attr("ows_Title");Lookup & People fieldsValue returned as “ID;#Value” (1;#Field Value)Check for new item ID on item add to make sure item added correctlyvarnewID = $(xData.responseXML).find("[nodeName=z:row]").attr("ows_ID");
- 23. Development TipsDevelop for performanceLimit rows returned using CAMLAvoid 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");
- 24. Writing jQueryPick whatever editor makes you happy…Visual StudioI don’t use it, so can’t speak to itAptana (actual JavaScript IDE)Gives you some intellisenseNotePad++Good bracket matching which tends to bite you in the butt
- 25. Debugging… ugh.. It ain’t prettyAlerts.. Alerts.. Alerts.. Alerts…Developer ToolsSet breakpointsEvaluate expressions and variables inline (like REAL debugging!)Firebug for Firefox Considered to be best of the free tools out thereIE Developer Tools Comes installed on IE 8+
- 26. Debugging… Common ErrorsUsually it means your library didn’t get loadedObject ExpectedObject doesn’t support methodMake sure you don’t load scripts more than onceNull Object referenceCheck your bracesMake sure you end lines with “;”Check for missing quotesWhen all else fails, delete your script and rebuild it slowly in chunks, testing as you go.
- 27. DEMOS
- 28. How to get it…jQueryhttp://jquery.com/SPServiceshttp://spservices.codeplex.comSuper Awesome 3rd party libraries that integrate wellModal dialogs - http://www.ericmmartin.com/projects/simplemodal/Calendar - http://arshaw.com/fullcalendar/Charts - http://g.raphaeljs.com/
- 29. More jQuery ResourcesjQuery Pocket Referencehttp://oreilly.com/catalog/0636920016182CSS Pocket Referncehttp://oreilly.com/catalog/9780596515058/