SharePoint and jQuery EssentialsMark Rackley – Solutions Architect /SharePoint Practice Lead / DeveloperEmail: mrackley@gm...
Workshop Outline•   jQuery Overview / Common methods•   Deployment & Development•   Interacting with SharePoint & the DOM•...
jQuery Overview• What / Why jQuery?  – JavaScript utility library supported by    Microsoft  – Don‟t have to crack open Vi...
jQuery Overview• What skills do you need?  – JavaScript  – CSS, XML  – A development background     • It IS code     • Use...
jQuery Overview• What you need to be careful of  – Performance     • Executes on client computer     • Don‟t send too much...
jQuery Overview – JavaScript            Common MethodsJavaScript          DescriptionClasses / Objects   var myCar = {    ...
jQuery Overview – Common                   MethodsMethod                             Description$(document).ready(function...
Deployment & Development• Deployment Options  – Document Library  – File System  – CDN• Reference Options  – CEWP Link to ...
Deployment & Development• Development Tools  – IDE    • Visual Studio    • Notepad++    • SharePoint Designer  – Debugging...
Interacting with SharePoint &             the DOM• View the DOM to understand what  elements and classes exist on the page...
Interacting with SharePoint &                 the DOM  Getting/Setting SharePoint Form Fields  • Text Boxes      – $(“inpu...
Reading/Writing SharePoint List             Data• SPServices vs. Client Object ModelFeature                               ...
Using Third Party Libraries• Tips for selection and integration  – Look for supported / document libraries  – Test in targ...
Using Third Party Libraries• Some of my favorites  – Content Slider -   http://www.awkwardgroup.com/sandbox/awkward-   sho...
Putting it all togetherSHAREPOINT TRAININGAPPLICATION
Upcoming SlideShare
Loading in...5
×

SPTechCon - Share point and jquery essentials

971

Published on

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

No Downloads
Views
Total Views
971
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

SPTechCon - Share point and jquery essentials

  1. 1. SharePoint and jQuery EssentialsMark Rackley – Solutions Architect /SharePoint Practice Lead / DeveloperEmail: mrackley@gmail.comBlog: http://www.sharepointhillbilly.comTwitter: @mrackley
  2. 2. Workshop Outline• jQuery Overview / Common methods• Deployment & Development• Interacting with SharePoint & the DOM• Reading / Writing SharePoint List Data• Using Third Party Libraries• Putting it all together to build an application2
  3. 3. jQuery Overview• What / Why jQuery? – JavaScript utility library supported by Microsoft – Don‟t have to crack open Visual Studio or deploy solutions (ideal for SharePoint online and tightly controlled environments) – It‟s the future
  4. 4. jQuery Overview• What skills do you need? – JavaScript – CSS, XML – A development background • It IS code • Uses development constructs • If you can‟t write code, your ability to do magic will be limited to what you can copy/paste – CAML, CAML, CAML… Sorry… – Ability to think outside the box • Use all the pieces together
  5. 5. jQuery Overview• What you need to be careful of – Performance • Executes on client computer • Don‟t send too much data over the wire • Minify your scripts – Inconsistent results • Different browsers • Network speed • Client machine differences – Changes in the jQuery library
  6. 6. jQuery Overview – JavaScript Common MethodsJavaScript DescriptionClasses / Objects var myCar = { id: 1, make: “Jeep”, model: “Wrangler”, color: “Silver” } var vehicles = {}; vehicles[myCar.ID] = myCar;For each loops For (car in vehicles) { var thisCar = vehicles[car]; }.split() Var numbers = “1,2,3,4,5”; Var myArray = numbers.split(“,”); myArray[0] == “1”.replace() var myString = “This string has spaces”; var newString = myString.replace(“ “,””); newString == “Thisstringhasspaces”;
  7. 7. jQuery Overview – Common MethodsMethod Description$(document).ready(function($){}) Where code execution begins after page is loaded$(“#ElementID”) Returns element with given id$(“Type[attrib=„value‟]”) Gets element of specific type and attribute value $(“input[Title=„First Name‟]”).show(), .hide(), .toggle() Shows, hides, toggles.html() Gets the raw html for an element with tags.text() Contents of an element with HTML tags stripped out.each(function() {}) Iterate through all elements that are found. $(“tr”).each(function() { }) would iterate through every row on the page..closest(selector) Get the first element that matches the selector, beginning at the currently element and progressing UP the DOM $("input[title=„Field Name]").closest("tr").hide();.contains() Check to see if a DOM element is within another DOM element.find() Get the child elements of current element, filtered by a selectorChaining:$("#WebPartWPDnn").find("nobr b:contains(Sum = )").html().split(" = ")[1].replace(",","");
  8. 8. Deployment & Development• Deployment Options – Document Library – File System – CDN• Reference Options – CEWP Link to source – ScriptLinks – DO NOT ENTER JS DIRECTLY IN MASTERPAGE
  9. 9. Deployment & Development• Development Tools – IDE • Visual Studio • Notepad++ • SharePoint Designer – Debugging • IE Developer Tools • Chrome debugger • Fiddler • Alerts… lots and lots of alerts • Avoid Console.log (or use it wisely)
  10. 10. Interacting with SharePoint & the DOM• View the DOM to understand what elements and classes exist on the page.• “View page source” (Chrome) and “View Source” (IE) displays the contests of the DOM when the page is initially loaded.• The DOM is always being modified, view the active DOM in your chosen debugger to view the DOM as it currently exists.
  11. 11. Interacting with SharePoint & the DOM Getting/Setting SharePoint Form Fields • Text Boxes – $(“input[title=‟My Text Field‟]”).val() • Selects – $(“select[title=‟My Choice‟]”).val(mySelectValue); • Checkboxes – $("input[title=My Check box]").removeAttr(checked); – $("input[title=My Check box]").attr(checked,checked);http://sharepointhillbilly.com/archive/2011/08/20/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-amp-setting-sharepoint.aspx
  12. 12. Reading/Writing SharePoint List Data• SPServices vs. Client Object ModelFeature SPServices COMAllows CRUD against SharePoint List Data Yes YesWorks in SharePoint 2007 Yes NoWorks in SharePoint 2010 Yes YesWorks with Anonymous Access Yes NoComes with additional helper functions Yes Yes
  13. 13. Using Third Party Libraries• Tips for selection and integration – Look for supported / document libraries – Test in target browsers before implementing – Duplicate file structure – Test “vanilla” in SharePoint first
  14. 14. Using Third Party Libraries• Some of my favorites – Content Slider - http://www.awkwardgroup.com/sandbox/awkward- showcase-a-jquery-plugin/ – Formatted Tables - http://www.datatables.net/ – Modal Window - http://www.ericmmartin.com/projects/simplemodal/ – SPServices - http://spservices.codeplex.com/ – Calendar - http://arshaw.com/fullcalendar/
  15. 15. Putting it all togetherSHAREPOINT TRAININGAPPLICATION
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×