SharePoint and jQuery Essentials Mark Rackley – Solutions Architect / SharePoint Practice Lead / Developer Email: mrackley@gmail.com Blog: http://www.sharepointhillbilly.com Twitter: @mrackley

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 application

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

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

What you need to be careful of jQuery Overview What you need to be careful of Performance Executes on client computer Don’t send too much data over the wire Inconsistent results Different browsers Network speed Client machine differences Changes in the jQuery library

jQuery Overview – JavaScript Common Methods Description Classes / Objects var myCar = new Object(); myCar.ID = 1; myCar.make = “Jeep”; myCar.model = “Wrangler”; myCar.color = “Silver”; var vehicles = new Ojbect(); 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”;

jQuery Overview – Common Methods 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 selector Chaining: $("#WebPartWPDnn").find("nobr b:contains('Sum = ')").html().split(" = ")[1].replace(",","");

Deployment & Development Deployment Options Document Library File System CDN Reference Options CEWP Link to source ScriptLinks DO NOT ENTER JS DIRECTLY IN MASTERPAGE

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)

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.

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

Reading/Writing SharePoint List Data SPServices vs. Client Object Model Feature SPServices COM Allows CRUD against SharePoint List Data Yes Works in SharePoint 2007 No Works in SharePoint 2010 Works with Anonymous Access Comes with additional helper functions

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

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/

SharePoint Training application Putting it all together SharePoint Training application