avaScript, REST, CSOM, Office 365 APIs: Like it or not, ​c​lient-​side development is the future of SharePoint development. At the forefront of this wave is the powerful JavaScript library jQuery. Utilizing jQuery in SharePoint, developers can take their applications to the next level in less time. What's more, you can utilize jQuery in SharePoint 2007, 2010, 2013, and in Office 365 often without making changes to your code. In this class, you gain a new appreciate for jQuery and learn: "What's possible," including visual enhancements and practical business intelligence Tips and Tricks for deploying and maintaining scripts How to get quick wins with little effort using third-party jQuery libraries How to interact with SharePoint forms and lists using JavaScript and jQuery

1. © 2003-2014 PAIT Group
Utilizing jQuery in SharePoint
Get More Done Faster
Mark Rackley
mrackley@paitgroup.com
SPTechCon Dev Days

2. Mark Rackley / Partner & CTO
• 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.PaitGroup.com
www.SharePointaLooza.org
www.StratusForms.com

3. Agenda
• What is jQuery?
• Why SharePoint & jQuery?
• Deploying / Maintaining
• Development Basics
• Third Party Libraries
• jQuery UI Demo
The SharePoint & jQuery Guide
http://bit.ly/jQueryAndSP

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

5. Why SharePoint & jQuery?

6. Why SharePoint & jQuery?
Turn This…

7. Why SharePoint & jQuery?
Into This…
http://www.markrackley.net/2014/11/25/shar
epoint-tabbed-web-partshillbillytabs2-0/

8. Why SharePoint & jQuery?
And This…

9. Why SharePoint & jQuery?
Into This…
http://www.markrackley.net/2013/08/29/easy-custom-
layouts-for-default-sharepoint-forms/

10. Why SharePoint & jQuery?
• Let SharePoint do the heavy lifting!
• Page Modifications
– Remove Clutter
– Improve Flow
– Add business logic to forms
• Call Web Services
– Basic Workflow
• Create/update/delete items based on user choices
– Pull data in from other lists and sites
• Create dashboards
– TONS of free 3rd party libraries
– Graphs, charts, dialogs, animations, etc

11. jQuery & SharePoint Basics
The development process:
• Create a Script
• Add script to a page in SharePoint
• Viola!
Why?
• Works in SharePoint 2007,2010,2013, &
O365
• Great stepping stone to SharePoint Hosted
whatever-they’re-called-today
• No Visual Studio
• No Add-in model
• No Oauth (yay!)

12. jQuery & SharePoint Basics
• Scripts execute with same privileges as current user
• Permissions cannot be elevated
• Interact with SharePoint List data using JavaScript
Client Side Object Model (JSOM), REST, or SPServices
• Deployment options
• Add-In Model
• Sandbox Solutions
• Manual

13. jQuery Methods Commonly Used in SharePoint
• Learn how SharePoint builds a page and how to traverse the DOM
– Show / Hide information
– Get / Set field values
– Bind to events on elements

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

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

16. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by ID:
$(“#myID”);

17. jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by attribute:
$(“div[attribute=‘myAttribute’]”);

18. 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();

19. 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();

20. 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();
});

21. 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”);

22. 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'))

23. MORE jQuery basics
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

24. 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();

25. 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();

26. 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”

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://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/
• Stratus Forms – http://www.stratusforms.com

30. Let’s DO some stuff!!!
I know!! It’s about time? Right?

31. jQueryUI
• http://jqueryui.com/
• jQuery UI is a curated set of user interface interactions, effects,
widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you
just need to add a date picker to a form control, jQuery UI is the
perfect choice.

32. jQueryUI– Basic Usage - Tabs
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 title</a></li>
<li><a href="#tabs-2">Tab 2 title</a></li>
<li><a href="#tabs-3">Tab 3 title</a></li>
</ul>
<div id="tabs-1">
<p>content in tab 1</p>
</div>
<div id="tabs-2">
<p>content in tab 2</p>
</div>
<div id="tabs-3">
<p>content in tab 3</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

33. jQueryUI demo

34. Mark Rackley
mrackley@paitgroup.com
www.markrackley.net
@mrackley