SEF2013 - A jQuery Primer for SharePoint


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
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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 Note the protocol-less references
  6. 6. HTML Elements Powered by <a href="">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")
  14. 14. Selectors for SharePoint $(" 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 $("").click(function() { alert("Go directly to the list."); }); $("").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 = $(""); // 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 { $(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 – – Checks your script against accepted standards – “Warning: JSLint will hurt your feelings.” • JSHint – – Like JSLint, but a little more forgiving – More jQuery aware • JavaScript Compressorator – – Minifies script files using multiple methods
  33. 33. QUESTIONS?
  34. 34. Contact Information eMail Blog SPServices SPXSLT Books The Middle Tier Manifesto