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.
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Â
#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 Architect Email: mrackley@gmail.com Blog: http://www.sharepointhillbilly.com Twitter: http://www.twitter.com/mrackley
2. Agenda jQuery Overview jQuery & SharePoint â Whatâs the Point? Deployment, Maintenance, Upgrades SPServices Development & Debugging Examples 2
3. 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)
4. 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
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â
7. 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âŠ
8. 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.
9. 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
10. 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.
11. 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)
12. 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
13. jQuery is another tool for the SharePoint Developerâs toolkitUnderstand the limitationsUse it wisely
14. 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 $(â#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 Basics vardivs = $(â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 REFERENCE http://oreilly.com/catalog/0636920016182
16. 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 + "]]>"
22. 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");
23. 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");
24. Writing jQuery Pick whatever editor makes you happy⊠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
25. 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+
26. 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.
28. 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/