the sharepoint and jquery guide by mark rackley - sptechcon
DESCRIPTION
Technical Class: Tuesday, March 5 11:30 AM - 12:45 PMTRANSCRIPT
![Page 2: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/2.jpg)
» Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management along with companies such as Microsoft, Oracle and IBM.
» Summit 7 Systems was named to the 2011 and 2012 CRN Next-Gen 250 List as a company bringing innovative processes, methodologies and models to the solution provider industry.
» Top 1% of Microsoft Partners Worldwide» Summit 7 Systems was named #6 on the 2012 CRN Fast Growth 100 based on our 2009 – 2011 growth of over
930% per year.»~ 50% of Technical Staff hold US Government SECRET Clearances.»Service Disabled Veteran Owned Small Business (SDVOSB).
Summit 7 systems is a premier provider of consulting and implementation services specializing on the Microsoft SharePoint Platform and FAST Enterprise Search.
» Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management along with companies such as Microsoft, Oracle and IBM.
» Summit 7 Systems was named to the 2011 and 2012 CRN Next-Gen 250 List as a company bringing innovative processes, methodologies and models to the solution provider industry.
» Top 1% of Microsoft Partners Worldwide» Summit 7 Systems was named #6 on the 2012 CRN Fast Growth 100 based on our 2009 – 2011 growth of over
930% per year.»~ 50% of Technical Staff hold US Government SECRET Clearances.»Service Disabled Veteran Owned Small Business (SDVOSB).
![Page 3: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/3.jpg)
SERVICESSharePoint QuickStartInformation Architecture and Governance DevelopmentUpgrade and MigrationBranding and Design (User Experience)Web Content Management Design and DeploymentSharePoint SearchCustom Workflow or Web Part DevelopmentInfoPath Forms and WorkflowsPerformance Baselines and Best Practices OptimizationMapping Business Process to Software PlatformsCloud Services Design and ProvisioningRemote Support ContractsCompliance Quickstart
SOFTWARE PLATFORMSFAST Enterprise SearchSharePoint 2007SharePoint 2010 SharePoint 2013Office PlatformSitecore
SOLUTION AREASSharePoint Platform SolutionsEnterprise SearchEnterprise Content ManagementInternet / Web Content ManagementExtranet SolutionsIntranet SolutionsBusiness Process ManagementEnterprise Project ManagementExchange Server
SERVICESSharePoint QuickStartInformation Architecture and Governance DevelopmentUpgrade and MigrationBranding and Design (User Experience)Web Content Management Design and DeploymentSharePoint SearchCustom Workflow or Web Part DevelopmentInfoPath Forms and WorkflowsPerformance Baselines and Best Practices OptimizationMapping Business Process to Software PlatformsCloud Services Design and ProvisioningRemote Support ContractsCompliance Quickstart
SOFTWARE PLATFORMSFAST Enterprise SearchSharePoint 2007SharePoint 2010 SharePoint 2013Office PlatformSitecore
SOLUTION AREASSharePoint Platform SolutionsEnterprise SearchEnterprise Content ManagementInternet / Web Content ManagementExtranet SolutionsIntranet SolutionsBusiness Process ManagementEnterprise Project ManagementExchange Server
![Page 4: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/4.jpg)
• 18+ years software architecture and development experience
• SharePoint Junkie since 2007• Event Organizer• Blogger, Writer, Speaker• Bacon aficionado
MARK RACKLEY / SOLUTIONS ARCHITECT
@mrackley
http://www.sharepointhillbilly.com
![Page 5: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/5.jpg)
AGENDA
• What is jQuery? Why SharePoint & jQuery?• SharePoint and jQuery Basics• Deploying / Maintaining • Development Basics• Third Party Libraries• Examples & Demos
The SharePoint & jQuery Guidehttp://bit.ly/jQueryAndSP
![Page 6: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/6.jpg)
WHAT IS JQUERY?• JavaScript Utility Library
• jQuery() or $()
• Allows interaction and manipulation of the DOM after page is rendered
• Can interact with other systems using Web Services
• Supported by Microsoft• Part of “Client Side” Development
![Page 7: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/7.jpg)
WHY SHAREPOINT & JQUERY?
• Fewer upgrade/deployment issues• Rapid deployment and modifications• Less “customization”• Improved visuals• Improved usability
![Page 8: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/8.jpg)
WHY SHAREPOINT & JQUERY?
• Can replace the need for Visual Studio• Can replace the need for basic workflows• No points (shhhh… don’t tell the admins)• Can get around list view threshold
![Page 9: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/9.jpg)
JQUERY & SHAREPOINT BASICS
• Scripts execute with same privileges as current user
• Permissions cannot be elevated• Interact with SharePoint List data using Client
Side Object Model (CSOM) or SPServices• View the DOM not the Page Source
![Page 10: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/10.jpg)
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many optionsvar car = {color: “red”,make: “Jeep”,model:
“wrangler”}
var car = {};car.color = “red”;car.make = “Jeep”;car.model=“wranger”;
var car = {};car[“color”] = “red”;car[“make”] = “Jeep”;car[“model”] =“wranger”;
![Page 11: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/11.jpg)
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many options• Debugging is painful• Performance can suffer• Inconsistent results on different browsers• Constant changes in the jQuery library• It CAN harm your farm!
![Page 12: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/12.jpg)
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?
![Page 13: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/13.jpg)
WHEN SHOULD YOU QUESTION THE USE OF JQUERY?• 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
![Page 14: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/14.jpg)
DEPLOYMENT AND REFERENCE OPTIONS
• Deployment Options• Document Library• File System• Content Delivery Network (CDN)
• Reference Options• ScriptLink• Content Editor Web Part• Custom Action (deploys to Site Collection)
![Page 15: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/15.jpg)
DOCUMENT LIBRARY
![Page 16: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/16.jpg)
CUSTOM ACTION
<?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>
![Page 17: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/17.jpg)
DEVELOPMENT & DEBUGGING• Development
• Visual Studio• Web Essentials
• SharePoint Designer• Notepad++
• Debugging• IE Developer Tools / Firebug• Fiddler• Alerts… alerts… alerts…• Avoid Console.log• Write scripts in small manageable chunks
![Page 18: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/18.jpg)
HOW ABOUT SOME BEST PRACTICES?
• Use the Element’s 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
![Page 19: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/19.jpg)
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
![Page 20: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/20.jpg)
USING THIRD PARTY LIBRARIESSome 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/
![Page 21: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/21.jpg)
DEMO 1: BASICS / INTERACTING WITH FORMS
![Page 22: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/22.jpg)
BASICS
Method Description
$(document).ready(function($){})
Where code execution begins after page is loaded
$(“#ElementID”) Returns element with given id
$(“element.class”) Returns all elements of a particular class$(“div.myClass”)
$(“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
![Page 23: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/23.jpg)
INTERACTING WITH SHAREPOINT FORMS
Getting/Setting SharePoint Form FieldsText 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');
<input name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$TextField" type="text" maxlength="255" id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextField" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
$(“input[title=‘E-mail Address’]”); //returns element$(“input”).each(function(){
$(this).attr(“title”); // gets the value of the title attribute for all inputs});
![Page 24: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/24.jpg)
DEMO 2: READ LIST ITEMS WITH SPSERVICES
![Page 25: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/25.jpg)
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript"> jQuery(document).ready(function($) { LoadSpeakers(); });</script>
<table id='speakerTable'><tr><th>Picture</th><th>Name</th><th>Blog</th></tr></table>
![Page 26: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/26.jpg)
<script type="text/javascript">function LoadSpeakers(){ var listTitle = "Speakers";
var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'>0</Value></Neq></Where></Query>";
var camlViewFields = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Blog' /><FieldRef Name='Picture' /></ViewFields>";
$().SPServices({ operation: "GetListItems", async: true, listName: listTitle, CAMLViewFields: camlViewFields, CAMLQuery: query, completefunc: function(xData, Status) { $(xData.responseXML).SPFilterNode("z:row").each(function() { var speakerName = ($(this).attr("ows_Title")); var picture = $(this).attr("ows_Picture").split(",")[0]; var blog = $(this).attr("ows_Blog").split(",")[0]; $("#speakerTable").append("<tr><td><img width='50' src='"+ picture +"'></td><td>"+speakerName +"</td><td>"+blog +"</td></tr>"); }); // end completefunc } }); // end SPS}</script>
SPSERVICES READ LIST ITEMS
![Page 27: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/27.jpg)
DEMO 3: READ LIST ITEMS WITH CLIENT SIDE OBJECT MODEL
![Page 28: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/28.jpg)
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript"> ExecuteOrDelayUntilScriptLoaded(LoadSpeakers, "sp.js");</script>
<table id='speakerTable'><tr><th>Picture</th><th>Name</th><th>Blog</th></tr></table>
![Page 29: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/29.jpg)
<script type="text/javascript">function LoadSpeakers() { var listTitle = "Speakers"; context = SP.ClientContext.get_current(); var speakerList = context.get_web().get_lists().getByTitle(listTitle); var camlQuery = SP.CamlQuery.createAllItemsQuery(); this.listItems = speakerList.getItems(camlQuery); context.load(listItems); context.executeQueryAsync(ReadListItemSucceeded, ReadListItemFailed);}function ReadListItemSucceeded(sender, args) { var enumerator = listItems.getEnumerator(); while (enumerator.moveNext()) { var listItem = enumerator.get_current(); var blog = listItem.get_item('Blog').get_url(); var speakerName = listItem.get_item('Title'); var picture = listItem.get_item('Picture').get_url(); $("#speakerTable").append("<tr><td><img width='50' src='"+ picture +"'></td><td>"+speakerName +"</td><td>"+blog +"</td></tr>"); }}function ReadListItemFailed(sender, args) { alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());}</script>
CLIENT SIDE OBJECT MODEL READ LIST ITEMS
![Page 30: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/30.jpg)
DEMO 4: SEARCHING THE DOCUMENT OBJECT MODEL
![Page 31: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/31.jpg)
SEARCHING DOM
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 selector
Chaining:$("nobr b:contains('Sum= ')").html().split("= ")[1].replace(",","")
![Page 32: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/32.jpg)
DEMO 5: BING MAP DEMO
Integrating SharePoint and Bing Mapshttp://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=19
![Page 33: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/33.jpg)
MORE DEMOS!(IF WE HAVE ENOUGH TIME)
![Page 34: The SharePoint and jQuery Guide by Mark Rackley - SPTechCon](https://reader033.vdocuments.us/reader033/viewer/2022061609/55511e5db4c905f10b8b5411/html5/thumbnails/34.jpg)
summit7systems
summit7systems.com/blogs
FOR MORE FROM SUMMIT 7 SYSTEMS…
facebook.com/summit7systems
@summit7systems
summit 7 systems