Overview of jQuery in SharePoint along with some commonly used methods

1. SharePoint Saturday New Hampshire
The SharePoint & jQuery Guide
Mark.Rackley@capSpire.com
October, Twenty Fourteen

2. Was made possible by the generous
support of the following sponsors…
And by your participation… Thank you!

3. Join us for the raffle & SharePint following the
last session
Be sure to fill out your eval form &
turn in at the end of the day for a
ticket to the BIG raffle!

4. Mark Rackley / Principal Consultant
• 20 years software architecture
and development experience
• SharePoint Junkie since 2007
• Event Organizer
(SharePointalooza.org)
• 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

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)
• 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

14. Deployment Options
• Document Library
<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
• File System
<script type="text/javascript" src="/_layouts/scripts/jquery.min.js"></script>
• Content Delivery Network (CDN)
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

15. Document Library

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

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

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

20. jQuery Methods Commonly Used in
SharePoint

21. jQuery Basics
<script type="text/javascript">
$(document).ready(function($){
//this script executes after the page is loaded
//if you need to interact with the DOM put script here
})
//Script placed here would execute before the page is finished loading.
</script>

22. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

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

37. Interacting with SharePoint Forms
<input
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Tex
tField" type="text" maxlength="255"
id="ctl00_m_g_a12c0b73_a12c0b73_06fa_06fa_4552_4552_a5af_a5af_b5d5fce55384_b5d5fce55384_ctl00_ctl00_ctl05_ctl05_ctl03_ctl03_ctl00_ctl00_ctl00_ctl00_ctl04_ctl04_ctl00_ctl00_ctl00_ctl00_TextFie
TextFi
ld" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
<input
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Tex
tField" type="text" maxlength="255"
id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextFie
ld" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
eld" title="E-mail Address" class=“ms-long ms-spellcheck-true" />`
<input
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Tex
tField" type="text" maxlength="255"
id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextFie
ld" title="E-mail Address Required Field" class=“ms-long ms-spellcheck-true" />
$(“input[title=‘E-mail Address’]”); //returns element
$(“input[title=‘E-mail Address Required Field’]”); //returns element

38. September, Twenty Fourteen