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.
Symp...
What is jQuery?
is
Getting Started
• Add references to the jQuery library
• References can be in:
– Master page
– Page layout
– Individual as...
Script from CDNs
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisited
http://sympmarc.com/2013/02/07/referen...
HTML Elements
Powered by <a href="http://office365.com">Office365</a>.
Opening tag Closing tag
Attribute Value
<input id="...
What is the Document Object Model
(DOM)?
• The DOM starts as the page’s markup (HTML) as
delivered to the browser by the s...
What Can We Do With the DOM?
• Add or remove CSS classes
• Create new or remove existing HTML elements
• Change HTML eleme...
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(funct...
jQuery Documentation:
Your Friend
• The jQuery documentation is used to be
arranged to help you
• What you need to know is...
jQuery Selectors
• Selectors are the most important
jQuery concept
• Selecting the right DOM object(s)
is half the battle
...
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 w...
jQuery Attributes
• Once you’ve selected the right DOM element, you can
use jQuery to get or set its attributes
• As of jQ...
Example with SharePoint Attributes: Get
$("select[title='Region']").val();
$("select[title='Region'] option:selected").tex...
Example with SharePoint Attributes: Set
$("select[title='Region']").val(5);
$("select[title='Region'] option:selected").te...
Traversing
• Traversing lets you move around the
DOM based on your initial selection
• This is how you get at elements whi...
Traversing Down:
Find an Element’s Specific Children
$("div[id$='QuickLaunchNavigationManager'] li:first")
.parent().find(...
Traversal Example from SPServices
var possibleValues = $("select[ID$='SelectCandidate'][Title^='" +
opt.multiSelectColumn ...
Manipulation
• Once you’ve gotten the right
element(s), you can:
– Manipulate their attributes
– Set properties
– Change t...
Events
• jQuery’s events enable you to work
with all of the standard JavaScript
events, plus create your own
• Used to cre...
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(functi...
Effects
• jQuery gives you a set of effects you can
use to change the elements in the page
• Effects can be:
– Visual: Cha...
jQuery Effects Examples
$(".article").hide();
$(".article").slideUp();
$(".article").fadeOut("slow");
$(".article").animat...
Putting It Together:
Toggling Web Part Visibility
var wpTitles = $("h3.ms-WPTitle");
// Remove the links on the Web Part T...
Putting It Together:
Arranging Checkboxes
// Collect all of the choices
$(thisFormField).find("tr").each(function() {
colu...
jQueryUI Takes Effects Further
$(".article").tabs();
$("input").autocomplete();
$("#infoBox").dialog();
$("table.sortable"...
jQuery Plugins Abound!
• If you want to do something sophisticated,
look for an existing plugin
• Due diligence – some of ...
More Useful Tools
• JSLint
– http://jslint.com/
– Checks your script against accepted standards
– “Warning: JSLint will hu...
QUESTIONS?
Contact Information
eMail marc.anderson@sympraxisconsulting.com
Blog http://sympmarc.com
SPServices http://spservices.code...
Upcoming SlideShare
Loading in …5
×

SEF2013 - A jQuery Primer for SharePoint

2,238
-1

Published on

If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover all of the important basics of jQuery in a SharePoint context. By the end of the workshop, you'll be ready to start adding jQuery customizations to your SharePoint pages. We'll cover Selectors, Traversing, Manipulation, Events and Effects as I cover in my article series at SharePoint Magazine.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,238
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
50
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SEF2013 - A jQuery Primer for SharePoint

  1. 1. A jQuery Primer for SharePoint Marc D Anderson
  2. 2. 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).
  3. 3. What is jQuery? is
  4. 4. 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
  5. 5. 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
  6. 6. 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)
  7. 7. 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
  8. 8. 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!
  9. 9. The Basic Idea of jQuery $(".article").hide(); Select something Do something! Remember this from CSS?
  10. 10. jQuery’s Document Ready $(document).ready(function() { // do something }); $(function() { // do something }); jQuery(function($) { // do something });
  11. 11. 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
  12. 12. 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
  13. 13. Selectors for SharePoint $("div[id$='QuickLaunchNavigationManager'] li:first span.menu-item-text")
  14. 14. Selectors for SharePoint $("td.ms-list-addnew a:eq(1)")
  15. 15. 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
  16. 16. 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.)
  17. 17. Example with SharePoint Attributes: Get $("select[title='Region']").val(); $("select[title='Region'] option:selected").text();
  18. 18. Example with SharePoint Attributes: Set $("select[title='Region']").val(5); $("select[title='Region'] option:selected").text("boo");
  19. 19. 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
  20. 20. Traversing Down: Find an Element’s Specific Children $("div[id$='QuickLaunchNavigationManager'] li:first") .parent().find("li:eq(3) li:first .menu-item-text");
  21. 21. 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="">
  22. 22. Manipulation • Once you’ve gotten the right element(s), you can: – Manipulate their attributes – Set properties – Change their contents (e.g., innerHTML)
  23. 23. 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
  24. 24. jQuery Events $(".article").click(function(){ // do something }); $(".article").mouseover(function(){ // do something });
  25. 25. 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")); });
  26. 26. 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
  27. 27. jQuery Effects Examples $(".article").hide(); $(".article").slideUp(); $(".article").fadeOut("slow"); $(".article").animate({ "font-size": "24px", "background-color": "red" }, 5000);
  28. 28. 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(); });
  29. 29. 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);
  30. 30. jQueryUI Takes Effects Further $(".article").tabs(); $("input").autocomplete(); $("#infoBox").dialog(); $("table.sortable").sortable(); …and many more
  31. 31. 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”
  32. 32. 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
  33. 33. QUESTIONS?
  34. 34. 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

×