The document discusses using jQuery in SharePoint to improve user interfaces and interactions. It begins with an introduction to jQuery and why it is useful for SharePoint. It then covers jQuery basics like selecting elements, showing/hiding content, and getting/setting values. Additional topics include best practices, using third-party jQuery libraries, and a demonstration of jQuery UI tabs. The presentation aims to explain how jQuery can be used to enhance SharePoint with interactive elements and animated transitions.

1. SPS Omaha Mark Rackley
mrackley@paitgroup.com
Utilizing jQuery in SharePoint: Get More Done Faster

2. © 2015 PAIT Group
Mark Rackley / Partner & CSO
• 20+ years software
architecture and
development experience
• Office 365 MVP, SharePoint
Junkie since 2007
• Event Organizer
(SharePointalooza.org)
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.MarkRackley.net
www.PAITGroup.com
www.SharePointaLooza.org
www.StratusForms.com
#SayNoToInfoPath

3. © 2015 PAIT Group
Agenda
• What is jQuery?
• Why SharePoint & jQuery?
• Deploying / Maintaining
• Development Basics
• Third Party Libraries
• jQuery UI Demo

4. © 2015 PAIT Group
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. © 2015 PAIT Group
Why SharePoint & jQuery?
Turn This…

7. © 2015 PAIT Group
Why SharePoint & jQuery?
Into This…
http://www.markrackley.net/2015/08/16/sharepoint-tabbed-web-partshillbillytabs-3-0/

8. © 2015 PAIT Group
Why SharePoint & jQuery?
And This…

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

10. © 2015 PAIT Group
Why SharePoint & jQuery?

11. © 2015 PAIT Group
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

12. © 2015 PAIT Group
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!)

13. © 2015 PAIT Group
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
• SharePoint Framework???

14. © 2015 PAIT Group
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

15. © 2015 PAIT Group
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>

16. © 2015 PAIT Group
jQuery Basics
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

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

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

19. © 2015 PAIT Group
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();

20. © 2015 PAIT Group
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();

21. © 2015 PAIT Group
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();
});

22. © 2015 PAIT Group
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”);

23. © 2015 PAIT Group
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'))

24. © 2015 PAIT Group
MORE jQuery basics
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

25. © 2015 PAIT Group
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();

26. © 2015 PAIT Group
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();

27. © 2015 PAIT Group
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”

28. © 2015 PAIT Group
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

29. © 2015 PAIT Group
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

30. © 2015 PAIT Group
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/
• Calendar - http://arshaw.com/fullcalendar/
• StratusForms #SayNoToInfoPath – http://www.stratusforms.com
• Draw on a canvas - http://intridea.github.io/sketch.js/
• Responsive tiles - http://masonry.desandro.com/
• Flip w/ 3D animation - https://nnattawat.github.io/flip/

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

32. © 2015 PAIT Group
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.

33. © 2015 PAIT Group
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>

34. jQuery UI Tabs Demo
http://www.markrackley.net/2015/08/16/share
point-tabbed-web-partshillbillytabs-3-0

35. Some More Demos??

36. Thank you
http://www.paitgroup.com
http://www.markrackley.net
mrackley@paitgroup.com
@mrackley
© 2016 PAIT Group http://www.PAITGroup.com December 14,2016