The SharePoint & jQuery Guide - Updated 1/14/14

THE SHAREPOINT AND
JQUERY GUIDE
SharePoint Saturday St. Louis
Mark Rackley
mark.rackley@summit7systems.com

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).

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

MARK RACKLEY / SOLUTIONS ARCHITECT

• 18+ years software architecture and
development experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, Writer, Speaker
• Bacon aficionado

@mrackley

http://www.sharepointhillbilly.com

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

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

WHY SHAREPOINT & JQUERY?
•
•
•
•
•

Fewer upgrade/deployment issues
Rapid deployment and modifications
Less “customization”
Improved visuals
Improved usability

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??)

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

WHY I HATE JAVASCRIPT & JQUERY (SOME DAYS)
var car = {
• Too many options
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”;

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!

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?

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

DEPLOYMENT OPTIONS
• Document Library
<script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>

• File System
<script type="text/javascript" src="/_layouts/scripts/jquery.min.js"></script>

• Content Delivery Network (CDN)
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

REFERENCE OPTIONS
• ScriptLink
<SharePoint:ScriptLink runat="server" Name="/SiteAssets/jquery.min.js"
Localizable="false"></SharePoint:ScriptLink>

• Content Editor Web Part
•

Use the Content Link

• Custom Action
•

Feature, Deploys to Site Collection

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>

A WORD ABOUT MDS
Minimal Download Strategy (MDS)
• New in SharePoint 2013 / enabled by default in O365
• Reduces page load time by sending only the differences when users navigate to
a new page.
• https://sp_site/_layouts/15/start.aspx#/SitePages/newpage.aspx
• Can cause scripts referenced in Custom Actions and CEWPs to not be loaded
• Disable feature at site level if MDS is causing issues. Rework scripts based on
recommendations in order to use MDS.

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

COMMONLY USED JQUERY
METHODS IN SHAREPOINT

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>

JQUERY BASICS
<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

JQUERY BASICS

//Retrieve the element by ID:
$(“#myID”);

JQUERY BASICS

//Retrieve the element by attribute:
$(“div*attribute=‘myAttribute’+”);

JQUERY BASICS

//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();

JQUERY BASICS
//Retrieve every div of a specific class
$(“div.myClass”).each(function() ,
$(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();

JQUERY BASICS

//Retrieve the div that contains content “World”
$(“div:contains(‘World’)”).each(function() ,
$(this).method();
});

JQUERY BASICS

//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”);

MORE JQUERY BASICS
//get input / select values
$(“#id”).val();
//set input / select values
$(“#id”).val(“value”);
//uncheck a check box
$(“#id").removeAttr('checked');
//check a check box
$(“#id").attr('checked','checked');
//is a check box checked?
if ($(“#id”).is(':checked'))

MORE JQUERY BASICS
<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

MORE JQUERY BASICS
//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();

MORE JQUERY BASICS
//get the div AFTER myElement
$(“#myElement”).next(“div”);
Or
$(“#myElement”).next();
//get the div BEFORE myOtherelement
$(“#myOtherElement”).prev(“div”);
Or
$(“#myOtherElement”).prev();

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”

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

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

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

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_TextField"
id="ctl00_m_g_a12c0b73_06fa_4552_a5af_b5d5fce55384_ctl00_ctl05_ctl03_ctl00_ctl00_ctl04_ctl00_ctl00_TextFiel
title="E-mail Address" class=“ms-long ms-spellcheck-true" />
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_TextFiel
d" title="E-mail Address" class=“ms-long ms-spellcheck-true" />
$(“input[title=‘E-mail Address’+”); //returns element

DEMOS! – LET’S DO SOME STUFF!

FOR MORE FROM SUMMIT 7 SYSTEMS…
facebook.com/summit7systems

@summit7systems
summit 7 systems
summit7systems
summit7systems.com/blogs

The SharePoint & jQuery Guide - Updated 1/14/14

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to The SharePoint & jQuery Guide - Updated 1/14/14 (20)

More from Mark Rackley (7)

Recently uploaded (20)

The SharePoint & jQuery Guide - Updated 1/14/14