SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint
-
Upload
marc-d-anderson -
Category
Technology
-
view
341 -
download
1
description
Transcript of SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint
![Page 1: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/1.jpg)
A jQuery Primerfor SharePointMarc D Anderson
![Page 2: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/2.jpg)
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).
![Page 3: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/3.jpg)
What is jQuery?
is
![Page 4: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/4.jpg)
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
![Page 5: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/5.jpg)
Script from CDNs
Referencing jQuery, jQueryUI, and SPServices from CDNs – Revisitedhttp://sympmarc.com/2013/02/07/referencing-jquery-jqueryui-and-spservices-from-cdns-revisited/
Note the protocol-less references
![Page 6: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/6.jpg)
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)
![Page 7: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/7.jpg)
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
![Page 8: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/8.jpg)
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!
![Page 9: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/9.jpg)
The Basic Idea of jQuery
$(".article").hide();
Select something
Do something!
Remember this from CSS?
![Page 10: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/10.jpg)
jQuery’s Document Ready
$(document).ready(function() { // do something});
• Processing is suspended until the page’s DOM is fully loaded• Ensures that all of the elements you need in the DOM are available
Shorthand:$(function() { // do something});
jQuery(function($) { // do something});
![Page 11: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/11.jpg)
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
![Page 12: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/12.jpg)
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: 0 to n matching elements
![Page 13: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/13.jpg)
Selectors for SharePoint
$("div[id$='QuickLaunchNavigationManager']
li:first span.menu-item-text")
![Page 14: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/14.jpg)
Selectors for SharePoint
$("td.ms-list-addnew a:eq(1)")
![Page 15: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/15.jpg)
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_88c4_11e7e96480f4$ctl00$ctl02$ctl00$ctl01$ctl00$ContentTypeChoice"
•These selector tricks really help
![Page 16: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/16.jpg)
jQuery Attributes
• Once you’ve selected the right DOM element, you can use jQuery to get or set its attributes and properties
• 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.)
![Page 17: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/17.jpg)
Example with SharePoint Attributes: Get
$("select[title='Region']").val(); $
("select[title='Region']
option:selected").text();
![Page 18: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/18.jpg)
Example with SharePoint Attributes: Set
$("select[title='Region']").val(5);
$("select[title='Region']
option:selected").text("boo");
![Page 19: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/19.jpg)
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
![Page 20: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/20.jpg)
Traversing Down:Find an Element’s Specific Children
$("div[id$='QuickLaunchNavigationManager']
li:first")
.parent().find("li:eq(3) li:first .menu-item-
text");
![Page 21: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/21.jpg)
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_fbe804787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectResult" title="City selected values" id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectResult" style="width: 162px;" onkeydown="GipHandleHScroll(event)" ondblclick="GipRemoveSelectedItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onchange="GipSelectResultItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" size="20" multiple="">
<select name="ctl00$m$g_e845e690_00da_428f_afbd_fbe804787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" title="City possible values" id="ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_SelectCandidate" style="width: 162px;" onkeydown="GipHandleHScroll(event)" ondblclick="GipAddSelectedItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m); return false" onchange="GipSelectCandidateItems(ctl00_m_g_e845e690_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPicker_m);" size="350" multiple="">
![Page 22: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/22.jpg)
Manipulation
• Once you’ve gotten the right element(s), you can:•Manipulate their attributes• Set properties• Change their contents (e.g., innerHTML)
![Page 23: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/23.jpg)
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
![Page 24: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/24.jpg)
jQuery Events
$(".article").click(function(){ // do something});$(".article").mouseover(function(){ // do something});
![Page 25: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/25.jpg)
jQuery Events$("h2.ms-WPTitle").click(function() { alert("Go directly to the list.");});
$("h2.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"));});
![Page 26: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/26.jpg)
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
![Page 27: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/27.jpg)
jQuery Effects Examples$(".article").hide();
$(".article").slideUp();
$(".article").fadeOut("slow");
$(".article").animate({"font-size": "24px","background-color": "red"
}, 5000);
![Page 28: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/28.jpg)
Putting It Together:Toggling Web Part Visibility
var wpTitles = $("h2.ms-WPTitle");// Remove the links on the Web Part TitleswpTitles.find("nobr").unwrap("<a></a>");// Show the pointer on mouseoverwpTitles.css("cursor", "pointer");// Add click behavior that toggles the visibilitywpTitles.click(function() { $(this).closest("table").closest("tr").next().slideToggle();});
![Page 29: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/29.jpg)
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 stringfor(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);
![Page 30: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/30.jpg)
jQueryUI Takes Effects Further
$(".article").tabs();
$("input").autocomplete();
$("#infoBox").dialog();
$("table.sortable").sortable();
…and many more
![Page 31: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/31.jpg)
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”
![Page 32: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/32.jpg)
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
![Page 33: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/33.jpg)
QUESTIONS?
![Page 34: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/34.jpg)
Thanks to our sponsors! And you.
Images © 2013 http://www.flickr.com/photos/boliyou/2884130773/
![Page 35: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/35.jpg)
One final note• Fill out your evaluation form & turn for the
big raffle (tablet)• SharePint next door (American) 5:30pm• Don’t forget WaterFire downtown tonight!
![Page 36: SharePoint Saturday Rhode Island 2013 - A jQuery Primer for SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070302/547e1540b4af9f616d8b4801/html5/thumbnails/36.jpg)
Contact InformationeMail marc.anderson@sympraxisconsulti
ng.comBlog http://sympmarc.comSPServices http://spservices.codeplex.com
SPXSLT http://spxslt.codeplex.comBooks http://sympmarc.com/books
The Middle Tier Manifesto
http://bit.ly/middletier