1. SharePoint & jQuery Essentials SharePoint Saturday St. Louis January 12th, 2013 Mark Rackley mark.rackley@summit7systems.com

2. Housekeeping Please remember to submit your session evaluation for each session you attend Follow SharePoint Saturday St. Louis on Twitter @spsstl and hashtag #spsstl 2 | SharePoint Saturday St. Louis 2012

3. Thanks to Our Sponsors! 3 | SharePoint Saturday St. Louis 2012

4. About Mark Rackley Solutions Architect & Developer at Summit 7 Systems 17+ years software architecture and development experience Blogger, Writer, Speaker mark.rackley@summit7systems.com @mrackley http://sharepointhillbilly.com

5. Agenda SharePoint & jQuerys history jQuery Overview When to use jQuery / When not to Deployment & Maintenance Development Basics Using Third Party Libraries The SharePoint & jQuery Guide http://bit.ly/jQueryAndSP

6. SharePoint & jQuerys Courtship What is jQuery? JavaScript utility library supported by Microsoft Allows you to interact with a page AFTER it is rendered using the DOM Whats the history? Snubbed in SharePoint 2007 Tolerated in SharePoint 2010 Embraced in SharePoint 2013 Its the future

7. jQuery Overview What skills do you need? JavaScript CSS, XML, JSON A development background It IS code Uses development constructs If you cant 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

8. Crappy Abstruse Markup Language+startDate++endDate+,

9. SharePoint & jQuery? Why? Fewer upgrade/deployment issues Less customization Improved visuals Improved usability Rapid deployment and modifications

10. SharePoint & jQuery? Why? Can replace the need for Visual Studio for some web parts Can replace the need for basic workflows No points (shhhh dont tell the admins) Can get around list view threshold

11. jQuery makes your SharePointapplications USABLE and allows you toget your work done NOW

12. jQuery Overview Busting jQuery Mtyhs Its not secure BUSTED It uses SharePoints security Scripts execute with privileges of current user It doesnt perform well BUSTED Reduce page loads Delay data queries You cant elevate privileges CONFIRMED Thank God

13. jQuery Overview Why I hate jQuery (some days) Too many options Debugging It can perform horribly Inconsistent results Changes in the jQuery library It CAN harm your farm!

14. When should you use jQuery Tightly controlled environments Visuals or Usability are high priorities Tight timeframes Simple page and form modifications Dynamic drop downs Hiding page elements Reading / populating fields Why would you NOT use jQuery?

15. When should you question the use ofjQuery? Need pull a lot of data over the wire to work with Iterating over many rows of list data Extended business logic or proprietary business logic Privileges need to be elevated Need to support many different browsers

16. Deployment Deployment Options Document Library Easily modify scripts Keep track of changes with Metadata Recover from screw ups with Versioning File System Deployed with a WSP (dont think of manually copying) Not an option for Office 365 or hosted SharePoint 2010 Content Delivery Network (CDN)

17. Document Library

18. 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 Dont have to deploy anything Adds CEWP overhead

19. Reference Options Custom Action Loads Script for entire Site Collection Works in sandbox

20. Development Development Tools IDE Visual Studio Notepad++ SharePoint Designer Debugging IE Developer Tools / Chrome Debugger / Firebug Fiddler Alerts lots and lots of alerts Avoid Console.log (or use it wisely)

21. jQuery Overview - JavaScriptObjectsvar car = { var car = {}; color: red, car.color = red; make: Jeep, car.make = Jeep; model: wrangler car.model=wranger;} var car = {}; car*color+ = red; car*make+ = Jeep; car*model+ =wranger;

22. jQuery Overview Common Usage Method Description $(document).ready(function($){}) Where code execution begins after page is loaded $(#ElementID) Returns element with given id $(element.class) .html() Gets the raw html for an element with tags$(input[title=E-mail Address+); Contents of an element with HTML tags stripped out .text() //returns element$(input).each(function(), $(this).attr(title); // gets the value of the title attribute for all inputs});

23. jQuery Overview Common Methods Method Description .split() lookUpFieldValue = 1;#Mark Rackley; Var myArray = numbers.split(;#); myArray*1+ == Mark Rackley .replace() var myString = This string has spaces; var newString = myString.replace(/ /g,); newString == Thisstringhasspaces; .contains() Check to see if a DOM element is within another DOM element .find() Get the child elements of current element, filtered by a selectorChaining:$("#WebPartWPDnn").find("nobr b:contains(Sum = )").html().split(" = ")[1].replace(",","");

24. Interacting with SharePoint FormsGetting/Setting SharePoint Form Fields Text Boxes $(input*title=My Text Field+).val() Selects $(select*title=My Choice+).val(mySelectValue); Checkboxes $("input[title=My Check box]").removeAttr(checked); $("input[title=My Check box]").attr(checked,checked);The SharePoint & jQuery Guide http://bit.ly/jQueryAndSP

25. Interacting WithSharePoint List DataWhen to Choose SPServices vs. the Client Object Modelhttp://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=15

26. CSOM vs. SPServicesFunctionality CSOM SPServicesSharePoint 2007 No YesSharePoint 2010/2013 Yes YesAnonymous Access No YesCross Site / Cross Domain Access No Yes

27. How About Some Best Practices? Use the Elements ID when possible Reduce DOM searches Re-use code / Good coding practices Minimize files Use animations to hide slow performance Delay loading of Selects until you need the data

28. Using Third Party Libraries Tips for selection and integration Look for supported / documented libraries Test in target browsers before implementing Duplicate file structure Test vanilla in SharePoint first

29. Using Third Party Libraries Some of my favorites Content Slider - http://www.awkwardgroup.com/sandbox/awkward-showcase- a-jquery-plugin/ Formatted Tables - http://www.datatables.net/ Modal Window - http://www.ericmmartin.com/projects/simplemodal/ SPServices - http://spservices.codeplex.com/ Calendar - http://arshaw.com/fullcalendar/

30. DEMOS AND NIFTY STUFF

31. So, whats the deal?

32. Fast Food Development You dont have to be a SharePoint Guru Its Cheap Its Quick Its Easy It gets the job done

33. Fast Food Development Dont abuse it, Youll pay for it later Limited choices There are healthier options Adds page bloat Can slow your performance

34. Questions? Dont drink the hateradeMark Rackleymark.rackley@summit7systems.comwww.twitter.com/mrackleywww.sharepointhillbilly.com