The document provides an agenda and overview for a SharePoint Saturday session on using SharePoint and jQuery. The session will cover the history of SharePoint and jQuery, an overview of jQuery, best practices for when to use jQuery and how to deploy and develop with it. It will also discuss using jQuery to interact with SharePoint forms and lists, and demonstrate some third party jQuery libraries.

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 & jQuery’s 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 & 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" /><Value
IncludeTimeValue="TRUE"
Type="DateTime">'+startDate+'</Value></Geq>
<Leq><FieldRef Name="EndDate" /><Value
IncludeTimeValue="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 SharePoint
applications USABLE and allows you to
get 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 of
jQuery?
• 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="http://schemas.microsoft.com/sharepoint/">
<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, toggles
4_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 selector
Chaining:
$("#WebPartWPDnn").find("nobr b:contains('Sum = ')").html().split(" = ")[1].replace(",","");

24. Interacting with SharePoint Forms
Getting/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 With
SharePoint List Data
When to Choose SPServices vs. the Client Object Model
http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=15

26. CSOM vs. SPServices
Functionality CSOM SPServices
SharePoint 2007 No Yes
SharePoint 2010/2013 Yes Yes
Anonymous Access No Yes
Cross 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 -
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, 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 Rackley
mark.rackley@summit7systems.com
www.twitter.com/mrackley
www.sharepointhillbilly.com