This document provides an overview and introduction to using jQuery with SharePoint. It discusses what jQuery is and why it is useful for SharePoint development. It covers basics of jQuery and SharePoint integration including deployment options, development best practices, interacting with forms, and reading list items using both SPServices and the Client Side Object Model. The document includes code examples and discusses using third party libraries and debugging techniques. It concludes with demonstrations of basic jQuery techniques, reading list items, searching the DOM, and integrating Bing Maps.

1. THE SHAREPOINT AND
JQUERY GUIDE
SharePoint Saturday Twin Cities
May 18th, 2013
Mark Rackley
mark.rackley@summit7systems.com

2. » Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management along with
companies such as Microsoft, Oracle and IBM.
» Summit 7 Systems was named to the 2011 and 2012 CRN Next-Gen 250 List as a company bringing innovative processes, methodologies and
models to the solution provider industry.
» Top 1% of Microsoft Partners Worldwide
» Summit 7 Systems was named #6 on the 2012 CRN Fast Growth 100 based on our 2009 – 2011 growth of over 930% per year.
» ~ 50% of Technical Staff hold US Government SECRET Clearances.
» Service Disabled Veteran Owned Small Business (SDVOSB).
Summit 7 systems is a premier provider of consulting and implementation services specializing on the
Microsoft SharePoint Platform and FAST Enterprise Search.
» Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management along with
companies such as Microsoft, Oracle and IBM.
» Summit 7 Systems was named to the 2011 and 2012 CRN Next-Gen 250 List as a company bringing innovative processes, methodologies and
models to the solution provider industry.
» Top 1% of Microsoft Partners Worldwide
» Summit 7 Systems was named #6 on the 2012 CRN Fast Growth 100 based on our 2009 – 2011 growth of over 930% per year.
» ~ 50% of Technical Staff hold US Government SECRET Clearances.
» Service Disabled Veteran Owned Small Business (SDVOSB).

3. SERVICES
SharePoint QuickStart
Information Architecture and Governance Development
Upgrade and Migration
Branding and Design (User Experience)
Web Content Management Design and Deployment
SharePoint Search
Custom Workflow or Web Part Development
InfoPath Forms and Workflows
Performance Baselines and Best Practices Optimization
Mapping Business Process to Software Platforms
Cloud Services Design and Provisioning
Remote Support Contracts
Compliance Quickstart
SOFTWARE PLATFORMS
FAST Enterprise Search
SharePoint 2007
SharePoint 2010
SharePoint 2013
Office Platform
Sitecore
SOLUTION AREAS
SharePoint Platform Solutions
Enterprise Search
Enterprise Content Management
Internet / Web Content Management
Extranet Solutions
Intranet Solutions
Business Process Management
Enterprise Project Management
Exchange Server
SERVICES
SharePoint QuickStart
Information Architecture and Governance Development
Upgrade and Migration
Branding and Design (User Experience)
Web Content Management Design and Deployment
SharePoint Search
Custom Workflow or Web Part Development
InfoPath Forms and Workflows
Performance Baselines and Best Practices Optimization
Mapping Business Process to Software Platforms
Cloud Services Design and Provisioning
Remote Support Contracts
Compliance Quickstart
SOFTWARE PLATFORMS
FAST Enterprise Search
SharePoint 2007
SharePoint 2010
SharePoint 2013
Office Platform
Sitecore
SOLUTION AREAS
SharePoint Platform Solutions
Enterprise Search
Enterprise Content Management
Internet / Web Content Management
Extranet Solutions
Intranet Solutions
Business Process Management
Enterprise Project Management
Exchange Server

4. • 18+ years software architecture and
development experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, Writer, Speaker
• Bacon aficionado
MARK RACKLEY / SOLUTIONS ARCHITECT
@mrackley http://www.sharepointhillbilly.com

5. AGENDA
• What is jQuery? Why SharePoint & jQuery?
• SharePoint and jQuery Basics
• Deploying / Maintaining
• Development Basics
• Third Party Libraries
• Examples & Demos
The SharePoint & jQuery Guide
http://bit.ly/jQueryAndSP

6. WHAT IS JQUERY?
• JavaScript Utility Library
• jQuery() or $()
• Allows interaction and manipulation of the DOM after
page is rendered
• Can interact with other systems using Web Services
• Supported by Microsoft
• Part of “Client Side” Development

7. WHY SHAREPOINT & JQUERY?
• Fewer upgrade/deployment issues
• Rapid deployment and modifications
• Less “customization”
• Improved visuals
• Improved usability

8. WHY SHAREPOINT & JQUERY?
• Can replace the need for Visual Studio
• Can replace the need for basic workflows
• No points (shhhh… don’t tell the admins)
• Can get around list view threshold

9. JQUERY & SHAREPOINT BASICS
• Scripts execute with same privileges as current user
• Permissions cannot be elevated
• Interact with SharePoint List data using Client Side Object
Model (CSOM) or SPServices
• View the DOM not the Page Source

10. WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many optionsvar car = {
color: “red”,
make: “Jeep”,
model: “wrangler”
}
var car = {};
car.color = “red”;
car.make = “Jeep”;
car.model=“wranger”;
var car = {};
car*“color”+ = “red”;
car*“make”+ = “Jeep”;
car*“model”+ =“wranger”;

11. WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many options
• Debugging is painful
• Performance can suffer
• Inconsistent results on different browsers
• Constant changes in the jQuery library
• It CAN harm your farm!

12. 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?

13. 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

14. DEPLOYMENT AND REFERENCE OPTIONS
• Deployment Options
• Document Library
• File System
• Content Delivery Network (CDN)
• Reference Options
• ScriptLink
• Content Editor Web Part
• Custom Action (deploys to Site Collection)

15. DOCUMENT LIBRARY

16. CUSTOM ACTION
<?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>

17. DEVELOPMENT & DEBUGGING
• Development
• Visual Studio
• Web Essentials
• TypeScript
• SharePoint Designer
• Notepad++
• Debugging
• IE Developer Tools / Firebug
• Fiddler
• Alerts… alerts… alerts…
• Avoid Console.log
• Write scripts in small manageable chunks

18. 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

19. 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

20. 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/
• InfoPath Forms Alternative – http://forms7.codeplex.com

21. BASICS / INTERACTING WITH
FORMS

22. BASICS
Method Description
$(document).ready(function($){}) Where code execution begins after page is loaded
$(“#ElementID”) Returns element with given id
$(“element.class”) Returns all elements of a particular class
$(“div.myClass”)
$(“Type*attrib=‘value’+”) Gets element of specific type and attribute value $(“input*Title=‘First
Name’+”)
.show(), .hide(), .toggle() Shows, hides, toggles
.html() Gets the raw html for an element with tags
.text() Contents of an element with HTML tags stripped out

23. 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');
<input
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00
$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255"
id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl
04_ctl00_ctl00_TextField" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
$(“input[title=‘E-mail Address’+”); //returns element
$(“input”).each(function(),
$(this).attr(“title”); // gets the value of the title attribute for all inputs
});

24. DEMO 1: BASICS / INTERACTING
WITH FORMS

25. READ LIST ITEMS WITH
SPSERVICES

26. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
LoadSpeakers();
});
</script>
<table id='speakerTable'><tr><th>Picture</th><th>Name</th><th>Blog</th></tr></table>

27. <script type="text/javascript">
function LoadSpeakers(){
var listTitle = "Speakers";
var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'>0</Value></Neq></Where></Query>";
var camlViewFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Blog' /><FieldRef Name='Picture' /></ViewFields>";
$().SPServices({
operation: "GetListItems",
async: true,
listName: listTitle,
CAMLViewFields: camlViewFields,
CAMLQuery: query,
completefunc: function(xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var speakerName = ($(this).attr("ows_Title"));
var picture = $(this).attr("ows_Picture").split(",")[0];
var blog = $(this).attr("ows_Blog").split(",")[0];
$("#speakerTable").append("<tr><td><img width='50' src='"+ picture +"'></td><td>"+speakerName +"</td><td>"+blog +"</td></tr>");
}); // end completefunc
}
}); // end SPS
}
</script>
SPSERVICES READ LIST ITEMS

28. DEMO 2: READ LIST ITEMS WITH
SPSERVICES

29. READ LIST ITEMS WITH CLIENT
SIDE OBJECT MODEL

30. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(LoadSpeakers, "sp.js");
</script>
<table id='speakerTable'><tr><th>Picture</th><th>Name</th><th>Blog</th></tr></table>

31. <script type="text/javascript">
function LoadSpeakers() {
var listTitle = "Speakers";
context = SP.ClientContext.get_current();
var speakerList = context.get_web().get_lists().getByTitle(listTitle);
var camlQuery = SP.CamlQuery.createAllItemsQuery();
this.listItems = speakerList.getItems(camlQuery);
context.load(listItems);
context.executeQueryAsync(ReadListItemSucceeded, ReadListItemFailed);
}
function ReadListItemSucceeded(sender, args) {
var enumerator = listItems.getEnumerator();
while (enumerator.moveNext()) {
var listItem = enumerator.get_current();
var blog = listItem.get_item('Blog').get_url();
var speakerName = listItem.get_item('Title');
var picture = listItem.get_item('Picture').get_url();
$("#speakerTable").append("<tr><td><img width='50' src='"+ picture +"'></td><td>"+speakerName +"</td><td>"+blog +"</td></tr>");
}
}
function ReadListItemFailed(sender, args) {
alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}
</script>
CLIENT SIDE OBJECT MODEL READ LIST ITEMS

32. DEMO 3: READ LIST ITEMS WITH
CLIENT SIDE OBJECT MODEL

33. SEARCHING THE DOCUMENT
OBJECT MODEL

34. SEARCHING DOM
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:
$("nobr b:contains('Sum= ')").html().split("= ")[1].replace(",","")

35. DEMO 4: SEARCHING THE
DOCUMENT OBJECT MODEL
Tabbed Web Parts in SharePoint 2013 / Office 365
http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42

36. DEMO 5: BING MAP DEMO
Integrating SharePoint and Bing Maps
http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=19

37. CREATING CUSTOM FORMS
Forms7 – An InfoPath Forms Alternative
https://forms7.codeplex.com/

38. MORE DEMOS

39. Special thanks to our sponsors…

40. summit7systems
summit7systems.com/blogs
FOR MORE FROM SUMMIT 7 SYSTEMS…
facebook.com/summit7systems
@summit7systems
summit 7 systems