SharePoint and jQuery Essentials
Preview:
DESCRIPTION
Overview of using jQuery in SharePoint
Citation preview
- 1. SharePoint & jQuery Essentials SharePoint Saturday St.
Louis January 12th, 2013 Mark Rackley
mark.rackley@summit7systems.com
- 2. Housekeeping Please remember to submit your session
evaluation for each session you attend Follow SharePoint Saturday
St. Louis on Twitter @spsstl and hashtag #spsstl 2 | SharePoint
Saturday St. Louis 2012
- 3. Thanks to Our Sponsors! 3 | SharePoint Saturday St. Louis
2012
- 4. About Mark Rackley Solutions Architect & Developer at
Summit 7 Systems 17+ years software architecture and development
experience Blogger, Writer, Speaker mark.rackley@summit7systems.com
@mrackley http://sharepointhillbilly.com
- 5. Agenda SharePoint & jQuerys history jQuery Overview When
to use jQuery / When not to Deployment & Maintenance
Development Basics Using Third Party Libraries The SharePoint &
jQuery Guide http://bit.ly/jQueryAndSP
- 6. SharePoint & jQuerys Courtship What is jQuery?
JavaScript utility library supported by Microsoft Allows you to
interact with a page AFTER it is rendered using the DOM Whats the
history? Snubbed in SharePoint 2007 Tolerated in SharePoint 2010
Embraced in SharePoint 2013 Its the future
- 7. jQuery Overview What skills do you need? JavaScript CSS,
XML, JSON A development background It IS code Uses development
constructs If you cant 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. Crappy Abstruse Markup Language+startDate++endDate+,
- 9. SharePoint & jQuery? Why? Fewer upgrade/deployment
issues Less customization Improved visuals Improved usability Rapid
deployment and modifications
- 10. SharePoint & jQuery? Why? Can replace the need for
Visual Studio for some web parts Can replace the need for basic
workflows No points (shhhh dont tell the admins) Can get around
list view threshold
- 11. jQuery makes your SharePointapplications USABLE and allows
you toget your work done NOW
- 12. jQuery Overview Busting jQuery Mtyhs Its not secure BUSTED
It uses SharePoints security Scripts execute with privileges of
current user It doesnt perform well BUSTED Reduce page loads Delay
data queries You cant elevate privileges CONFIRMED Thank God
- 13. jQuery Overview Why I hate jQuery (some days) Too many
options Debugging It can perform horribly Inconsistent results
Changes in the jQuery library It CAN harm your farm!
- 14. When should you use jQuery Tightly controlled environments
Visuals or Usability are high priorities Tight timeframes Simple
page and form modifications Dynamic drop downs Hiding page elements
Reading / populating fields Why would you NOT use jQuery?
- 15. When should you question the use ofjQuery? Need pull a lot
of data over the wire to work with Iterating over many rows of list
data Extended business logic or proprietary business logic
Privileges need to be elevated Need to support many different
browsers
- 16. Deployment Deployment Options Document Library Easily
modify scripts Keep track of changes with Metadata Recover from
screw ups with Versioning File System Deployed with a WSP (dont
think of manually copying) Not an option for Office 365 or hosted
SharePoint 2010 Content Delivery Network (CDN)
- 17. Document Library
- 18. Reference Options 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 Dont have to deploy anything Adds CEWP
overhead
- 19. Reference Options Custom Action Loads Script for entire
Site Collection Works in sandbox
- 20. Development Development Tools IDE Visual Studio Notepad++
SharePoint Designer Debugging IE Developer Tools / Chrome Debugger
/ Firebug Fiddler Alerts lots and lots of alerts Avoid Console.log
(or use it wisely)
- 21. jQuery Overview - JavaScriptObjectsvar car = { var car =
{}; color: red, car.color = red; make: Jeep, car.make = Jeep;
model: wrangler car.model=wranger;} var car = {}; car*color+ = red;
car*make+ = Jeep; car*model+ =wranger;
- 22. jQuery Overview Common Usage Method Description
$(document).ready(function($){}) Where code execution begins after
page is loaded $(#ElementID) Returns element with given id
$(element.class) .html() Gets the raw html for an element with
tags$(input[title=E-mail Address+); Contents of an element with
HTML tags stripped out .text() //returns
element$(input).each(function(), $(this).attr(title); // gets the
value of the title attribute for all inputs});
- 23. jQuery Overview Common Methods Method Description .split()
lookUpFieldValue = 1;#Mark Rackley; Var myArray =
numbers.split(;#); myArray*1+ == Mark Rackley .replace() var
myString = This string has spaces; var newString =
myString.replace(/ /g,); newString == Thisstringhasspaces;
.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(",","");
- 24. Interacting with SharePoint FormsGetting/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);The SharePoint
& jQuery Guide http://bit.ly/jQueryAndSP
- 25. Interacting WithSharePoint List DataWhen to Choose
SPServices vs. the Client Object
Modelhttp://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=15
- 26. CSOM vs. SPServicesFunctionality CSOM SPServicesSharePoint
2007 No YesSharePoint 2010/2013 Yes YesAnonymous Access No YesCross
Site / Cross Domain Access No Yes
- 27. How About Some Best Practices? Use the Elements ID when
possible Reduce DOM searches Re-use code / Good coding practices
Minimize files Use animations to hide slow performance Delay
loading of Selects until you need the data
- 28. Using Third Party Libraries Tips for selection and
integration Look for supported / documented libraries Test in
target browsers before implementing Duplicate file structure Test
vanilla in SharePoint first
- 29. 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/
- 30. DEMOS AND NIFTY STUFF
- 31. So, whats the deal?
- 32. Fast Food Development You dont have to be a SharePoint Guru
Its Cheap Its Quick Its Easy It gets the job done
- 33. Fast Food Development Dont abuse it, Youll pay for it later
Limited choices There are healthier options Adds page bloat Can
slow your performance
- 34. Questions? Dont drink the hateradeMark
Rackleymark.rackley@summit7systems.comwww.twitter.com/mrackleywww.sharepointhillbilly.com