Your SlideShare is downloading. ×
  • Like
SharePoint and jQuery Essentials
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

SharePoint and jQuery Essentials


Overview of using jQuery in SharePoint

Overview of using jQuery in SharePoint

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. SharePoint & jQuery Essentials SharePoint Saturday St. Louis January 12th, 2013 Mark Rackley
  • 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•• @mrackley•
  • 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. 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. 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. 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. 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… don’t 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 – 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. 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 (don’t think of manually copying) • Not an option for Office 365 or hosted SharePoint 2010 – Content Delivery Network (CDN)
  • 17. Document Library
  • 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. 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. 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 - 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. 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. 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
  • 25. Interacting WithSharePoint List DataWhen to Choose SPServices vs. the Client Object Model
  • 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 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. 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 - a-jquery-plugin/ – Formatted Tables - – Modal Window - – SPServices - – Calendar -
  • 31. So, what’s the deal?
  • 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. ”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. Questions? Don’t drink the haterade…Mark