Skip Ribbon Commands
Skip to main content

:

> Posts > The SharePoint & jQuery Guide
April 27
The SharePoint & jQuery Guide

So, you've finally succumbed to the hype and decided to use jQuery in SharePoint? Good for you. I'm sure you are fully prepared with the knowledge of the pros and cons using jQuery as well as have all the requisite knowledge.

You should NOT be writing jQuery in SharePoint if…

You don't? You mean you are going to copy and paste scripts from blogs and then ask the blogger to modify the script to work for your particular circumstance? Oh, that's nice.

Wonk.SharePoint.meme.2.jpg
Well, assuming you actually want to understand what you are doing, maybe even learn a thing or two, I've decided to link to several of my past jQuery blogs in an order which will hopefully help you learn how to successfully use SharePoint and jQuery together. I'll even do my best to keep this post updated as I write new blogs on the subject.

Good luck!

Before getting started…

Make sure you have some good background knowledge.

When you start using things like SPServices and the Client Object Model to query SharePoint list data you will need to understand SharePoint's query language CAML. I always refer to it as the ugly crossbreed of XML and SQL.

If you plan to use SPServices to access SharePoint's Web Services (which I also reference in several of the blogs below), you need to get that at http://spservices.codeplex.com.

When to Choose SPServices vs. the Client Side Object Model (CSOM)

Also, if you are wondering if you should use SPServices instead of the Client Object Model you can read the helpful post put together by Marc Anderson and myself.

Be sure to keep the jQuery.com site handy as this is by far the most up-to-date site to reference the jQuery api.

Before you can start writing any jQuery you need to start with a script that references the jQuery library. You can find a couple of starter scripts in the following blog that reference jQuery using the CDN, just plug and play!

SharePoint & jQuery Starter Scripts

 

The Intro to jQuery and SharePoint blogs

Here are the blogs (in learning order) to help you deploy and get started using jQuery in SharePoint.

A Dummies Guide to SharePoint and jQuery–Getting Started

This blog assumes you know nothing. What is jQuery and how can I deploy it in SharePoint?

Undoubtedly one of the most common tasks you will perform with jQuery is getting and setting SharePoint form fields. This blog walks you through the process with the most common field types. A corresponding blog post to this one is Setting SharePoint Lookup Lists w/ jQuery (+/- 20 items) because unfortunately at some point you will fall victim to this SharePoint quirk.

Creating a SharePoint Parent/Child List Relationship–No SPD Version

I kept getting asked about creating a Parent/Child list relationship for document libraries, so I took the above blog post one step further by using cookies to pass field information instead of the query string. This actually worked out nicely and has some advantages over the query string:

Creating a Parent/Child List Relationship with a Document Library

So, now that you understand the basics of using jQuery in SharePoint and know how to get/set SharePoint form fields, this blog helps you apply that knowledge to perform the common task of creating an automatic parent/child list relationship. There are MANY ways of accomplishing this functionality, but I actually prefer this method. It may be a little more technical than the other solutions I've blogged about for creating a Parent/Child list relationship, but this solution has the least impact on SharePoint and should also upgrade easily.

Okay, at this point you should be ready to start interacting with SharePoint list data using SPServices. This blog post walks you through the basics with a VERY commented script. If you think you have your head wrapped around reading list data with SPServices, you might also check out the following blog posts using SPServices to accomplish some tasks normally achieved using server side code:

Using SPServices & jQuery to Clone a Parent Item and All its Children – Reads items from a SharePoint List and then creates copies of those items.

Using SPServices & jQuery to Find My Stuff from Multi-Select Person/Group Field – Determines the groups a current user belongs to in order to determine if the current user is part of a group or person assigned to a list item.

A Dummies Guide to SharePoint & jQuery – An Easy to Use Content Slider

Now that jQuery and SPServices is old hat, I walk you through the process of integrating SharePoint List Data into a third party jQuery library.

jQuery Demos From Conferences

I do several jQuery demos during my sessions at conferences and have started to create blog posts for those. As I create new ones I’ll be sure to add them to the list.

Integrating SharePoint and Bing Maps

In this blog post I show you how quickly you can integrate Bing Maps with a SharePoint list to display an address in a map. It’s an easy win for your organization to show what can be done with little effort.

Other SharePoint tips and tricks using jQuery

So, here is a smattering of other blog posts on the subject which you may find helpful, or might give you ideas for your projects. Some of them are just academic, and some you can put into practice immediately.

Easy Custom Layouts for Default SharePoint Forms – Easily customize the default SharePoint forms so they don’t look as horrendous

Who Needs a Data View Web Part? SharePoint REST and DataTables.net – Using SharePoint REST to query a list and send those results to the DataTables jQuery library.

Tabbed Web Parts in SharePoint 2013 / Office 365 – Put your web parts into jQuery UI tabs

SharePoint 2013 / Office 365 Web Parts in a jQuery UI Accordion – Put your web parts into a jQuery UI accordian

Using jQuery to Print a Web Part – In this blog I use a very simple third party library to print a specific web part and not the entire page.

Using jQuery to Make a Field Read Only in SharePoint – Another tip you could use to make a SharePoint form field read only.

SharePoint List Views –Quick & Easy jQuery Filter – Using a very simple script, add a filter box to an out of the box list view that filters the rows based upon what the user enters.

Using Google Maps to Populate an Address in a SharePoint New Item Form – Before I started using the Bing Map api, I played around with the Google Maps API.

A Dummies' Guide to SharePoint and jQuery–A Real World Example – A mostly academic post on the types of things you can do with jQuery to modify a page in the _Layouts directory that you don't' have direct access to.

Essential Links for the SharePoint Client Side Developer – This is a list of a lot of the jQuery/JavaScript libraries I use along with some suggestions from others. I actually need to update this list soon.

So, What's next?

What? Is this not enough? I'd say for the price you paid, it's a bargain!!

I hope to do a few blog entries on more advanced topics like Callbacks, templates, and design patterns. Also, as we move towards SharePoint vNext I do think it might be a good idea to start to wean myself off of SPServices and start using the Client Object Model more (although nothing leads me to believe that SPServices will not work in vNext). So, look for me to start a series on the Client Object Model as well and provide any tips or tricks I learn along the way.

As always, let me know what YOU want to learn and I'll see what I can do! Thanks again for stopping by.

Comments

Another JQuery resource

I found this blog to be very helpful in just understanding JQuery apart from SharePoint.

http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner

I find for beginners (me) it is easier to learn the different technologies that SharePoint uses away from SharePoint. Once I understand the basics of that technology, then I bring in the complexity of SharePoint. 
Thanks for your blogs they really help.
 on 4/27/2012 11:28 AM

Thank you

Just wanted to say thank you for posting this information.  I enjoyed your presentation on SPSTC as well.
 on 5/19/2013 11:30 AM

Thank You!

You have an amazing blog and have been reading nearly every post!  Keep up the great work and thank you so much for this free resource!!!!

Dan
 on 1/14/2014 5:08 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Title


Body *


Name *


Who are you?

Email *


How do I find you?

captcha *


Attachments


SharePoint Architect, Developer, Blogger, Speaker, Author, and general pain in the butt.
 
Thoughts, views, and opinions expressed in this blog are solely my own.
 
Remember, the Impossible just takes longer.
​​​​
 

 Blogs you should be reading