March 16, 2012
• Open wireless access is available.  • Feel free to Tweet (#SPcincy2012) and blog during the    session.#SPcincy2012 on T...
Thanks to our Title & Platinum Sponsors#SPcincy2012 on Twitterwww.sharepointcincy.com
Solutions Architect / SharePoint PracticeLead / DeveloperEmail: mrackley@gmail.comBlog: http://www.sharepointhillbilly.com...
   What is jQuery and Why should I care?   jQuery Overview   Deployment & Development   Interacting with SharePoint & ...
   What / Why jQuery?    ◦ JavaScript utility library supported by Microsoft    ◦ Don‟t have to crack open Visual Studio ...
   What skills do you need?    ◦ JavaScript    ◦ CSS, XML    ◦ A development background      It IS code      Uses devel...
Resolves many common SharePoint complaints  without having to crack open Visual Studio
“It looks like SharePoint”
“That‟s SharePoint?”
“I‟m so sorry… SharePoint can‟t do that out of the box”
“Sure, no problem”
“That will take 3 weeks???” becomes “2 days?Awesome! I love you… here, please accept thisbonus for being such a wonderful ...
   What you need to be aware of    ◦ It is secure       It uses SharePoint‟s security. All scripts run with privileges o...
   What you need to be careful of    ◦ It can perform horribly      Executes on client computer      Don‟t send too muc...
JavaScript          DescriptionClasses / Objects   var myCar = {                       id: 1,                       make: ...
Method                           Description$(document).ready(function($){   Where code execution begins after page is loa...
Method                             Description.each(function() {})               Iterate through all elements that are fou...
   Deployment Options    ◦ Document Library        Easily modify scripts        Keep track of changes with Metadata    ...
   ScriptLink      MasterPages, Delegate Controls, Web Parts, Controls,       Custom Pages      Ensures Script is not l...
   Custom Action      Loads Script for entire Site Collection      Works in sandbox<?xml version="1.0" encoding="utf-8"...
   Development Tools    ◦ IDE      Visual Studio      Notepad++      SharePoint Designer    ◦ Debugging        IE Dev...
   View the DOM to understand what elements    and classes exist on the page.   “View page source” (Chrome) and “View   ...
Getting/Setting SharePoint Form Fields  Text Boxes      ◦ $(“input[title=‟My Text Field‟]”).val()     Selects      ◦ $(“...
   SPServices vs. Client Object ModelFeature                                    SPServices   COMAllows CRUD against Share...
   Tips for selection and integration    ◦   Look for supported / document libraries    ◦   Test in target browsers befor...
   Some of my favorites    ◦ Content Slider -      http://www.awkwardgroup.com/sandbox/awkwa      rd-showcase-a-jquery-pl...
And Nifty Stuff
   You don‟t have to be a SharePoint Guru   It‟s Cheap   It‟s Quick   It‟s Easy   It gets the job done
   Don‟t abuse it, You‟ll pay for it later   Limited choices   There are healthier options   Adds page bloat   Can sl...
Don’t drink the     haterade…Mark Rackleymrackley@juniper-strategy.comwww.twitter.com/mrackleywww.sharepointhillbilly.com ...
 Dfdasf adsf       Please complete and turn in your Session       Evaluation Form as your entry for Prizes at       the e...
•Remember to visit the exhibit hall.   •Get to know your user groups to find out about local   activities and events in yo...
#SPcincy2012 on Twitterwww.sharepointcincy.com
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
SharePoint Cincy 2012 - jQuery essentials
Upcoming SlideShare
Loading in...5
×

SharePoint Cincy 2012 - jQuery essentials

1,145

Published on

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

  • Be the first to like this

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

No notes for slide
  • Twitter
  • SharePoint Cincy 2012 - jQuery essentials

    1. 1. March 16, 2012
    2. 2. • Open wireless access is available. • Feel free to Tweet (#SPcincy2012) and blog during the session.#SPcincy2012 on Twitterwww.sharepointcincy.com
    3. 3. Thanks to our Title & Platinum Sponsors#SPcincy2012 on Twitterwww.sharepointcincy.com
    4. 4. Solutions Architect / SharePoint PracticeLead / DeveloperEmail: mrackley@gmail.comBlog: http://www.sharepointhillbilly.comTwitter: @mrackley www.sharepointcincy.com
    5. 5.  What is jQuery and Why should I care? jQuery Overview Deployment & Development Interacting with SharePoint & the DOM Reading / Writing SharePoint List Data Using Third Party Libraries Demos 5
    6. 6.  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
    7. 7.  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
    8. 8. Resolves many common SharePoint complaints without having to crack open Visual Studio
    9. 9. “It looks like SharePoint”
    10. 10. “That‟s SharePoint?”
    11. 11. “I‟m so sorry… SharePoint can‟t do that out of the box”
    12. 12. “Sure, no problem”
    13. 13. “That will take 3 weeks???” becomes “2 days?Awesome! I love you… here, please accept thisbonus for being such a wonderful developer”
    14. 14.  What you need to be aware of ◦ It is secure  It uses SharePoint‟s security. All scripts run with privileges of current user ◦ It performs well… if done correctly  Reduce postbacks  Can delay queries more effectively ◦ Privileges  They can not be elevated… thank goodness…
    15. 15.  What you need to be careful of ◦ It can perform horribly  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 ◦ It CAN harm your farm!
    16. 16. JavaScript 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”;
    17. 17. Method 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
    18. 18. Method Description.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(",","");
    19. 19.  Deployment Options ◦ Document Library  Easily modify scripts  Keep track of changes with Metadata  Recover from screw ups with Versioning  Less control, more flexibility versus other options ◦ File System  Deployed with a WSP (don‟t think of manually copying)  Not an option for Office 365 or hosted SharePoint 2010 ◦ CDN
    20. 20.  ScriptLink  MasterPages, Delegate Controls, Web Parts, Controls, Custom Pages  Ensures Script is not loaded multiple times  Renders in the correct place in the markup  Need Visual Studio or SPD  More upfront work Content Editor Web Part (CEWP)  Quick & Easy  Don‟t have to deploy anything  Adds CEWP overhead
    21. 21.  Custom Action  Loads Script for entire Site Collection  Works in sandbox<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"> <CustomAction ScriptSrc="~sitecollection/SiteAssets/jquery.min.js" Location="ScriptLink" Sequence="100" > </CustomAction></Elements>
    22. 22.  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)
    23. 23.  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.
    24. 24. 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
    25. 25.  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 YesWorks cross-site Yes No
    26. 26.  Tips for selection and integration ◦ Look for supported / document libraries ◦ Test in target browsers before implementing ◦ Duplicate file structure ◦ Test “vanilla” in SharePoint first
    27. 27.  Some of my favorites ◦ Content Slider - http://www.awkwardgroup.com/sandbox/awkwa rd-showcase-a-jquery-plugin/ ◦ Formatted Tables - http://www.datatables.net/ ◦ Modal Window - http://www.ericmmartin.com/projects/simplemo dal/ ◦ SPServices - http://spservices.codeplex.com/ ◦ Calendar - http://arshaw.com/fullcalendar/
    28. 28. And Nifty Stuff
    29. 29.  You don‟t have to be a SharePoint Guru It‟s Cheap It‟s Quick It‟s Easy It gets the job done
    30. 30.  Don‟t abuse it, You‟ll pay for it later Limited choices There are healthier options Adds page bloat Can slow your performance
    31. 31. Don’t drink the haterade…Mark Rackleymrackley@juniper-strategy.comwww.twitter.com/mrackleywww.sharepointhillbilly.com 34
    32. 32.  Dfdasf adsf Please complete and turn in your Session Evaluation Form as your entry for Prizes at the end of event prize raffle. Presenter: Speaker Name Session Name: Name of Session#SPcincy2012 on Twitterwww.sharepointcincy.com
    33. 33. •Remember to visit the exhibit hall. •Get to know your user groups to find out about local activities and events in your area. •Make sure you stick around for the closing session and turn in your evaluation forms to be eligible for the prize raffles.#SPcincy2012 on Twitterwww.sharepointcincy.com
    34. 34. #SPcincy2012 on Twitterwww.sharepointcincy.com

    ×