SPSDenver - SharePoint & jQuery - What I wish I would have known
2 likes1,367 views
This document provides an overview of using jQuery with SharePoint. It discusses how jQuery can be used to resolve common SharePoint issues without extensive coding. Key points include how jQuery makes applications more usable, common myths about jQuery, deployment options, best practices for maintenance and upgrades, and how to interact with SharePoint lists and libraries using jQuery and the SPServices library. The document concludes with code examples and tips for debugging jQuery in SharePoint.
![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’);](https://image.slidesharecdn.com/spsdenver-jquery-branded-111204154659-phpapp02/85/SPSDenver-SharePoint-jQuery-What-I-wish-I-would-have-known-25-320.jpg)
![SharePoint Form Fields
//Text / Date Fields
$(“input[title=’Field Display Name’]”).val();
//LookUp / Choice Fields (be aware of >20 items in Lookup)
$(“select[title=’Field Display Name’]”).val();
//Is my check box checked?
if( $("input[title=’Field Display Name’]").is(':checked'))
{
alert("it's checked");
}
More information:
http://bit.ly/jQueryAndSharePointFields](https://image.slidesharecdn.com/spsdenver-jquery-branded-111204154659-phpapp02/85/SPSDenver-SharePoint-jQuery-What-I-wish-I-would-have-known-27-320.jpg)
![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
var newID =
$(xData.responseXML).find("[nodeName=z:row]").attr("ows_ID");](https://image.slidesharecdn.com/spsdenver-jquery-branded-111204154659-phpapp02/85/SPSDenver-SharePoint-jQuery-What-I-wish-I-would-have-known-30-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to SPSDenver - SharePoint & jQuery - What I wish I would have known (20)
Ad
More from Mark Rackley (8)
Recently uploaded (20)
SPSDenver - SharePoint & jQuery - What I wish I would have known
- 1. SharePoint & jQuery – What I Wish I Would Have Known When I Started… Mark Rackley – Solutions Architect / SharePoint Practice Lead / Developer Email: [email protected] 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 • 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, XML • A development background – 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 common SharePoint complaints without having to crack open Visual Studio
- 6. SharePoint & jQuery? Why? “It looks like SharePoint”
- 7. SharePoint & jQuery? Why? “That’s SharePoint?”
- 8. SharePoint & jQuery? Why? “I’m so sorry… SharePoint can’t do that out of the box”
- 9. SharePoint & jQuery? Why? “Sure, no problem”
- 10. 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”
- 11. jQuery makes your SharePoint applications USABLE
- 12. 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…
- 13. Yeah but… • I can’t interact with SharePoint Lists and Libraries without screen scraping You can call Web Services with JavaScript (SPServices is a wonderful jQuery library that wraps SharePoints Web Service calls) and the Client Object Model in 2010 • It has no real use in my environment because of “x” Quickly prototype and tweak web parts before writing in Visual Studio. In fact, in some environments it is the only development option.
- 14. So… jQuery MUST be…
- 15. 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 jQuery like… – Timer Jobs – Workflows (although it can eliminate the need for some) – Event Handlers – Elevate Privliges – Easily interact with all business systems • jQuery CAN harm your farm!
- 17. Deployment options • Folders in SPD / Visual Studio Module • File System – Deployed with a WSP (don’t think of manually copying) – Not an option for Office 365 or hosted SharePoint 2010 • External Reference – Microsoft Ajax Content Delivery Network (CDN) http://www.asp.net/ajaxlibrary/cdn.ashx
- 18. Deployment options • Document Library – Easily modify scripts – Keep track of changes with Metadata – Recover from screw ups with Versioning – Less control, more flexibility versus other options
- 20. Reference Options • ScriptLink • MasterPages, Delegate Controls, Web Parts, Controls, Custom Pages • Ensures Script is not loaded multiple times • Renders in the correct place in the markup • Need Visual Studio or SPD • More upfront work • Content Editor Web Part (CEWP) • Quick & Easy • Don’t have to deploy anything • Adds CEWP overhead
- 21. Reference Options • Custom Action • Loads Script on every page • Works in sandbox <?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction ScriptSrc="~sitecollection/SiteAssets/jquery.min.js" Location="ScriptLink" Sequence="100" > </CustomAction> </Elements>
- 22. Maintenance Best Practice • Don’t add script directly in your Master Pages – Difficult to maintain – Must make modifications in SPD / Visual Studio – Use Custom Action instead • Don’t add scripts directly in your CEWP – Using content link instead of editing the CEWP source. – No reuse
- 23. 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 (ribbon, modal pop-ups)
- 24. jQuery is another tool for the SharePoint Developer’s toolkit Understand the limitations Use it wisely
- 25. 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’);
- 26. 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()
- 27. SharePoint Form Fields //Text / Date Fields $(“input[title=’Field Display Name’]”).val(); //LookUp / Choice Fields (be aware of >20 items in Lookup) $(“select[title=’Field Display Name’]”).val(); //Is my check box checked? if( $("input[title=’Field Display Name’]").is(':checked')) { alert("it's checked"); } More information: http://bit.ly/jQueryAndSharePointFields
- 28. 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 - Create cascading drop down lists - Get user groups and permissions - Potentially call ANY SharePoint Web Service
- 29. SPServices • Works identical in SharePoint 2007 and SharePoint 2010 • Runs with permissions of current user • Communicate across sites • Works with Anonymous access!
- 30. 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 var newID = $(xData.responseXML).find("[nodeName=z:row]").attr("ows_ID");
- 33. 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();
- 34. Don’t abuse the DOM! It’s expensive to search the Document Object Model (DOM) <select id=“MySelect”></select> for (i=0;i<=500;i++) { $("#MySelect").append("<option>One Item " + i + "</option>"); } ___________________________________________________________________________________________________________________ var options = “”; for (i=0;i<=500;i++) { options += "<option>All Items " + i + "</option>"; } $("#MySelect").append(options);
- 35. 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)
- 36. 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.
- 37. DEMOS
- 38. So, what’s the deal?
- 39. ”Fast Food” Development • You don’t have to be a SharePoint Guru • It’s Cheap • It’s Quick • It’s Easy • It gets the job done
- 40. ”Fast Food” Development • Don’t abuse it, You’ll pay for it later • Limited choices • There are healthier options • Adds page bloat • Can slow your performance
- 41. 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/
- 42. More jQuery Resources • jQuery Pocket Reference – http://oreilly.com/catalog/0636920016182 • CSS Pocket Refernce – http://oreilly.com/catalog/9780596515058/
- 43. Questions? Don’t drink the haterade… Mark Rackley [email protected] www.twitter.com/mrackley www.sharepointhillbilly.com 43