2. Feel free to tweet, post to Yammer and blog during sessions.
Remember to follow @SPSNashville and tag #SPSNashville in your posts!
Gold Sponsors
Silver Sponsors
4. Mark Rackley / Senior Consultant
• 19+ years software
architecture and development
experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.SharePointHillbilly.com
www.MarkRackley.net
www.SharePointaLooza.org
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
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)
• You can get around the ListView Threshold
(but should you??)
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), REST, or
SPServices
10. Why I Hate JavaScript & jQuery (some days)
• Too many options
var 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
16. Reference Options
• ScriptLink
<SharePoint:ScriptLink runat="server" Name="/SiteAssets/jquery.min.js"
Localizable="false"></SharePoint:ScriptLink>
• Content Editor Web Part
• Use the Content Link
• Custom Action
• Feature, Deploys to Site Collection
18. A Word (or two) About MDS
Minimal Download Strategy (MDS)
• New in SharePoint 2013 / enabled by default
• Reduces page load time by sending only the differences when users
navigate to a new page.
• https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspx
• Can cause scripts referenced in Custom Actions and CEWPs to not be
loaded
• Disable feature at site level if MDS is causing issues. Rework scripts based
on recommendations in order to use MDS.
19. Development & Debugging
• Development
• Visual Studio
Web Essentials
• SharePoint Designer
• Notepad++
• Debugging
• IE Developer Tools / Firebug
• Fiddler
• Alerts… alerts… alerts…
• Avoid Console.log
• Write scripts in small manageable chunks
23. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by ID:
$(“#myID”);
24. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by attribute:
$(“div[attribute=‘myAttribute’]”);
25. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve every div on the page
$(“div”).each(function() {
//”this” is the current element in each loop
$(this).method();
});
//Hide all divs on the page
$(“div”).hide();
26. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve every div of a specific class
$(“div.myClass”).each(function() {
//”this” is the current element in each loop
$(this).method();
});
//Hide all divs of a specific class on the page
$(“div.myClass”).hide();
//Hide all elements of a specific class on the page
$(“.myClass”).hide();
27. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the div that contains content “World”
$(“div:contains(‘World’)”).each(function() {
//”this” is the current element in each loop
$(this).method();
});
28. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the formatted HTML for an element
$(“#myID”).html(); //returns <b>Hello World</b>
//Set the formatted HTML for an element
$(“#myID”).html(“<b>Hello Nurse</b>”);
//Retrieve the text with HTML formatting stripped out
$(“#myID”).text(); //returns Hello World
//Set the unformatted text of an element
$(“#myID”).text(“Hello Nurse”);
29. MORE Jquery basics
//get input / select values
$(“#id”).val();
//set input / select values
$(“#id”).val(“value”);
//uncheck a check box
$(“#id").removeAttr('checked');
//check a check box
$(“#id").attr('checked','checked');
//is a check box checked?
if ($(“#id”).is(':checked'))
30. MORE Jquery basics
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
31. MORE Jquery basics
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
//get the row that contains the div “myElement”
$(“#myElement”).closest(“tr”);
//get the cell that contains the div “myElement”
$(“#myElement”).closest(“td”);
Or
$(“#myElement”).parent();
32. MORE Jquery basics
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
//get the div AFTER myElement
$(“#myElement”).next(“div”);
Or
$(“#myElement”).next();
//get the div BEFORE myOtherelement
$(“#myOtherElement”).prev(“div”);
Or
$(“#myOtherElement”).prev();
33. Chaining
//find the input element that has the “title” attribute equal to “Name”
//then find it’s parent cell’s previous cell. Then find the “h3” element and replace the HTML
$("input[title='Name']").closest("td").prev("td").find("h3").html("File Name <font
color='red'>*</font>");
//In English: Find the label for the field “Name” and change it to “File Name” and add a red
astrisk
//find the input element that has the “title” attribute equal to “City”
//then hide the entire row that contains the input
$(“input[title=‘City’]”).closest(“tr”).hide();
//In English: Hide the SharePoint Form Field and label for the field with the Display
//name “City”
34. 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
35. 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
36. Using Third Party Libraries
Some of my favorites
• Content Slider - http://unslider.com
• Formatted Tables - http://www.datatables.net/
• Modal Window - http://www.ericmmartin.com/projects/simplemodal/
• SPServices - http://spservices.codeplex.com/
• Calendar - http://arshaw.com/fullcalendar/
• Forms 7 – http://forms7.codeplex.com
