SEF2013 - A jQuery Primer for SharePoint

A jQuery Primer for SharePoint
Marc D Anderson

Who Is Marc?
• Co-Founder and President of Sympraxis Consulting LLC,
located in the Boston suburb of Newton, MA, USA.
Sympraxis focuses on enabling collaboration throughout the
enterprise using the SharePoint application platform.
• More than 30 years of experience in technology professional services and software
development. Over a wide-ranging career in consulting as well as line manager
positions, Marc has proven himself as a problem solver and leader who can solve
difficult technology problems for organizations across a wide variety of industries
and organization sizes.
• Three-time awardee of the Microsoft MVP award for SharePoint Server (2011,
2012, 2013).

Getting Started
• Add references to the jQuery library
• References can be in:
– Master page
– Page layout
– Individual aspx pages
• jQuery and other .js files can be stored in:
– Document Library
– _layouts folder
– Retrieved from a CDN
• Use “protocol-less” src and href

Script from CDNs
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
Note the protocol-less
references

HTML Elements
Powered by <a href="http://office365.com">Office365</a>.
Opening tag Closing tag
Attribute Value
<input id="my-cbox" class="foo bar" type="checkbox" checked />
Element Self-closing tag
Id Attribute PropertyValueClass(es)

What is the Document Object Model
(DOM)?
• The DOM starts as the page’s markup (HTML) as
delivered to the browser by the server: View Source
• Styled by the CSS which gives the page its look and feel
• The DOM is acted upon by any script in the page
• View Source is *not* the live DOM

What Can We Do With the DOM?
• Add or remove CSS classes
• Create new or remove existing HTML elements
• Change HTML element attributes
• Bind to events
• And so much more…
The DOM is HTML, which is XML, which is data!

The Basic Idea of jQuery
$(".article").hide();
Select something
Do something!
Remember this from CSS?

jQuery’s Document Ready
$(document).ready(function() {
// do something
});
$(function() {
// do something
});
jQuery(function($) {
// do something
});

jQuery Documentation:
Your Friend
• The jQuery documentation is used to be
arranged to help you
• What you need to know is was arranged
sequentially from top to bottom

jQuery Selectors
• Selectors are the most important
jQuery concept
• Selecting the right DOM object(s)
is half the battle
• Selectors return a jQuery object
containing a collection of DOM
objects: 1 to n matching elements

Selectors for SharePoint
$("div[id$='QuickLaunchNavigationManager']
li:first span.menu-item-text")

Selectors for SharePoint
$("td.ms-list-addnew a:eq(1)")

Useful jQuery Selector Tricks
$("[id='foo']"); // Equal to
$("[id!='foo']"); // Not equal to
$("[id^='foo']"); // Starts with
$("[id$='foo']"); // Ends with
$("[id*='foo']"); // Contains
$("[id~='foo']"); // Contains word
$("[id|='foo']"); // Contains prefix
$("[id]"); // Has attribute
$("[id][class][style]"); // Has all
•.NET Applications like
SharePoint generate some long
and ugly markup and IDs
id="ctl00$ctl41$g_26ee1140_76aa_4ec0_8
8c4_11e7e96480f4$ctl00$ctl02$ctl00$ctl
01$ctl00$ContentTypeChoice"
•These selector tricks really help

jQuery Attributes
• Once you’ve selected the right DOM element, you can
use jQuery to get or set its attributes
• As of jQuery 1.6:
– the .prop() method provides a way to explicitly get/set
property values (checked, selected, or disabled)
– .attr() gets/sets attribute values (class, style, etc.)

Example with SharePoint Attributes: Get
$("select[title='Region']").val();
$("select[title='Region'] option:selected").text();

Example with SharePoint Attributes: Set
$("select[title='Region']").val(5);
$("select[title='Region'] option:selected").text("boo");

Traversing
• Traversing lets you move around the
DOM based on your initial selection
• This is how you get at elements which
are difficult to select directly
• Ancestry matters in XML / HTML

Traversing Down:
Find an Element’s Specific Children
$("div[id$='QuickLaunchNavigationManager'] li:first")
.parent().find("li:eq(3) li:first .menu-item-text");

Traversal Example from SPServices
var possibleValues = $("select[ID$='SelectCandidate'][Title^='" +
opt.multiSelectColumn + " ']");
var selectedValues =
possibleValues.closest("span").find("select[ID$='SelectResult'][Title^='" +
opt.multiSelectColumn + " ']");
SelectCandidate SelectResult
<select
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe804
787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl
00$ctl00$SelectResult" title="City selected
values"
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe80478
7763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00
_ctl00_SelectResult" style="width: 162px;"
onkeydown="GipHandleHScroll(event)"
ondblclick="GipRemoveSelectedItems(ctl00_m_g_e
845e690_00da_428f_afbd_fbe804787763_ctl00_ctl0
4_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo
kupPicker_m); return false"
onchange="GipSelectResultItems(ctl00_m_g_e845e
690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ct
l07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupP
icker_m);" size="20" multiple="">
<select
name="ctl00$m$g_e845e690_00da_428f_afbd_fbe8
04787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04
$ctl00$ctl00$SelectCandidate" title="City
possible values"
id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804
787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_c
tl00_ctl00_SelectCandidate" style="width:
162px;" onkeydown="GipHandleHScroll(event)"
ondblclick="GipAddSelectedItems(ctl00_m_g_e8
45e690_00da_428f_afbd_fbe804787763_ctl00_ctl
04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_Multi
LookupPicker_m); return false"
onchange="GipSelectCandidateItems(ctl00_m_g_
e845e690_00da_428f_afbd_fbe804787763_ctl00_c
tl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_Mul
tiLookupPicker_m);" size="350" multiple="">

Manipulation
• Once you’ve gotten the right
element(s), you can:
– Manipulate their attributes
– Set properties
– Change their contents (e.g.,
innerHTML)

Events
• jQuery’s events enable you to work
with all of the standard JavaScript
events, plus create your own
• Used to create behaviors that take
effect when the user interacts with
the page in the browser, and to
further manipulate those behaviors

jQuery Events
$(".article").click(function(){
// do something
});
$(".article").mouseover(function(){
// do something
});

jQuery Events
$("h3.ms-WPTitle").click(function() {
alert("Go directly to the list.");
});
$("h3.ms-WPTitle").hover(function() {
$(this).css("background-color", "fuchsia");
$(this).data("title", $(this).html());
$(this).html("Click to visit");
},function() {
$(this).css("background-color", "white");
$(this).html($(this).data("title"));
});

Effects
• jQuery gives you a set of effects you can
use to change the elements in the page
• Effects can be:
– Visual: Change how the user sees existing
elements with animations
– Manipulative: Change where and how
elements are shown by moving them around
in the DOM

jQuery Effects Examples
$(".article").hide();
$(".article").slideUp();
$(".article").fadeOut("slow");
$(".article").animate({
"font-size": "24px",
"background-color": "red"
}, 5000);

Putting It Together:
Toggling Web Part Visibility
var wpTitles = $("h3.ms-WPTitle");
// Remove the links on the Web Part Titles
wpTitles.find("nobr").unwrap("<a></a>");
// Show the pointer on mouseover
wpTitles.css("cursor", "pointer");
// Add click behavior that toggles the visibility
wpTitles.click(function() {
$(this).closest("table").closest("tr").next().slideToggle();
});

Putting It Together:
Arranging Checkboxes
// Collect all of the choices
$(thisFormField).find("tr").each(function() {
columnOptions.push($(this).html());
});
out = "<TR>";
// Add all of the options to the out string
for(i=0; i < columnOptions.length; i++) {
out += columnOptions[i];
// If we've already got perRow columnOptions in the row,
// close off the row
if((i+1) % opt.perRow === 0) {
out += "</TR><TR>";
}
}
out += "</TR>";
// Remove the existing rows...
$(thisFormField).find("tr").remove();
// ...and append the out string
$(thisFormField).find("table").append(out);

jQueryUI Takes Effects Further
$(".article").tabs();
$("input").autocomplete();
$("#infoBox").dialog();
$("table.sortable").sortable();
…and many more

jQuery Plugins Abound!
• If you want to do something sophisticated,
look for an existing plugin
• Due diligence – some of the plugins aren’t
written very well
• Beware of “plugin sprawl”

More Useful Tools
• JSLint
– http://jslint.com/
– Checks your script against accepted standards
– “Warning: JSLint will hurt your feelings.”
• JSHint
– http://jshint.com/
– Like JSLint, but a little more forgiving
– More jQuery aware
• JavaScript Compressorator
– http://compressorrater.thruhere.net/
– Minifies script files using multiple methods

Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.com
Books http://sympmarc.com/books
The Middle Tier Manifesto http://bit.ly/middletier

SEF2013 - A jQuery Primer for SharePoint

Related slideshows

More Related Content

SEF2013 - A jQuery Primer for SharePoint