THE SHAREPOINT ANDJQUERY GUIDESharePoint Saturday Twin CitiesMay 18th, 2013Mark Rackleymark.rackley@summit7systems.com
» Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management alon...
SERVICESSharePoint QuickStartInformation Architecture and Governance DevelopmentUpgrade and MigrationBranding and Design (...
• 18+ years software architecture anddevelopment experience• SharePoint Junkie since 2007• Event Organizer• Blogger, Write...
AGENDA• What is jQuery? Why SharePoint & jQuery?• SharePoint and jQuery Basics• Deploying / Maintaining• Development Basic...
WHAT IS JQUERY?• JavaScript Utility Library• jQuery() or $()• Allows interaction and manipulation of the DOM afterpage is ...
WHY SHAREPOINT & JQUERY?• Fewer upgrade/deployment issues• Rapid deployment and modifications• Less “customization”• Impro...
WHY SHAREPOINT & JQUERY?• Can replace the need for Visual Studio• Can replace the need for basic workflows• No points (shh...
JQUERY & SHAREPOINT BASICS• Scripts execute with same privileges as current user• Permissions cannot be elevated• Interact...
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)• Too many optionsvar car = {color: “red”,make: “Jeep”,model: “wrangler”}var car...
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)• Too many options• Debugging is painful• Performance can suffer• Inconsistent r...
WHEN SHOULD YOU USE JQUERY?• Tightly controlled environments• Visuals or Usability are high priorities• Tight timeframes• ...
WHEN SHOULD YOU QUESTION THE USE OF JQUERY?• Need pull a lot of data over the wire to work with• Iterating over many rows ...
DEPLOYMENT AND REFERENCE OPTIONS• Deployment Options• Document Library• File System• Content Delivery Network (CDN)• Refer...
DOCUMENT LIBRARY
CUSTOM ACTION<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"><CustomActio...
DEVELOPMENT & DEBUGGING• Development• Visual Studio• Web Essentials• TypeScript• SharePoint Designer• Notepad++• Debugging...
HOW ABOUT SOME BEST PRACTICES?• Use the Element’s ID when possible• Reduce DOM searches• Re-use code / Good coding practic...
USING THIRD PARTY LIBRARIESTips for selection and integration• Look for supported / documented libraries• Test in target b...
USING THIRD PARTY LIBRARIESSome of my favorites• Content Slider - http://www.awkwardgroup.com/sandbox/awkward-showcase-a-j...
BASICS / INTERACTING WITHFORMS
BASICSMethod Description$(document).ready(function($){}) Where code execution begins after page is loaded$(“#ElementID”) R...
INTERACTING WITH SHAREPOINT FORMSGetting/Setting SharePoint Form FieldsText Boxes› $(“input*title=’My Text Field’+”).val()...
DEMO 1: BASICS / INTERACTINGWITH FORMS
READ LIST ITEMS WITHSPSERVICES
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script type="text/jav...
<script type="text/javascript">function LoadSpeakers(){var listTitle = "Speakers";var query = "<Query><Where><Neq><FieldRe...
DEMO 2: READ LIST ITEMS WITHSPSERVICES
READ LIST ITEMS WITH CLIENTSIDE OBJECT MODEL
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script><script type="text/jav...
<script type="text/javascript">function LoadSpeakers() {var listTitle = "Speakers";context = SP.ClientContext.get_current(...
DEMO 3: READ LIST ITEMS WITHCLIENT SIDE OBJECT MODEL
SEARCHING THE DOCUMENTOBJECT MODEL
SEARCHING DOMMethod Description.split() lookUpFieldValue = “1;#Mark Rackley”;Var myArray = numbers.split(“;#”);myArray*1+ ...
DEMO 4: SEARCHING THEDOCUMENT OBJECT MODELTabbed Web Parts in SharePoint 2013 / Office 365http://www.sharepointhillbilly.c...
DEMO 5: BING MAP DEMOIntegrating SharePoint and Bing Mapshttp://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=19
CREATING CUSTOM FORMSForms7 – An InfoPath Forms Alternativehttps://forms7.codeplex.com/
MORE DEMOS
Special thanks to our sponsors…
summit7systemssummit7systems.com/blogsFOR MORE FROM SUMMIT 7 SYSTEMS…facebook.com/summit7systems@summit7systemssummit 7 sy...
Upcoming SlideShare
Loading in...5
×

SharePoint & jQuery Guide - SPSTC 5/18/2013

1,220

Published on

Updated SharePoint and jQuery guide for SPS Twin Cities

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

  • Be the first to like this

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

No notes for slide

SharePoint & jQuery Guide - SPSTC 5/18/2013

  1. 1. THE SHAREPOINT ANDJQUERY GUIDESharePoint Saturday Twin CitiesMay 18th, 2013Mark Rackleymark.rackley@summit7systems.com
  2. 2. » Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management along withcompanies 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 andmodels 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 theMicrosoft 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 withcompanies 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 andmodels 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).
  3. 3. 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 QuickstartSOFTWARE PLATFORMSFAST Enterprise SearchSharePoint 2007SharePoint 2010SharePoint 2013Office PlatformSitecoreSOLUTION AREASSharePoint Platform SolutionsEnterprise SearchEnterprise Content ManagementInternet / Web Content ManagementExtranet SolutionsIntranet SolutionsBusiness Process ManagementEnterprise Project ManagementExchange ServerSERVICESSharePoint 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 QuickstartSOFTWARE PLATFORMSFAST Enterprise SearchSharePoint 2007SharePoint 2010SharePoint 2013Office PlatformSitecoreSOLUTION AREASSharePoint Platform SolutionsEnterprise SearchEnterprise Content ManagementInternet / Web Content ManagementExtranet SolutionsIntranet SolutionsBusiness Process ManagementEnterprise Project ManagementExchange Server
  4. 4. • 18+ years software architecture anddevelopment experience• SharePoint Junkie since 2007• Event Organizer• Blogger, Writer, Speaker• Bacon aficionadoMARK RACKLEY / SOLUTIONS ARCHITECT@mrackley http://www.sharepointhillbilly.com
  5. 5. AGENDA• What is jQuery? Why SharePoint & jQuery?• SharePoint and jQuery Basics• Deploying / Maintaining• Development Basics• Third Party Libraries• Examples & DemosThe SharePoint & jQuery Guidehttp://bit.ly/jQueryAndSP
  6. 6. WHAT IS JQUERY?• JavaScript Utility Library• jQuery() or $()• Allows interaction and manipulation of the DOM afterpage is rendered• Can interact with other systems using Web Services• Supported by Microsoft• Part of “Client Side” Development
  7. 7. WHY SHAREPOINT & JQUERY?• Fewer upgrade/deployment issues• Rapid deployment and modifications• Less “customization”• Improved visuals• Improved usability
  8. 8. 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
  9. 9. JQUERY & SHAREPOINT BASICS• Scripts execute with same privileges as current user• Permissions cannot be elevated• Interact with SharePoint List data using Client Side ObjectModel (CSOM) or SPServices• View the DOM not the Page Source
  10. 10. 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”;
  11. 11. 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!
  12. 12. 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?
  13. 13. 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
  14. 14. 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)
  15. 15. DOCUMENT LIBRARY
  16. 16. CUSTOM ACTION<?xml version="1.0" encoding="utf-8"?><Elements xmlns="http://schemas.microsoft.com/sharepoint/"><CustomActionScriptSrc="~sitecollection/SiteAssets/jquery.min.js"Location="ScriptLink"Sequence="100"></CustomAction></Elements>
  17. 17. DEVELOPMENT & DEBUGGING• Development• Visual Studio• Web Essentials• TypeScript• SharePoint Designer• Notepad++• Debugging• IE Developer Tools / Firebug• Fiddler• Alerts… alerts… alerts…• Avoid Console.log• Write scripts in small manageable chunks
  18. 18. 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
  19. 19. USING THIRD PARTY LIBRARIESTips for selection and integration• Look for supported / documented libraries• Test in target browsers before implementing• Duplicate file structure• Test “vanilla” in SharePoint first
  20. 20. 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/• InfoPath Forms Alternative – http://forms7.codeplex.com
  21. 21. BASICS / INTERACTING WITHFORMS
  22. 22. BASICSMethod 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=‘FirstName’+”).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
  23. 23. INTERACTING WITH SHAREPOINT FORMSGetting/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);<inputname="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});
  24. 24. DEMO 1: BASICS / INTERACTINGWITH FORMS
  25. 25. READ LIST ITEMS WITHSPSERVICES
  26. 26. <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>
  27. 27. <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
  28. 28. DEMO 2: READ LIST ITEMS WITHSPSERVICES
  29. 29. READ LIST ITEMS WITH CLIENTSIDE OBJECT MODEL
  30. 30. <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>
  31. 31. <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
  32. 32. DEMO 3: READ LIST ITEMS WITHCLIENT SIDE OBJECT MODEL
  33. 33. SEARCHING THE DOCUMENTOBJECT MODEL
  34. 34. SEARCHING DOMMethod 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:$("nobr b:contains(Sum= )").html().split("= ")[1].replace(",","")
  35. 35. DEMO 4: SEARCHING THEDOCUMENT OBJECT MODELTabbed Web Parts in SharePoint 2013 / Office 365http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42
  36. 36. DEMO 5: BING MAP DEMOIntegrating SharePoint and Bing Mapshttp://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=19
  37. 37. CREATING CUSTOM FORMSForms7 – An InfoPath Forms Alternativehttps://forms7.codeplex.com/
  38. 38. MORE DEMOS
  39. 39. Special thanks to our sponsors…
  40. 40. summit7systemssummit7systems.com/blogsFOR MORE FROM SUMMIT 7 SYSTEMS…facebook.com/summit7systems@summit7systemssummit 7 systems

×