THE SHAREPOINT AND
JQUERY GUIDE
SPFest Chicago 2013
Mark Rackley
mark.rackley@summit7systems.com
» Summit 7 Systems was chosen by KMWorld Magazine as one of the top 100 Companies that Matter in Knowledge Management alon...
SERVICES
SharePoint QuickStart
Information Architecture and Governance Development
Upgrade and Migration
Branding and Desi...
• 18+ years software architecture and
development experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, W...
AGENDA
• What is jQuery? Why SharePoint & jQuery?
• SharePoint and jQuery Basics
• Deploying / Maintaining
• Development B...
WHAT IS JQUERY?
• JavaScript Utility Library
• jQuery() or $()
• Allows interaction and manipulation of the DOM after
page...
WHY SHAREPOINT & JQUERY?
• Fewer upgrade/deployment issues
• Rapid deployment and modifications
• Less “customization”
• I...
WHY SHAREPOINT & JQUERY?
• Can replace the need for Visual Studio
• Can replace the need for basic workflows
• No points (...
JQUERY & SHAREPOINT BASICS
• Scripts execute with same privileges as current user
• Permissions cannot be elevated
• Inter...
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many optionsvar car = {
color: “red”,
make: “Jeep”,
model: “wrangler”
}
v...
WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
• Too many options
• Debugging is painful
• Performance can suffer
• Inconsiste...
WHEN SHOULD YOU USE JQUERY?
• Tightly controlled environments
• Visuals or Usability are high priorities
• Tight timeframe...
WHEN SHOULD YOU QUESTION THE USE OF JQUERY?
• Need pull a lot of data over the wire to work with
• Iterating over many row...
DEPLOYMENT AND REFERENCE OPTIONS
• Deployment Options
• Document Library
• File System
• Content Delivery Network (CDN)
• ...
DOCUMENT LIBRARY
CUSTOM ACTION
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<CustomAc...
DEVELOPMENT & DEBUGGING
• Development
• Visual Studio
• Web Essentials
• SharePoint Designer
• Notepad++
• Debugging
• IE ...
COMMONLY USED JQUERY
METHODS IN SHAREPOINT
JQUERY BASICS
<script type="text/javascript">
$(document).ready(function($){
//this script executes after the page is load...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by I...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the element by a...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve every div on the...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve every div of a s...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the div that con...
JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
//Retrieve the formatted HT...
MORE JQUERY BASICS
//get input / select values
$(“#id”).val();
//set input / select values
$(“#id”).val(“value”);
//check ...
MORE JQUERY BASICS
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
MORE JQUERY BASICS
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
//get the row th...
MORE JQUERY BASICS
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
//get the div AF...
CHAINING
//find the input element that has the “title” attribute equal to “Name”
//then find it’s parent cell’s previous c...
HOW ABOUT SOME BEST PRACTICES?
• Use the Element’s ID when possible
• Reduce DOM searches
• Re-use code / Good coding prac...
USING THIRD PARTY LIBRARIES
Tips for selection and integration
• Look for supported / documented libraries
• Test in targe...
USING THIRD PARTY LIBRARIES
Some of my favorites
• Content Slider - http://unslider.com
• Formatted Tables - http://www.da...
DEMO 1: SETTING FORMS FIELDS
INTERACTING WITH SHAREPOINT FORMS
<input
name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl0...
DEMO 2: SEARCHING THE
DOCUMENT OBJECT MODEL
OTHER DEMOS
summit7systems
summit7systems.com/blogs
FOR MORE FROM SUMMIT 7 SYSTEMS…
facebook.com/summit7systems
@summit7systems
summit...
Upcoming SlideShare
Loading in...5
×

(Updated) SharePoint & jQuery Guide

1,475

Published on

Updated content for my SharePoint & jQuery Guide presentation.

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,475
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

(Updated) SharePoint & jQuery Guide

  1. 1. THE SHAREPOINT AND JQUERY GUIDE SPFest Chicago 2013 Mark Rackley mark.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 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).
  3. 3. SERVICES SharePoint QuickStart Information Architecture and Governance Development Upgrade and Migration Branding and Design (User Experience) Web Content Management Design and Deployment SharePoint Search Custom Workflow or Web Part Development InfoPath Forms and Workflows Performance Baselines and Best Practices Optimization Mapping Business Process to Software Platforms Cloud Services Design and Provisioning Remote Support Contracts Compliance Quickstart SOFTWARE PLATFORMS FAST Enterprise Search SharePoint 2007 SharePoint 2010 SharePoint 2013 Office Platform Sitecore SOLUTION AREAS SharePoint Platform Solutions Enterprise Search Enterprise Content Management Internet / Web Content Management Extranet Solutions Intranet Solutions Business Process Management Enterprise Project Management Exchange Server SERVICES SharePoint QuickStart Information Architecture and Governance Development Upgrade and Migration Branding and Design (User Experience) Web Content Management Design and Deployment SharePoint Search Custom Workflow or Web Part Development InfoPath Forms and Workflows Performance Baselines and Best Practices Optimization Mapping Business Process to Software Platforms Cloud Services Design and Provisioning Remote Support Contracts Compliance Quickstart SOFTWARE PLATFORMS FAST Enterprise Search SharePoint 2007 SharePoint 2010 SharePoint 2013 Office Platform Sitecore SOLUTION AREAS SharePoint Platform Solutions Enterprise Search Enterprise Content Management Internet / Web Content Management Extranet Solutions Intranet Solutions Business Process Management Enterprise Project Management Exchange Server
  4. 4. • 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
  5. 5. AGENDA • What is jQuery? Why SharePoint & jQuery? • SharePoint and jQuery Basics • Deploying / Maintaining • Development Basics • Third Party Libraries • Examples & Demos The SharePoint & jQuery Guide http://bit.ly/jQueryAndSP
  6. 6. 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
  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) • You can get around the ListView Threshold (but should you??)
  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 Object Model (CSOM), REST, or SPServices
  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/"> <CustomAction ScriptSrc="~sitecollection/SiteAssets/jquery.min.js" Location="ScriptLink" Sequence="100" > </CustomAction> </Elements>
  17. 17. 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
  18. 18. COMMONLY USED JQUERY METHODS IN SHAREPOINT
  19. 19. JQUERY BASICS <script type="text/javascript"> $(document).ready(function($){ //this script executes after the page is loaded //if you need to interact with the DOM put script here }) //Script placed here would execute before the page is finished loading. </script>
  20. 20. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>
  21. 21. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve the element by ID: $(“#myID”);
  22. 22. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve the element by attribute: $(“div*attribute=‘myAttribute’+”);
  23. 23. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve every div on the page $(“div”).each(function() , //”this” is the current element in each loop $(this).method(); }); //Hide all divs on the page $(“div”).hide();
  24. 24. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve every div of a specific class $(“div.myClass”).each(function() , //”this” is the current element in each loop $(this).method(); }); //Hide all divs of a specific class on the page $(“div.myClass”).hide(); //Hide all elements of a specific class on the page $(“.myClass”).hide();
  25. 25. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve the div that contains content “World” $(“div:contains(‘World’)”).each(function() , //”this” is the current element in each loop $(this).method(); });
  26. 26. JQUERY BASICS <div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div> //Retrieve the formatted HTML for an element $(“#myID”).html(); //returns <b>Hello World</b> //Set the formatted HTML for an element $(“#myID”).html(“<b>Hello Nurse</b>”); //Retrieve the text with HTML formatting stripped out $(“#myID”).text(); //returns Hello World //Set the unformatted text of an element $(“#myID”).text(“Hello Nurse”);
  27. 27. MORE JQUERY BASICS //get input / select values $(“#id”).val(); //set input / select values $(“#id”).val(“value”); //check a check box $(“#id").removeAttr('checked'); //uncheck a check box $(“#id").attr('checked','checked'); //is a check box checked? if ($(“#id”).is(':checked'))
  28. 28. MORE JQUERY BASICS <tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>
  29. 29. MORE JQUERY BASICS <tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr> //get the row that contains the div “myElement” $(“#myElement”).closest(“tr”); //get the cell that contains the div “myElement” $(“#myElement”).closest(“td”); Or $(“#myElement”).parent();
  30. 30. MORE JQUERY BASICS <tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr> //get the div AFTER myElement $(“#myElement”).next(“div”); Or $(“#myElement”).next(); //get the div BEFORE myOtherelement $(“#myOtherElement”).prev(“div”); Or $(“#myOtherElement”).prev();
  31. 31. CHAINING //find the input element that has the “title” attribute equal to “Name” //then find it’s parent cell’s previous cell. Then find the “h3” element and replace the HTML $("input[title='Name']").closest("td").prev("td").find("h3").html("File Name <font color='red'>*</font>"); //In English: Find the label for the field “Name” and change it to “File Name” and add a red astrisk //find the input element that has the “title” attribute equal to “City” //then hide the entire row that contains the input $(“input*title=‘City’+”).closest(“tr”).hide(); //In English: Hide the SharePoint Form Field and label for the field with the Display //name “City”
  32. 32. 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
  33. 33. 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
  34. 34. USING THIRD PARTY LIBRARIES Some of my favorites • Content Slider - http://unslider.com • Formatted Tables - http://www.datatables.net/ • Modal Window - http://www.ericmmartin.com/projects/simplemodal/ • SPServices - http://spservices.codeplex.com/ • Calendar - http://arshaw.com/fullcalendar/ • Forms 7 – http://forms7.codeplex.com
  35. 35. DEMO 1: SETTING FORMS FIELDS
  36. 36. INTERACTING WITH SHAREPOINT FORMS <input name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Text Field" type="text" maxlength="255" id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextFiel d" title="E-mail Address" class=“ms-long ms-spellcheck-true" /> <input name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Text Field" 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 name="ctl00$m$g_a12c0b73_06fa_4552_a5af_b5d5fce55384$ctl00$ctl05$ctl03$ctl00$ctl00$ctl04$ctl00$ctl00$Text Field" type="text" maxlength="255" id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextFiel d" title="E-mail Address" class=“ms-long ms-spellcheck-true" /> $(“input[title=‘E-mail Address’+”); //returns element
  37. 37. DEMO 2: SEARCHING THE DOCUMENT OBJECT MODEL
  38. 38. OTHER DEMOS
  39. 39. summit7systems summit7systems.com/blogs FOR MORE FROM SUMMIT 7 SYSTEMS… facebook.com/summit7systems @summit7systems summit 7 systems

×