While SharePoint offers a number of ways to change content structure for subsites, lists, libraries, views, columns, content types and the out-of-the-box Web parts, sometimes it's just not enough.
There are times when users or designers and developers need to make changes to the functionality and appearance of a SharePoint site in a way that is not allowed by their IT department. Since SharePoint Designer is restricted in most organizations, it is not usually an option. Another more accessible possibility is jQuery.
Adding some jQuery code to your site is simple because SharePoint already provides the means to do it -- the humble Content Editor Web Part (CEWP). While this Web part is usually used to display formatted text on a SharePoint page, it can also be used to run jQuery scripts. All you have to do is add a CEWP to your page, paste in the script, press OK or apply it. No need to compile code on the server, no complex change control procedure to get through with IT, and if it goes wrong, the worst situation is that you will have to remove the Web part from the page. The only thing you should test are browser versions, just to be sure they are compatible.
JQuery uses a library of functions hosted by Google to manipulate the data or structure (such as cascading style sheets) on your page. For that reason, most examples of jQuery you will find on the Web contain a line like this at the top:
This lets the script see the functions it needs to do its job. It is possible to copy the jQuery libraries to your own server, but why not let Google host, manage and maintain them for you for free? Use jQuery for three main categories of action on your SharePoint site: change functionality, change appearance and access data.
Here are some examples of all three from the Web:
In this example, it allows you to scroll through a list while keeping the column headings static. The normal functionality in SharePoint is when you load a large list and scroll down, the column headers are hidden. This script places a scrollbar in the list so the column heading stays put.
This example shows how you can use jQuery to change the appearance of the Quick Launch menu. It does this by making changes to the CSS classes that SharePoint uses for the quick launch and adds extra code to them.
This final example is the most complex. It accesses the MOSS 2007 Search Web Service to find individual results and display them in the page. It also adds some clever code that begins the search as soon as the user starts typing the query.
With the advent of SharePoint Online, access to the back end of your SharePoint system will become even more limited. Power users and developers will have to devise more sophisticated ways to manipulate the data and interface for SharePoint. JQuery has some amazing potential as well as a large and healthy online community behind it to help it grow.
Stephen Cummins, founder of www.spsfaq.com, is a SharePoint consultant and has been a SharePoint MVP (Most Valuable Professional) for the past seven years. He lives in Kildare, Ireland, with his wife, daughter, two dogs and an ever-changing number of goldfish.
This was first published in September 2009