SharePoint and jQuery Essentials


Published on

Overview of using jQuery in SharePoint

SharePoint and jQuery Essentials

  1. 1. SharePoint & jQuery Essentials SharePoint Saturday St. Louis January 12th, 2013 Mark Rackley
  2. 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. 3. Thanks to Our Sponsors! 3 | SharePoint Saturday St. Louis 2012
  4. 4. About Mark Rackley• Solutions Architect & Developer at Summit 7 Systems• 17+ years software architecture and development experience• Blogger, Writer, Speaker•• @mrackley•
  5. 5. Agenda• SharePoint & jQuery’s history• jQuery Overview• When to use jQuery / When not to• Deployment & Maintenance• Development Basics• Using Third Party Libraries The SharePoint & jQuery Guide
  6. 6. SharePoint & jQuery’s Courtship• What is jQuery? – JavaScript utility library supported by Microsoft – Allows you to interact with a page AFTER it is rendered using the DOM• What’s the history? – Snubbed in SharePoint 2007 – Tolerated in SharePoint 2010 – Embraced in SharePoint 2013 – It’s the future
  7. 7. jQuery Overview• What skills do you need? – JavaScript – CSS, XML, JSON – 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
  8. 8. Crappy Abstruse Markup Language<Query><Where> <And> <Geq><FieldRef Name="StartDate" /><ValueIncludeTimeValue="TRUE"Type="DateTime">+startDate+</Value></Geq> <Leq><FieldRef Name="EndDate" /><ValueIncludeTimeValue="TRUE"Type="DateTime">+endDate+</Value></Leq> </And></Where></Query>,
  9. 9. SharePoint & jQuery? Why?• Fewer upgrade/deployment issues• Less “customization”• Improved visuals• Improved usability• Rapid deployment and modifications
  10. 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… don’t tell the admins)• Can get around list view threshold
  11. 11. jQuery makes your SharePointapplications USABLE and allows you toget your work done NOW
  12. 12. jQuery Overview• Busting jQuery Mtyhs – It’s not secure • BUSTED – It uses SharePoint’s security – Scripts execute with privileges of current user – It doesn’t perform well • BUSTED – Reduce page loads – Delay data queries – You can’t elevate privileges • CONFIRMED – Thank God
  13. 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. 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. 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. 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 (don’t think of manually copying) • Not an option for Office 365 or hosted SharePoint 2010 – Content Delivery Network (CDN)
  17. 17. Document Library
  18. 18. Reference Options<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script> • 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
  19. 19. Reference Options• Custom Action • Loads Script for entire Site Collection • Works in sandbox<?xml version="1.0" encoding="utf-8"?><Elements xmlns=""> <CustomAction ScriptSrc="~sitecollection/SiteAssets/jquery.min.js" Location="ScriptLink" Sequence="100" > </CustomAction></Elements>
  20. 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. 21. jQuery Overview - JavaScript“Objects”var 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. 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”)<input Returns all elements of a particular class $(“div.myClass”)name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" attribute value $(“input*Title=‘First $(“Type*attrib=‘value’+”) Gets element of specific type and Name’+”)id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl0 .show(), .hide(), .toggle() Shows, hides, toggles4_ctl00_ctl00_TextField" title="E-mail Address" class=“ms-long ms-spellcheck-true" /> .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. 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. 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
  25. 25. Interacting WithSharePoint List DataWhen to Choose SPServices vs. the Client Object Model
  26. 26. CSOM vs. SPServicesFunctionality CSOM SPServicesSharePoint 2007 No YesSharePoint 2010/2013 Yes YesAnonymous Access No YesCross Site / Cross Domain Access No Yes
  27. 27. How About Some Best Practices?• Use the Element’s 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. 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. 29. Using Third Party Libraries• Some of my favorites – Content Slider - a-jquery-plugin/ – Formatted Tables - – Modal Window - – SPServices - – Calendar -
  31. 31. So, what’s the deal?
  32. 32. ”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
  33. 33. ”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
  34. 34. Questions? Don’t drink the haterade…Mark