1 / 38

Get Your jQuery On

Get Your jQuery On. 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.

hovan
Download Presentation

Get Your jQuery On

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Get Your jQuery On

  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. • Over 30 years of experience in technology professional services and software development. In 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. Session Overview • SharePoint’s pages and forms can seem somewhat old-fashioned to the Facebook generation. By using jQuery, jQueryUI, and other scripting libraries such as SPServices, we can make those pages more consistent with the type of user experiences people are used to on the modern Web. • In this session, Marc will cover some of the useful features of jQuery and SPServices as well as some of the rich possibilities available to you by demonstrating solution examples he has built for his consulting clients. • This demo-rich session is bound to change the way you think about building your SharePoint applications.

  4. Getting Started

  5. What is jQuery? is

  6. 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

  7. 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/

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

  9. 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

  10. 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!

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

  12. jQuery’s Document Ready $(document).ready(function() { // do something }); Shorthand: $(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 jQuery(function($) { // do something });

  13. 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

  14. 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

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

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

  17. Useful jQuery Selector Tricks • .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 $("[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

  18. 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, while .attr() gets/sets attributes • To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.

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

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

  21. 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

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

  23. Traversal Example from SPServices SelectCandidate SelectResult <select name="ctl00$m$g_e845e690_00da_428f_afbd_fbe804787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00$ctl00$SelectCandidate" title="Citypossible 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=""> varpossibleValues = $("select[ID$='SelectCandidate'][Title^='" + opt.multiSelectColumn + " ']");varselectedValues = possibleValues.closest("span").find("select[ID$='SelectResult'][Title^='" + opt.multiSelectColumn + " ']"); <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="">

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

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

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

  27. 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

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

  29. Putting It Together:Toggling Web Part Visibility varwpTitles = $("h2.ms-webpart-titleText"); // 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("div.ms-webpart-chrome") .find("div:eq(1)") .slideToggle(); });

  30. 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 perRowcolumnOptions 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);

  31. SharePoint 2013 SOAP Call With SPServices varthisPromise = $().SPServices({ operation: "GetListItems", listName: "Cities" }); thisPromise.done(function() { $(thisPromise.responseXML).SPFilterNode("z:row").each(function() { alert($(this).attr("ows_Title")); }); }); SOAP (asmx) Web Services are deprecated in SharePoint 2013 http://spservices.codeplex.com

  32. SharePoint 2013 REST Call $.ajax({ url: "/sites/marca/jquery/_api/web/lists/getbytitle('Cities')/items", type: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, success: function(data) { var results = data.d.results; for(i=0; i < data.d.results.length; i++) { alert(i + data.d.results[i].Title); } } }); How to: Complete basic operations using SharePoint 2013 REST endpoints http://msdn.microsoft.com/en-us/library/jj164022.aspx Understanding and Using the SharePoint 2013 REST Interface http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

  33. SharePoint 2013 JSOM Call varsiteUrl = "/sites/marca/jQuery"; varclientContext = new SP.ClientContext(siteUrl); varoList = clientContext.get_web().get_lists().getByTitle('Cities'); varcamlQuery = new SP.CamlQuery(); camlQuery.set_viewXml('<View><Query></Query></View>'); this.collListItem = oList.getItems(camlQuery); clientContext.load(collListItem); clientContext.executeQueryAsync( Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed) ); function onQuerySucceeded(sender, args) { varlistItemInfo = ''; varlistItemEnumerator = collListItem.getEnumerator(); while (listItemEnumerator.moveNext()) { varoListItem = listItemEnumerator.get_current(); alert(oListItem.get_item('Title').toString()); } } function onQueryFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); } How to: Complete basic operations using JavaScript library code in SharePoint 2013 http://msdn.microsoft.com/en-us/library/jj163201.aspx

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

  35. 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”

  36. 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

  37. Questions?

  38. Contact Information

More Related