SEF 2012 - A jQuery Primer for Sharepoint
Upcoming SlideShare
Loading in...5
×
 

SEF 2012 - A jQuery Primer for Sharepoint

on

  • 1,422 views

These are the slides from my two sessions at the SharePoint and Exchange Forum 2012 (SEF12 - http://seforum.se) in Stockholm, Sweden on October 23, 2012. ...

These are the slides from my two sessions at the SharePoint and Exchange Forum 2012 (SEF12 - http://seforum.se) in Stockholm, Sweden on October 23, 2012.

A jQuery Primer for SharePoint: Overview, jQuery and CSS, and Selectors
Developer, level 200
jQuery is a JavaScript framework that allows you to develop great client side solutions. If you've been meaning to learn jQuery but haven't found the time, come to this introductory session where we'll cover some of the important basics of jQuery in a SharePoint context. Understanding how jQuery relates to CSS and JavaScript is an important hurdle in the learning curve. Selectors are the key concept you need to understand to be able to work with SharePoint’s pages. By the end of this session, you'll understand what jQuery is and how to start adding it to your SharePoint solutions.

A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation, Events, and Effects
Developer, level 200
Once you know how to start working with jQuery, you’ll want to be able to change what happens in the page by querying existing elements and adding new behaviors. In this session, we’ll look at Attributes, Traversing, Manipulation, Events, and Effects. This will get you to the point where you can roll up your sleeves and start creating solutions. We’ll also look at using plugins like SPServices to make your work easier.

Both sessions are based on my articles at SharePoint Magazine.

Statistics

Views

Total Views
1,422
Views on SlideShare
1,420
Embed Views
2

Actions

Likes
4
Downloads
57
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SEF 2012 - A jQuery Primer for Sharepoint SEF 2012 - A jQuery Primer for Sharepoint Presentation Transcript

  • A jQuery Primer for SharePointMarc D AndersonCo-Founder & PresidentSympraxis Consulting LLCmarc.anderson@sympraxisconsulting.com
  • What is jQuery? is
  • GETTING STARTED
  • Getting Started• Add references to the jQuery library – Master page – Page layout – Individual aspx pages
  • Referencing Script Libraries from CDNs <!-- Reference the jQueryUI themes stylesheet on the Google CDN. Here were using the "start" theme --> <link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/s tart/jquery-ui.css" /> <!-- Reference jQuery on the Google CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.j s"></script> <!-- Reference jQueryUI on the Google CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery- ui.min.js"></script> <!-- Reference SPServices on cdnjs (Cloudflare) --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/ jquery.SPServices-0.7.2.min.js"></script>More:http://sympmarc.com/2012/04/20/referencing-jquery-jqueryui-and-spservices-from-cdns/
  • SharePoint Web Technology• HTML – Hypertext Markup Language – Content and structure• CSS – Cascading Style Sheets – Presentation and style• JavaScript and jQuery – Interactive behavior
  • HTML Elements Opening tag Closing tagPowered by <a href="http://office365.com">Office365</a>. Attribute Value
  • INTRO TO CSS
  • Intro to CSS: Why does CSS matter?• CSS = Cascading Style Sheets• jQuery uses selectors that are very similar to CSS selectors• CSS is the fundamental styling mechanism for the Web• HTML + CSS + jQuery = AWESOME
  • CSS StylesSelect HTML element(s) .article { Modify them! color: red; }
  • CSS Element Selectorsp { <p> color: red; Paragraph of text.} </p> Paragraph of text.
  • CSS Class Selectors.article { <div class="article"> color: red; This is an article.} </div> This is an article.
  • CSS ID Selectors#header { <div id="header"> color: red; This is a header.} </div> This is a header.
  • CSS Descendant Selectors#header h1 { <div id="header"> <h1> color: red; This is a header.} </h1> </div> This is a header.
  • CSS Composite Selectors <div id="header"> <ul class="top-nav"> <li>Item 1</li>#header ul.top-nav li { <li>Item 2</li> color: red; <li>Item 3</li>} </ul> </div> • Item 1 • Item 2 • Item 3
  • CSS Complex Selectors <ul class="top-nav"> <li>Item 1</li> <li>ul.top-nav > li { Item 2 color: red; <ul class="menu"> <li>Menu 1</li>} </ul> </li> </ul> • Item 1 • Item 2 • Menu 1
  • My CSS "Best" Practices• Use truly unique class and id names• Choose a prefix for your project, e.g. ‘xyz-’ or ‘x51-’• All of your classes and ids will be easy to select: xyz-home-page-article x51-top-section• Don’t be afraid of verbose class and ID names!
  • DOCUMENT OBJECT MODEL (DOM)
  • 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
  • What Can We Do With the DOM?• Add or remove CSS classes• Create new HTML elements• Remove HTML elements• Change HTML element attributes• And so much more The DOM is HTML, which is XML, which is data!
  • IMPORTANT TOOLS
  • Internet Explorer Developer Tools (F12)• Shows the Internet Explorer view of the DOM in SharePoint’s pages – some pages and controls are rendered differently in other browsers
  • The Firebug Add-On for Firefox• Better for debugging and looking at Net traffic
  • JQUERY BASICS
  • The Basic Idea of jQuery Select something$(.article).hide(); Do something!
  • 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 are available
  • jQuery Documentation: Your Friend• The jQuery documentation is arranged to help you• What you need to know is arranged sequentially from top to bottom
  • SELECTORS
  • jQuery Selectors• Selectors are the most important jQuery concept• Selecting the right DOM object(s) is half the battle• Selectors return a collection of DOM objects – 0 to n matching elements
  • jQuery Element Selectors<p> Paragraph of text.</p> $("p")
  • jQuery Element Selectors <p>Paragraph 1 of text.</p> <p>Paragraph 2 of text.</p> var allParagraphs = $("p");allParagraphs is now defined as a jQuery object whichcontains pointers to all of the paragraphs in the page
  • jQuery Class Selectors<div class="article"> This is an article.</div> $(".article")
  • jQuery ID Selectors<div id="header"> This is a header.</div> $("#header")
  • jQuery Descendant Selectors<div id="header"> <h1> This is a header. </h1></div> $("#header h1")
  • jQuery Composite Selectors<div id="header"> <ul class="top-nav"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></div>$("#header ul.top-nav li")
  • jQuery Complex Selectors <div id="header"> <ul class="top-nav"> <li>Item 1</li> <li> Item 2 <ul class="menu"> <li>Menu 1</li> </ul> </li> </ul> </div>$("#header ul.top-nav ul.menu li")
  • Selectors for SharePoint<DIVid=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item"href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$("div.ms-quicklaunch-navmgr")
  • Selectors for SharePoint <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$("#ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigationManager")
  • Selectors for SharePoint <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">$(".ms-quicklaunch-navmgr a.static.menu-item")
  • Useful jQuery Selector Tricks• .NET Applications like SharePoint generate some long and ugly markup and IDs• 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$("[id][class][style]"); // Has all
  • A jQuery Primer for SharePoint: Attributes, Traversing, Manipulation,Events, and EffectsNEXT SESSION AT 12:50
  • ATTRIBUTES
  • 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 retrieve property values, while .attr() retrieves attributes
  • jQuery Attributes: Get and Set <div id="helloDiv" class="ms- bold"> Hello, world! </div>GET: var thisClass = $("#helloDiv").attr("class");SET: $("#helloDiv").attr("class", "ms-hidden");
  • Example with SharePoint Attributes: Get <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/_layouts/viewlsts.aspx?BaseType=1">var thisHref = $(".ms-quicklaunch-navmgr a.static.menu-item:first") .attr("href");
  • Example with SharePoint Attributes: Set <DIV id=ctl00_PlaceHolderLeftNavBar_QuickLaunchNavigatio nManager class=ms-quicklaunch-navmgr> <DIV> <DIV id=zz18_V4QuickLaunchMenu class=s4-ql> <DIV class="menu vertical menu-vertical"> <UL class="root static"> <LI class=static> <A class="static menu-item" href="/sitename/mypage.aspx">$(".ms-quicklaunch-navmgr a.static.menu-item:first") .attr("href", "/sitename/mypage.aspx");
  • TRAVERSING
  • 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
  • Find an Element’s Ancestors <div id="helloDiv" class="ms-bold"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>= $("ul").parent(); $("ul").closest("div");
  • Traversing Down: Initial Selector<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("div.ms-quicklaunchheader").find("a");
  • Traversing Down: Finding Specific Children<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("div.ms-quicklaunchheader").find("a");
  • Traversing Up: Initial Selector<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("a[id$=NavLinkViewAll]").parent();
  • Traversing Up: Finding Specific Ancestors<DIV class=ms-quicklaunchheader> <A accessKey=3id=ctl00_PlaceHolderLeftNavBar_idNavLinkViewAllhref="/Intranet/JQueryLib/_layouts/viewlsts.aspx"> View All Site Content </A></DIV>$("a[id$=NavLinkViewAll]").parent();
  • Traversal Example from SPServices
  • Traversal Example from SPServices<select <selectname="ctl00$m$g_e845e690_00da_428f_afbd_fbe80 name="ctl00$m$g_e845e690_00da_428f_afbd_fbe80474787763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$c 87763$ctl00$ctl04$ctl07$ctl00$ctl00$ctl04$ctl00tl00$ctl00$SelectCandidate" title="City $ctl00$SelectResult" title="City selectedpossible values" values"id="ctl00_m_g_e845e690_00da_428f_afbd_fbe8047 id="ctl00_m_g_e845e690_00da_428f_afbd_fbe80478787763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl 763_ctl00_ctl04_ctl07_ctl00_ctl00_ctl04_ctl00_c00_ctl00_SelectCandidate" style="width: tl00_SelectResult" style="width: 162px;"162px;" onkeydown="GipHandleHScroll(event)" onkeydown="GipHandleHScroll(event)"ondblclick="GipAddSelectedItems(ctl00_m_g_e84 ondblclick="GipRemoveSelectedItems(ctl00_m_g_e85e690_00da_428f_afbd_fbe804787763_ctl00_ctl04 45e690_00da_428f_afbd_fbe804787763_ctl00_ctl04__ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLoo ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupkupPicker_m); return false" Picker_m); return false"onchange="GipSelectCandidateItems(ctl00_m_g_e onchange="GipSelectResultItems(ctl00_m_g_e845e6845e690_00da_428f_afbd_fbe804787763_ctl00_ctl 90_00da_428f_afbd_fbe804787763_ctl00_ctl04_ctl004_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_MultiL 7_ctl00_ctl00_ctl04_ctl00_ctl00_MultiLookupPickookupPicker_m);" size="350" multiple=""> er_m);" size="20" multiple="">
  • Traversal Example from SPServices SelectCandidate SelectResultvar possibleValues = $("select[ID$=SelectCandidate][Title^="+ opt.multiSelectColumn + " ]");var selectedValues =possibleValues.closest("span").find("select[ID$=SelectResult][Title^=" + opt.multiSelectColumn + " ]");
  • MANIPULATION
  • Manipulation• Once you’ve gotten the right element(s), you can: – Manipulate their attributes or properties – Change their contents – Move them in the DOM
  • Manipulation: Adding Text <div id="helloDiv" class="ms-bold"> Hello, world! </div>$("#helloDiv").append(" And youre welcome to it!"); <div id="helloDiv" class="ms-bold"> Hello, world! And youre welcome to it! </div>
  • Manipulation: Adding CSS Classes <div id="helloDiv" class="ms-bold"> Hello, world! </div> $("#helloDiv").addClass("my-class");<div id="helloDiv" class="ms-bold my-class"> Hello, world!</div>
  • Manipulation: Wrapping Elements<div id="helloDiv" class="ms-bold"> Hello, world!</div>$("#helloDiv") .wrap("<a href=http://cnn.com></a>");<a href="http://cnn.com"> <div id="helloDiv" class="ms-bold"> Hello, world! </div></a>
  • Manipulation: Inserting Elements <div id="helloDiv" class="ms-bold"> Hello, world! </div>$("#helloDiv") .before("<div>In the beginning...</div>"); <div>In the beginning...</div> <div id="helloDiv" class="ms-bold"> Hello, world! </div>
  • Manipulation: Changing CSS <div id="helloDiv" class="ms-bold"> Hello, world! </div> $("#helloDiv") .css("background-color", "fuchsia");$("h3.ms-WPTitle a").css({ border: "5px black solid", color: "red"});
  • EVENTS
  • Events• jQuery’s events enable you to work with all of the standard JavaScript events• These methods are used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.
  • jQuery Events$(.article).click(function(){ // do something});$(.article).mouseover(function(){ // do something});
  • jQuery Events for Web Part Titles$("h3.ms-WPTitle").click(function() { alert("Go directly to the list!");});$("h3.ms-WPTitle").mouseover(function() { $(this).css("background-color", "fuchsia");});
  • EFFECTS
  • 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).after("<em>Hello!</em>");$(.article).css("color", "red");
  • Putting It Together: Example Change what happens when you click on a Web Part Title// Remove the links on the Web Part Titles$("h3.ms-WPTitle").find("nobr").unwrap("<a></a>");// Add click behavior that toggles the visibility// of the Web Part$("h3.ms-WPTitle").click(function() { $(this).closest("table").closest("tr").next().toggle();});
  • Putting It Together: Example This example shows part of SPArrangeChoices from SPServices.// 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 weve 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();…and many more
  • jQuery Plugins Abound!• If you want to do something sophisticated, look for an existing plugin• Due diligence is up to you– some of the plugins aren’t written very well• Beware of "plugin sprawl"
  • More Useful Tools• JavaScript Compressorator – Minifies script files using multiple methods http://compressorrater.thruhere.net/• JSLint – Checks your script against accepted standards http://jslint.com/ "Warning: JSLint will hurt your feelings."
  • Contact Information eMail marc.anderson@sympraxisconsulting.com Blog http://sympmarc.com SPServices http://spservices.codeplex.com SPXSLT http://spxslt.codeplex.com eBook http://bit.ly/UnlockingDVWPThe Middle Tier Manifesto http://bit.ly/middletier